Mirrors/tabler
1
0 Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-10-12 13:17:00 +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. Paste the content of the SVG file into your HTML to render it inline.
<Example codeOnly> <Example codeOnly>
<a href=""> <Icon name="disabled" /> Click me </a> <a href=""> <Icon name="disabled" inline /> Click me </a>
</Example> </Example>
Inline SVG picks up CSS, so you can set the size, the color and the `stroke-width` from your stylesheet. 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>
<div class="col-md-4"> <div class="col-md-4">
<div class="card card-transparent"> <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> </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>
<div class="datagrid-item"> <div class="datagrid-item">
<div class="datagrid-title">Icon</div> <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>
<div class="datagrid-item"> <div class="datagrid-item">
<div class="datagrid-title">Form control</div> <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="page-subtitle">
<div class="row"> <div class="row">
<div class="col-auto"> <div class="col-auto">
<Icon name="building-skyscraper" /> <Icon name="building-skyscraper" inline />
<a href="#" class="text-reset">UI Designer at Tabler</a> <a href="#" class="text-reset">UI Designer at Tabler</a>
</div> </div>
<div class="col-auto"> <div class="col-auto">
<Icon name="users" /> <Icon name="users" inline />
<a href="#" class="text-reset">194 friends</a> <a href="#" class="text-reset">194 friends</a>
</div> </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> </div>
</div> </div>
preview/pages/all-elements.astro
+5 -5
View File
@@ -797,23 +797,23 @@ function greetUser(name) {
<CardBody class="p-0"> <CardBody class="p-0">
<ListGroup flush> <ListGroup flush>
<ListGroupItem> <ListGroupItem>
<Icon name="home" class="me-2" /> <Icon name="home" inline class="me-2" />
Home Home
</ListGroupItem> </ListGroupItem>
<ListGroupItem active> <ListGroupItem active>
<Icon name="star" class="me-2" /> <Icon name="star" inline class="me-2" />
Active item Active item
</ListGroupItem> </ListGroupItem>
<ListGroupItem> <ListGroupItem>
<Icon name="settings" class="me-2" /> <Icon name="settings" inline class="me-2" />
Settings Settings
</ListGroupItem> </ListGroupItem>
<ListGroupItem> <ListGroupItem>
<Icon name="user" class="me-2" /> <Icon name="user" inline class="me-2" />
Profile Profile
</ListGroupItem> </ListGroupItem>
<ListGroupItem disabled> <ListGroupItem disabled>
<Icon name="lock" class="me-2" /> <Icon name="lock" inline class="me-2" />
Disabled item Disabled item
</ListGroupItem> </ListGroupItem>
</ListGroup> </ListGroup>
preview/pages/license.astro
+7 -7
View File
@@ -63,21 +63,21 @@ const licenseHtml = `
<h4>Permissions</h4> <h4>Permissions</h4>
<ul class="list-unstyled space-y-1"> <ul class="list-unstyled space-y-1">
<li><Icon name="check" class="text-green" /> Commercial use</li> <li><Icon name="check" inline class="text-green" /> Commercial use</li>
<li><Icon name="check" class="text-green" /> Modification</li> <li><Icon name="check" inline class="text-green" /> Modification</li>
<li><Icon name="check" class="text-green" /> Distribution</li> <li><Icon name="check" inline class="text-green" /> Distribution</li>
<li><Icon name="check" class="text-green" /> Private use</li> <li><Icon name="check" inline class="text-green" /> Private use</li>
</ul> </ul>
<h4>Limitations</h4> <h4>Limitations</h4>
<ul class="list-unstyled space-y-1"> <ul class="list-unstyled space-y-1">
<li><Icon name="x" class="text-red" /> Liability</li> <li><Icon name="x" inline class="text-red" /> Liability</li>
<li><Icon name="x" class="text-red" /> Warranty</li> <li><Icon name="x" inline class="text-red" /> Warranty</li>
</ul> </ul>
<h4>Conditions</h4> <h4>Conditions</h4>
<ul class="list-unstyled space-y-1"> <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> </ul>
</CardBody> </CardBody>
<CardFooter> <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"> <td class="text-secondary">
{task.due_date ? ( {task.due_date ? (
<Fragment> <Fragment>
<Icon name="calendar" class="me-1" /> <Icon name="calendar" inline class="me-1" />
{task.due_date} {task.due_date}
</Fragment> </Fragment>
) : task['due-date'] ? ( ) : task['due-date'] ? (
<Fragment> <Fragment>
<Icon name="calendar" class="me-1" /> <Icon name="calendar" inline class="me-1" />
{task['due-date']} {task['due-date']}
</Fragment> </Fragment>
) : ( ) : (
shared/components/cards/Configuration.astro
+1 -1
View File
@@ -10,7 +10,7 @@ import CardTitle from '@ui/CardTitle.astro'
<CardTitle> Configuration </CardTitle> <CardTitle> Configuration </CardTitle>
<CardActions> <CardActions>
<a href="#"> <a href="#">
Edit configuration<Icon name="edit" class="ms-1" /> Edit configuration<Icon name="edit" inline class="ms-1" />
</a> </a>
</CardActions> </CardActions>
</div> </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 && ( !hideLikes && (
<div class="ms-auto"> <div class="ms-auto">
<a href="#" class="text-secondary"> <a href="#" class="text-secondary">
<Icon name="eye" /> <Icon name="eye" inline />
{randomNumber(index, 300, 600)} {randomNumber(index, 300, 600)}
</a> </a>
<a href="#" class="ms-3 text-secondary"> <a href="#" class="ms-3 text-secondary">
<Icon name="heart" class={heartClass} /> <Icon name="heart" inline class={heartClass} />
{randomNumber(index, 20, 100)} {randomNumber(index, 20, 100)}
</a> </a>
</div> </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> <thead>
<tr> <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"><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>Invoice Subject</th>
<th>Client</th> <th>Client</th>
<th>VAT No.</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> <td>
{url.uri} {url.uri}
<a href="#" class="ms-1" aria-label="Open website"> <a href="#" class="ms-1" aria-label="Open website">
<Icon name="link" /> <Icon name="link" inline />
</a> </a>
</td> </td>
<td class="text-secondary">{formatNumber(url.visitors)}</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) => ( featureNames.map((feature, i) => (
<li> <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} {feature}
</li> </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="col">
<div class="fw-medium"> <div class="fw-medium">
{title ?? 1700} {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>} {descriptionValue && <span class={`float-end fw-medium text-${descriptionValueColor ?? 'green'}`}>{descriptionValue}</span>}
</div> </div>
<div class="text-secondary"> <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> </a>
</td> </td>
<td class="text-nowrap text-secondary"> <td class="text-nowrap text-secondary">
<Icon name="calendar" /> <Icon name="calendar" inline />
{formatLongDate(randomDate(index))} {formatLongDate(randomDate(index))}
</td> </td>
<td class="text-nowrap"> <td class="text-nowrap">
@@ -39,7 +39,7 @@ import { formatLongDate } from '@shared/lib/date-format'
</td> </td>
<td class="text-nowrap"> <td class="text-nowrap">
<a href="#" class="text-secondary"> <a href="#" class="text-secondary">
<Icon name="message" /> {randomNumber(index, 0, 12)} <Icon name="message" inline /> {randomNumber(index, 0, 12)}
</a> </a>
</td> </td>
<td> <td>
shared/components/cards/UserInfo.astro
+6 -6
View File
@@ -13,27 +13,27 @@ const person = requireIndex(people, 24)
<div class="card-body"> <div class="card-body">
<CardTitle>Basic info</CardTitle> <CardTitle>Basic info</CardTitle>
<div class="mb-2"> <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> Went to: <strong>{person.university}</strong>
</div> </div>
<div class="mb-2"> <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> Worked at: <strong>{person.company}</strong>
</div> </div>
<div class="mb-2"> <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> Lives in: <strong>{person.city}, {person.country}</strong>
</div> </div>
<div class="mb-2"> <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> From: <strong><Flag size="xs" flag={(person.country_code ?? '') as FlagCountry} /> {person.country}</strong>
</div> </div>
<div class="mb-2"> <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> Birth date: <strong>{person.birth_date}</strong>
</div> </div>
<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> Time zone: <strong>{person.time_zone}</strong>
</div> </div>
</div> </div>
shared/components/parts/Datagrid.astro
+1 -1
View File
@@ -35,7 +35,7 @@ const creator = requireIndex(people, 0)
</label> </label>
</DatagridItem> </DatagridItem>
<DatagridItem title="Icon"> <DatagridItem title="Icon">
<Icon name="check" color="green" /> <Icon name="check" inline color="green" />
Checked Checked
</DatagridItem> </DatagridItem>
<DatagridItem title="Form control"> <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 && ( {task.due_date && (
<div class="col-auto"> <div class="col-auto">
<a href="#" class="link-warning"> <a href="#" class="link-warning">
<Icon name="calendar" /> <Icon name="calendar" inline />
{task.due_date} {task.due_date}
</a> </a>
</div> </div>
@@ -76,7 +76,7 @@ const data = tasksData as unknown as { columns: Column[] }
{task.subtasks && ( {task.subtasks && (
<div class="col-auto"> <div class="col-auto">
<a href="#" class="link-secondary"> <a href="#" class="link-secondary">
<Icon name="activity" /> <Icon name="activity" inline />
1/{task.subtasks.length} 1/{task.subtasks.length}
</a> </a>
</div> </div>
@@ -84,13 +84,13 @@ const data = tasksData as unknown as { columns: Column[] }
{task.comments && ( {task.comments && (
<div class="col-auto"> <div class="col-auto">
<a href="#" class="link-secondary"> <a href="#" class="link-secondary">
<Icon name="message" /> {task.comments} <Icon name="message" inline /> {task.comments}
</a> </a>
</div> </div>
)} )}
<div class="col-auto"> <div class="col-auto">
<a href="#" class="link-secondary" aria-label="Share"> <a href="#" class="link-secondary" aria-label="Share">
<Icon name="share" /> <Icon name="share" inline />
</a> </a>
</div> </div>
</div> </div>
@@ -102,12 +102,12 @@ const data = tasksData as unknown as { columns: Column[] }
<div> <div>
{subtask.done ? ( {subtask.done ? (
<Fragment> <Fragment>
<Icon name="check" color="muted" /> <Icon name="check" inline color="muted" />
<span class="text-secondary text-decoration-line-through">{subtask.name}</span> <span class="text-secondary text-decoration-line-through">{subtask.name}</span>
</Fragment> </Fragment>
) : ( ) : (
<Fragment> <Fragment>
<Icon name="check" color="green" /> <Icon name="check" inline color="green" />
{subtask.name} {subtask.name}
</Fragment> </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]}> <a href={getDocsUrl(path)} target="_blank" rel="noopener" class:list={['link-secondary', className]}>
{text} {text}
<Icon name="external-link" class="icon-sm" /> <Icon name="external-link" inline class="icon-sm" />
</a> </a>