From 1b4a219ac0d681c8a93c77c21bb9c62de42bfcd8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Kuna?= <1282324+codecalm@users.noreply.github.com> Date: Wed, 30 Sep 2026 01:00:28 +0200 Subject: [PATCH] Add `.icon-inline` to icons shown in a line of text (#3248) --- .changeset/icon-inline-in-text.md | 6 ++++++ docs/content/icons/static-files/svg.mdx | 2 +- docs/content/ui/components/card.mdx | 2 +- docs/content/ui/components/datagrid.mdx | 2 +- docs/content/ui/layout/page-headers.mdx | 6 +++--- preview/pages/all-elements.astro | 10 +++++----- preview/pages/license.astro | 14 +++++++------- preview/pages/tasks-list.astro | 4 ++-- shared/components/cards/Configuration.astro | 2 +- shared/components/cards/GalleryPhoto.astro | 4 ++-- shared/components/cards/Invoices.astro | 2 +- shared/components/cards/MostVisitedPages.astro | 2 +- shared/components/cards/PricingCard.astro | 2 +- shared/components/cards/SmallStats.astro | 2 +- shared/components/cards/Tasks.astro | 4 ++-- shared/components/cards/UserInfo.astro | 12 ++++++------ shared/components/parts/Datagrid.astro | 2 +- shared/components/parts/Tasks.astro | 12 ++++++------ shared/ui/DocsLink.astro | 2 +- 19 files changed, 49 insertions(+), 43 deletions(-) create mode 100644 .changeset/icon-inline-in-text.md diff --git a/.changeset/icon-inline-in-text.md b/.changeset/icon-inline-in-text.md new file mode 100644 index 000000000..cc159dac2 --- /dev/null +++ b/.changeset/icon-inline-in-text.md @@ -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. diff --git a/docs/content/icons/static-files/svg.mdx b/docs/content/icons/static-files/svg.mdx index e013b4030..144daf89e 100644 --- a/docs/content/icons/static-files/svg.mdx +++ b/docs/content/icons/static-files/svg.mdx @@ -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. - Click me + Click me Inline SVG picks up CSS, so you can set the size, the color and the `stroke-width` from your stylesheet. diff --git a/docs/content/ui/components/card.mdx b/docs/content/ui/components/card.mdx index 201677aeb..5ed573a52 100644 --- a/docs/content/ui/components/card.mdx +++ b/docs/content/ui/components/card.mdx @@ -410,7 +410,7 @@ Change how solid a card looks. `card-borderless` drops the border, `card-dashed`
-
Add new
+
Add new
diff --git a/docs/content/ui/components/datagrid.mdx b/docs/content/ui/components/datagrid.mdx index ec9d365c4..7ce89a3d7 100644 --- a/docs/content/ui/components/datagrid.mdx +++ b/docs/content/ui/components/datagrid.mdx @@ -101,7 +101,7 @@ A value is a plain container, so it takes anything: text, [avatars](/ui/componen
Icon
-
Checked
+
Checked
Form control
diff --git a/docs/content/ui/layout/page-headers.mdx b/docs/content/ui/layout/page-headers.mdx index 2d9bf6082..441354c6c 100644 --- a/docs/content/ui/layout/page-headers.mdx +++ b/docs/content/ui/layout/page-headers.mdx @@ -46,14 +46,14 @@ Add an [avatar](/ui/components/avatar) and a `.page-subtitle` block with meta in
- + UI Designer at Tabler
- + 194 friends
-
Verified
+
Verified
diff --git a/preview/pages/all-elements.astro b/preview/pages/all-elements.astro index a7453cc51..e765d925d 100644 --- a/preview/pages/all-elements.astro +++ b/preview/pages/all-elements.astro @@ -797,23 +797,23 @@ function greetUser(name) { - + Home - + Active item - + Settings - + Profile - + Disabled item diff --git a/preview/pages/license.astro b/preview/pages/license.astro index ca5891655..279835a2a 100644 --- a/preview/pages/license.astro +++ b/preview/pages/license.astro @@ -63,21 +63,21 @@ const licenseHtml = `

Permissions

Limitations

Conditions

 diff --git a/preview/pages/tasks-list.astro b/preview/pages/tasks-list.astro index 00cb12423..9a16fb4c9 100644 --- a/preview/pages/tasks-list.astro +++ b/preview/pages/tasks-list.astro @@ -82,12 +82,12 @@ const selectedPeople = [5, 6, 2, 3].map((id) => requireIndex(peopleList, id - 1) {task.due_date ? ( - + {task.due_date} ) : task['due-date'] ? ( - + {task['due-date']} ) : ( diff --git a/shared/components/cards/Configuration.astro b/shared/components/cards/Configuration.astro index 482be4cba..51d774385 100644 --- a/shared/components/cards/Configuration.astro +++ b/shared/components/cards/Configuration.astro @@ -10,7 +10,7 @@ import CardTitle from '@ui/CardTitle.astro' Configuration - Edit configuration + Edit configuration diff --git a/shared/components/cards/GalleryPhoto.astro b/shared/components/cards/GalleryPhoto.astro index 8d7211d83..38a010123 100644 --- a/shared/components/cards/GalleryPhoto.astro +++ b/shared/components/cards/GalleryPhoto.astro @@ -42,11 +42,11 @@ const heartClass = (index > 2 && index < 9) || index === 10 ? 'icon-filled text- !hideLikes && (
- + {randomNumber(index, 300, 600)} - + {randomNumber(index, 20, 100)}
diff --git a/shared/components/cards/Invoices.astro b/shared/components/cards/Invoices.astro index 9026bbd65..12c077295 100644 --- a/shared/components/cards/Invoices.astro +++ b/shared/components/cards/Invoices.astro @@ -38,7 +38,7 @@ const countryNames = Object.fromEntries((countries as { code: string; name: stri - No. + No. Invoice Subject Client VAT No. diff --git a/shared/components/cards/MostVisitedPages.astro b/shared/components/cards/MostVisitedPages.astro index 9b136501a..d4758688c 100644 --- a/shared/components/cards/MostVisitedPages.astro +++ b/shared/components/cards/MostVisitedPages.astro @@ -27,7 +27,7 @@ import { formatNumber } from '@shared/lib/string-format' {url.uri} - + {formatNumber(url.visitors)} diff --git a/shared/components/cards/PricingCard.astro b/shared/components/cards/PricingCard.astro index dd75e9ccb..9616edd2e 100644 --- a/shared/components/cards/PricingCard.astro +++ b/shared/components/cards/PricingCard.astro @@ -36,7 +36,7 @@ const availableFeatures = features.split('') { featureNames.map((feature, i) => (
  • - {availableFeatures[i] === '1' ? : } + {availableFeatures[i] === '1' ? : } {feature}
    • )) diff --git a/shared/components/cards/SmallStats.astro b/shared/components/cards/SmallStats.astro index 176adae0f..57c0ae137 100644 --- a/shared/components/cards/SmallStats.astro +++ b/shared/components/cards/SmallStats.astro @@ -53,7 +53,7 @@ const avatarClass = [color ? `bg-${color}${lt ? '-lt' : ' text-white'}` : '', 'a
    {title ?? 1700} - {smallIcon && } + {smallIcon && } {descriptionValue && {descriptionValue}}
    diff --git a/shared/components/cards/Tasks.astro b/shared/components/cards/Tasks.astro index 64caec4c0..e93fcd025 100644 --- a/shared/components/cards/Tasks.astro +++ b/shared/components/cards/Tasks.astro @@ -28,7 +28,7 @@ import { formatLongDate } from '@shared/lib/date-format' - + {formatLongDate(randomDate(index))} @@ -39,7 +39,7 @@ import { formatLongDate } from '@shared/lib/date-format' - {randomNumber(index, 0, 12)} + {randomNumber(index, 0, 12)} diff --git a/shared/components/cards/UserInfo.astro b/shared/components/cards/UserInfo.astro index 4a2897b1a..d9372f874 100644 --- a/shared/components/cards/UserInfo.astro +++ b/shared/components/cards/UserInfo.astro @@ -13,27 +13,27 @@ const person = requireIndex(people, 24)
    Basic info
    - + Went to: {person.university}
    - + Worked at: {person.company}
    - + Lives in: {person.city}, {person.country}
    - + From: {person.country}
    - + Birth date: {person.birth_date}
    - + Time zone: {person.time_zone}
    diff --git a/shared/components/parts/Datagrid.astro b/shared/components/parts/Datagrid.astro index eebdd130d..1039b517a 100644 --- a/shared/components/parts/Datagrid.astro +++ b/shared/components/parts/Datagrid.astro @@ -35,7 +35,7 @@ const creator = requireIndex(people, 0) - + Checked diff --git a/shared/components/parts/Tasks.astro b/shared/components/parts/Tasks.astro index 0f05cbfb1..8ff2267ef 100644 --- a/shared/components/parts/Tasks.astro +++ b/shared/components/parts/Tasks.astro @@ -55,7 +55,7 @@ const data = tasksData as unknown as { columns: Column[] } {task.due_date && (
    - + {task.due_date}
    @@ -76,7 +76,7 @@ const data = tasksData as unknown as { columns: Column[] } {task.subtasks && (
    - + 1/{task.subtasks.length}
    @@ -84,13 +84,13 @@ const data = tasksData as unknown as { columns: Column[] } {task.comments && (
    - {task.comments} + {task.comments}
    )}
    - +
    @@ -102,12 +102,12 @@ const data = tasksData as unknown as { columns: Column[] }
    {subtask.done ? ( - + {subtask.name} ) : ( - + {subtask.name} )} diff --git a/shared/ui/DocsLink.astro b/shared/ui/DocsLink.astro index c92840f1f..59d9018df 100644 --- a/shared/ui/DocsLink.astro +++ b/shared/ui/DocsLink.astro @@ -17,5 +17,5 @@ const { path, text = 'Docs', class: className }: Props = Astro.props {text} - +