Mirrors/tabler
1
0 Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-10-12 05:06:55 +04:00
Code Issues Projects Releases Wiki Activity

Add .icon-inline to icons shown in a line of text (#3248)

Browse Source
This commit is contained in:
Paweł Kuna authored and Bartek committed 2026-10-02 11:32:45 +02:00
1 parent 725e45d456
commit ba4e87a8d0
19 files changed
+49 -43
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

shared/components/cards/Configuration.astro
+1 -1
View File
@@ -10,7 +10,7 @@ import CardTitle from '@ui/CardTitle.astro'
<CardTitle> Configuration </CardTitle>
<CardActions>
<a href="#">
Edit configuration<Icon name="edit" class="ms-1" />
Edit configuration<Icon name="edit" inline class="ms-1" />
</a>
</CardActions>
</div>
shared/components/cards/GalleryPhoto.astro
+2 -2
View File
@@ -42,11 +42,11 @@ const heartClass = (index > 2 && index < 9) || index === 10 ? 'icon-filled text-
!hideLikes && (
<div class="ms-auto">
<a href="#" class="text-secondary">
<Icon name="eye" />
<Icon name="eye" inline />
{randomNumber(index, 300, 600)}
</a>
<a href="#" class="ms-3 text-secondary">
<Icon name="heart" class={heartClass} />
<Icon name="heart" inline class={heartClass} />
{randomNumber(index, 20, 100)}
</a>
</div>
shared/components/cards/Invoices.astro
+1 -1
View File
@@ -38,7 +38,7 @@ const countryNames = Object.fromEntries((countries as { code: string; name: stri
<thead>
<tr>
<th class="w-1"><input class="form-check-input m-0 align-middle" type="checkbox" aria-label="Select all invoices" /></th>
<th class="w-1">No. <Icon name="chevron-up" class="icon-sm" /></th>
<th class="w-1">No. <Icon name="chevron-up" inline class="icon-sm" /></th>
<th>Invoice Subject</th>
<th>Client</th>
<th>VAT No.</th>
shared/components/cards/MostVisitedPages.astro
+1 -1
View File
@@ -27,7 +27,7 @@ import { formatNumber } from '@shared/lib/string-format'
<td>
{url.uri}
<a href="#" class="ms-1" aria-label="Open website">
<Icon name="link" />
<Icon name="link" inline />
</a>
</td>
<td class="text-secondary">{formatNumber(url.visitors)}</td>
shared/components/cards/PricingCard.astro
+1 -1
View File
@@ -36,7 +36,7 @@ const availableFeatures = features.split('')
{
featureNames.map((feature, i) => (
<li>
{availableFeatures[i] === '1' ? <Icon name="check" class="me-1 text-success" /> : <Icon name="x" class="me-1 text-danger" />}
{availableFeatures[i] === '1' ? <Icon name="check" inline class="me-1 text-success" /> : <Icon name="x" inline class="me-1 text-danger" />}
{feature}
</li>
))
shared/components/cards/SmallStats.astro
+1 -1
View File
@@ -53,7 +53,7 @@ const avatarClass = [color ? `bg-${color}${lt ? '-lt' : ' text-white'}` : '', 'a
<div class="col">
<div class="fw-medium">
{title ?? 1700}
{smallIcon && <Icon name={smallIcon} color={color} class="icon-sm ms-1" />}
{smallIcon && <Icon name={smallIcon} inline color={color} class="icon-sm ms-1" />}
{descriptionValue && <span class={`float-end fw-medium text-${descriptionValueColor ?? 'green'}`}>{descriptionValue}</span>}
</div>
<div class="text-secondary">
shared/components/cards/Tasks.astro
+2 -2
View File
@@ -28,7 +28,7 @@ import { formatLongDate } from '@shared/lib/date-format'
</a>
</td>
<td class="text-nowrap text-secondary">
<Icon name="calendar" />
<Icon name="calendar" inline />
{formatLongDate(randomDate(index))}
</td>
<td class="text-nowrap">
@@ -39,7 +39,7 @@ import { formatLongDate } from '@shared/lib/date-format'
</td>
<td class="text-nowrap">
<a href="#" class="text-secondary">
<Icon name="message" /> {randomNumber(index, 0, 12)}
<Icon name="message" inline /> {randomNumber(index, 0, 12)}
</a>
</td>
<td>
shared/components/cards/UserInfo.astro
+6 -6
View File
@@ -13,27 +13,27 @@ const person = requireIndex(people, 24)
<div class="card-body">
<CardTitle>Basic info</CardTitle>
<div class="mb-2">
<Icon name="book" class="me-2 text-secondary" />
<Icon name="book" inline class="me-2 text-secondary" />
Went to: <strong>{person.university}</strong>
</div>
<div class="mb-2">
<Icon name="briefcase" class="me-2 text-secondary" />
<Icon name="briefcase" inline class="me-2 text-secondary" />
Worked at: <strong>{person.company}</strong>
</div>
<div class="mb-2">
<Icon name="home" class="me-2 text-secondary" />
<Icon name="home" inline class="me-2 text-secondary" />
Lives in: <strong>{person.city}, {person.country}</strong>
</div>
<div class="mb-2">
<Icon name="map-pin" class="me-2 text-secondary" />
<Icon name="map-pin" inline class="me-2 text-secondary" />
From: <strong><Flag size="xs" flag={(person.country_code ?? '') as FlagCountry} /> {person.country}</strong>
</div>
<div class="mb-2">
<Icon name="calendar" class="me-2 text-secondary" />
<Icon name="calendar" inline class="me-2 text-secondary" />
Birth date: <strong>{person.birth_date}</strong>
</div>
<div>
<Icon name="clock" class="me-2 text-secondary" />
<Icon name="clock" inline class="me-2 text-secondary" />
Time zone: <strong>{person.time_zone}</strong>
</div>
</div>
shared/components/parts/Datagrid.astro
+1 -1
View File
@@ -35,7 +35,7 @@ const creator = requireIndex(people, 0)
</label>
</DatagridItem>
<DatagridItem title="Icon">
<Icon name="check" color="green" />
<Icon name="check" inline color="green" />
Checked
</DatagridItem>
<DatagridItem title="Form control">
shared/components/parts/Tasks.astro
+6 -6
View File
@@ -55,7 +55,7 @@ const data = tasksData as unknown as { columns: Column[] }
{task.due_date && (
<div class="col-auto">
<a href="#" class="link-warning">
<Icon name="calendar" />
<Icon name="calendar" inline />
{task.due_date}
</a>
</div>
@@ -76,7 +76,7 @@ const data = tasksData as unknown as { columns: Column[] }
{task.subtasks && (
<div class="col-auto">
<a href="#" class="link-secondary">
<Icon name="activity" />
<Icon name="activity" inline />
1/{task.subtasks.length}
</a>
</div>
@@ -84,13 +84,13 @@ const data = tasksData as unknown as { columns: Column[] }
{task.comments && (
<div class="col-auto">
<a href="#" class="link-secondary">
<Icon name="message" /> {task.comments}
<Icon name="message" inline /> {task.comments}
</a>
</div>
)}
<div class="col-auto">
<a href="#" class="link-secondary" aria-label="Share">
<Icon name="share" />
<Icon name="share" inline />
</a>
</div>
</div>
@@ -102,12 +102,12 @@ const data = tasksData as unknown as { columns: Column[] }
<div>
{subtask.done ? (
<Fragment>
<Icon name="check" color="muted" />
<Icon name="check" inline color="muted" />
<span class="text-secondary text-decoration-line-through">{subtask.name}</span>
</Fragment>
) : (
<Fragment>
<Icon name="check" color="green" />
<Icon name="check" inline color="green" />
{subtask.name}
</Fragment>
)}
shared/ui/DocsLink.astro
+1 -1
View File
@@ -17,5 +17,5 @@ const { path, text = 'Docs', class: className }: Props = Astro.props
<a href={getDocsUrl(path)} target="_blank" rel="noopener" class:list={['link-secondary', className]}>
{text}
<Icon name="external-link" class="icon-sm" />
<Icon name="external-link" inline class="icon-sm" />
</a>