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

.changeset/icon-inline-in-text.md
+6
View File
@@ -0,0 +1,6 @@
---
"@tabler/preview": patch
"@tabler/docs": patch
---
Added `.icon-inline` to icons that sit in a line of text in the demo cards, preview pages and docs examples.
docs/content/icons/static-files/svg.mdx
+1 -1
View File
@@ -35,7 +35,7 @@ When you load an icon as an image, set its size with CSS.
Paste the content of the SVG file into your HTML to render it inline.
<Example codeOnly>
<a href=""> <Icon name="disabled" /> Click me </a>
<a href=""> <Icon name="disabled" inline /> Click me </a>
</Example>
Inline SVG picks up CSS, so you can set the size, the color and the `stroke-width` from your stylesheet.
docs/content/ui/components/card.mdx
+1 -1
View File
@@ -410,7 +410,7 @@ Change how solid a card looks. `card-borderless` drops the border, `card-dashed`
</div>
<div class="col-md-4">
<div class="card card-transparent">
<div class="card-body text-secondary"><Icon name="plus" /> Add new</div>
<div class="card-body text-secondary"><Icon name="plus" inline /> Add new</div>
</div>
</div>
</div>
docs/content/ui/components/datagrid.mdx
+1 -1
View File
@@ -101,7 +101,7 @@ A value is a plain container, so it takes anything: text, [avatars](/ui/componen
</div>
<div class="datagrid-item">
<div class="datagrid-title">Icon</div>
<div class="datagrid-content"><Icon name="check" class="text-green" /> Checked</div>
<div class="datagrid-content"><Icon name="check" inline class="text-green" /> Checked</div>
</div>
<div class="datagrid-item">
<div class="datagrid-title">Form control</div>
docs/content/ui/layout/page-headers.mdx
+3 -3
View File
@@ -46,14 +46,14 @@ Add an [avatar](/ui/components/avatar) and a `.page-subtitle` block with meta in
<div class="page-subtitle">
<div class="row">
<div class="col-auto">
<Icon name="building-skyscraper" />
<Icon name="building-skyscraper" inline />
<a href="#" class="text-reset">UI Designer at Tabler</a>
</div>
<div class="col-auto">
<Icon name="users" />
<Icon name="users" inline />
<a href="#" class="text-reset">194 friends</a>
</div>
<div class="col-auto text-success"><Icon name="check" /> Verified</div>
<div class="col-auto text-success"><Icon name="check" inline /> Verified</div>
</div>
</div>
</div>
preview/pages/all-elements.astro
+5 -5
View File
@@ -797,23 +797,23 @@ function greetUser(name) {
<CardBody class="p-0">
<ListGroup flush>
<ListGroupItem>
<Icon name="home" class="me-2" />
<Icon name="home" inline class="me-2" />
Home
</ListGroupItem>
<ListGroupItem active>
<Icon name="star" class="me-2" />
<Icon name="star" inline class="me-2" />
Active item
</ListGroupItem>
<ListGroupItem>
<Icon name="settings" class="me-2" />
<Icon name="settings" inline class="me-2" />
Settings
</ListGroupItem>
<ListGroupItem>
<Icon name="user" class="me-2" />
<Icon name="user" inline class="me-2" />
Profile
</ListGroupItem>
<ListGroupItem disabled>
<Icon name="lock" class="me-2" />
<Icon name="lock" inline class="me-2" />
Disabled item
</ListGroupItem>
</ListGroup>
preview/pages/license.astro
+7 -7
View File
@@ -63,21 +63,21 @@ const licenseHtml = `
<h4>Permissions</h4>
<ul class="list-unstyled space-y-1">
<li><Icon name="check" class="text-green" /> Commercial use</li>
<li><Icon name="check" class="text-green" /> Modification</li>
<li><Icon name="check" class="text-green" /> Distribution</li>
<li><Icon name="check" class="text-green" /> Private use</li>
<li><Icon name="check" inline class="text-green" /> Commercial use</li>
<li><Icon name="check" inline class="text-green" /> Modification</li>
<li><Icon name="check" inline class="text-green" /> Distribution</li>
<li><Icon name="check" inline class="text-green" /> Private use</li>
</ul>
<h4>Limitations</h4>
<ul class="list-unstyled space-y-1">
<li><Icon name="x" class="text-red" /> Liability</li>
<li><Icon name="x" class="text-red" /> Warranty</li>
<li><Icon name="x" inline class="text-red" /> Liability</li>
<li><Icon name="x" inline class="text-red" /> Warranty</li>
</ul>
<h4>Conditions</h4>
<ul class="list-unstyled space-y-1">
<li><Icon name="info-circle" class="text-blue" /> License and copyright notice</li>
<li><Icon name="info-circle" inline class="text-blue" /> License and copyright notice</li>
</ul>
</CardBody>
<CardFooter>
preview/pages/tasks-list.astro
+2 -2
View File
@@ -82,12 +82,12 @@ const selectedPeople = [5, 6, 2, 3].map((id) => requireIndex(peopleList, id - 1)
<td class="text-secondary">
{task.due_date ? (
<Fragment>
<Icon name="calendar" class="me-1" />
<Icon name="calendar" inline class="me-1" />
{task.due_date}
</Fragment>
) : task['due-date'] ? (
<Fragment>
<Icon name="calendar" class="me-1" />
<Icon name="calendar" inline class="me-1" />
{task['due-date']}
</Fragment>
) : (
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>