fix(docs): replace missing LucideIcon icon names in guides (#4827)

2026-11-12 13:38:32 +00:00 · 2026-09-09 08:20:42 +02:00
parent 58fd3ccd59
commit 75955ec47b
3 changed files with 60 additions and 60 deletions
@@ -18,10 +18,10 @@ Tags help people find icons by concept, synonym, context, or common wording.
 Tags should always be lowercase.

 :::: example
-::: do <LucideIcon :iconNode="mail" /> email
+::: do <LucideIcon name="mail" :iconNode="mail" /> email
 Lowercase tags **match the style** used across the icon library.
 :::
-::: dont <LucideIcon :iconNode="mail" /> Email
+::: dont <LucideIcon name="mail" :iconNode="mail" /> Email
 Capitalized tags create **inconsistent metadata** without improving search.
 :::
 ::::
@@ -31,10 +31,10 @@ Capitalized tags create **inconsistent metadata** without improving search.
 Use one clear word when it is enough. Use multi-word tags when the phrase is clearer.

 :::: example
-::: do <LucideIcon :iconNode="search" /> search
+::: do <LucideIcon name="search" :iconNode="search" /> search
 This is **short, common, and easy to find**.
 :::
-::: dont <LucideIcon :iconNode="search" /> searching through files & folders
+::: dont <LucideIcon name="search" :iconNode="search" /> searching through files & folders
 This reads like a **use case**, not a tag.
 :::
 ::::
@@ -44,10 +44,10 @@ This reads like a **use case**, not a tag.
 Some ideas are only clear as a phrase. But keep those phrases short.

 :::: example
-::: do <LucideIcon :iconNode="droplet" /> blood type
+::: do <LucideIcon name="droplet" :iconNode="droplet" /> blood type
 The phrase is **clearer** than either word on its own.
 :::
-::: dont <LucideIcon :iconNode="droplet" /> blood type medical label
+::: dont <LucideIcon name="droplet" :iconNode="droplet" /> blood type medical label
 This combines **several search concepts** into one long tag.
 :::
 ::::
@@ -57,10 +57,10 @@ This combines **several search concepts** into one long tag.
 Tags can include words people are likely to search for, even if they are not in the icon name.

 :::: example
-::: do <LucideIcon :iconNode="mail" /> email
+::: do <LucideIcon name="mail" :iconNode="mail" /> email
 This helps users find `mail` icons using a **common synonym**.
 :::
-::: dont <LucideIcon :iconNode="mail" /> electronic postal message delivery
+::: dont <LucideIcon name="mail" :iconNode="mail" /> electronic postal message delivery
 This is unlikely search wording and **adds noise**.
 :::
 ::::
@@ -70,10 +70,10 @@ This is unlikely search wording and **adds noise**.
 The icon name is already searchable. Tags should add other ways to find it.

 :::: example
-::: do <LucideIcon :iconNode="mailSearch" /> message filter
+::: do <LucideIcon name="mail-search" :iconNode="mailSearch" /> message filter
 This adds a **related concept** for `mail-search` without duplicating the name.
 :::
-::: dont <LucideIcon :iconNode="mailSearch" /> mail search
+::: dont <LucideIcon name="mail-search" :iconNode="mailSearch" /> mail search
 This **repeats the icon name** and does not improve discovery.
 :::
 ::::
@@ -83,10 +83,10 @@ This **repeats the icon name** and does not improve discovery.
 Tags should describe the icon, not say that it is an icon.

 :::: example
-::: do <LucideIcon :iconNode="calendar" /> event
+::: do <LucideIcon name="calendar" :iconNode="calendar" /> event
 This points to a **specific idea** users might search for.
 :::
-::: dont <LucideIcon :iconNode="calendar" /> icon
+::: dont <LucideIcon name="calendar" :iconNode="calendar" /> icon
 **Every entry is an icon**, so this tag does not help anyone find the right one.
 :::
 ::::
@@ -96,10 +96,10 @@ This points to a **specific idea** users might search for.
 Do not add loose terms just to make an icon appear in more searches.

 :::: example
-::: do <LucideIcon :iconNode="hospital" /> emergency room
+::: do <LucideIcon name="hospital" :iconNode="hospital" /> emergency room
 This is **relevant** for an icon that marks emergency room locations.
 :::
-::: dont <LucideIcon :iconNode="hospital" /> doctor nurse pharmacy
+::: dont <LucideIcon name="hospital" :iconNode="hospital" /> doctor nurse pharmacy
 These terms may be **nearby concepts**, but they do not all describe the same icon.
 :::
 ::::
@@ -109,10 +109,10 @@ These terms may be **nearby concepts**, but they do not all describe the same ic
 Related icons can share family terms, but variant tags should describe what is different.

 :::: example
-::: do <LucideIcon :iconNode="batteryLow" /> depleted
+::: do <LucideIcon name="battery-low" :iconNode="batteryLow" /> depleted
 This distinguishes `battery-low` from **other battery icons**.
 :::
-::: dont <LucideIcon :iconNode="batteryLow" /> charged
+::: dont <LucideIcon name="battery-low" :iconNode="batteryLow" /> charged
 This describes `battery-full` better than `battery-low`.
 :::
 ::::
@@ -122,10 +122,10 @@ This describes `battery-full` better than `battery-low`.
 Check similar icons before adding new tags. Reusing existing terms keeps search predictable.

 :::: example
-::: do <LucideIcon :iconNode="type" /> typography
+::: do <LucideIcon name="type" :iconNode="type" /> typography
 This matches existing text-formatting icons and keeps **related icons** together in search.
 :::
-::: dont <LucideIcon :iconNode="type" /> fontography
+::: dont <LucideIcon name="type" :iconNode="type" /> fontography
 Inventing a new term makes the icon harder to find and less consistent with related metadata.
 :::
 ::::
@@ -16,10 +16,10 @@ This guide shows how to write clear use cases for Lucide icons.
 Describe what the interface tells the user. Do not write from the contributor's point of view.

 :::: example
-::: do <LucideIcon :iconNode="wifiOff" /> Indicating a device is offline or unreachable
+::: do <LucideIcon name="wifi-off" :iconNode="wifiOff" /> Indicating a device is offline or unreachable
 This describes the **role the icon plays in an interface**.
 :::
-::: dont <LucideIcon :iconNode="wifiOff" /> I need an icon for my offline device screen
+::: dont <LucideIcon name="wifi-off" :iconNode="wifiOff" /> I need an icon for my offline device screen
 This explains the **contributor's situation**, not the icon's purpose.
 :::
 ::::
@@ -29,10 +29,10 @@ This explains the **contributor's situation**, not the icon's purpose.
 A use case should explain what the icon means in context. Do not repeat the icon name or only describe the drawing.

 :::: example
-::: do <LucideIcon :iconNode="microchip" /> Representing processors, chips, or embedded hardware
+::: do <LucideIcon name="microchip" :iconNode="microchip" /> Representing processors, chips, or embedded hardware
 This explains `microchip` **without repeating the name**.
 :::
-::: dont <LucideIcon :iconNode="microchip" /> it's a microchip icon
+::: dont <LucideIcon name="microchip" :iconNode="microchip" /> it's a microchip icon
 This **duplicates the icon name** and does not explain where the icon would be used.
 :::
 ::::
@@ -42,10 +42,10 @@ This **duplicates the icon name** and does not explain where the icon would be u
 Some icons have broad meanings. Add context when it makes the use case clearer.

 :::: example
-::: do <LucideIcon :iconNode="heading2" /> Applying a level-2 heading in text editors
+::: do <LucideIcon name="heading-2" :iconNode="heading2" /> Applying a level-2 heading in text editors
 The phrase explains both the **action and the product area**.
 :::
-::: dont <LucideIcon :iconNode="heading2" /> Applying a heading
+::: dont <LucideIcon name="heading-2" :iconNode="heading2" /> Applying a heading
 This is less useful because it **omits the level and context**.
 :::
 ::::
@@ -55,10 +55,10 @@ This is less useful because it **omits the level and context**.
 Each entry should cover one clear idea. Split different meanings into separate entries.

 :::: example
-::: do <LucideIcon :iconNode="squareParking" /> Marking parking locations on maps
+::: do <LucideIcon name="square-parking" :iconNode="squareParking" /> Marking parking locations on maps
 This is **short, clear, and focused** on one interface function.
 :::
-::: dont <LucideIcon :iconNode="squareParking" /> Marking parking, transport, maps, cars, garages, and places
+::: dont <LucideIcon name="square-parking" :iconNode="squareParking" /> Marking parking, transport, maps, cars, garages, and places
 This reads like a **tag list** and **mixes several ideas**.
 :::
 ::::
@@ -68,10 +68,10 @@ This reads like a **tag list** and **mixes several ideas**.
 For related icons, describe what makes each variant different.

 :::: example
-::: do <LucideIcon :iconNode="batteryLow" /> Indicating a low battery charge level
+::: do <LucideIcon name="battery-low" :iconNode="batteryLow" /> Indicating a low battery charge level
 This is specific to `battery-low` and **sets it apart** from other battery icons.
 :::
-::: dont <LucideIcon :iconNode="batteryLow" /> Representing battery status
+::: dont <LucideIcon name="battery-low" :iconNode="batteryLow" /> Representing battery status
 This is **too generic** and could apply to **every battery variant**.
 :::
 ::::
@@ -81,10 +81,10 @@ This is **too generic** and could apply to **every battery variant**.
 Use cases should make sense after the pull request is merged.

 :::: example
-::: do <LucideIcon :iconNode="handshake" /> Signifying a deal, agreement, or partnership
+::: do <LucideIcon name="handshake" :iconNode="handshake" /> Signifying a deal, agreement, or partnership
 This keeps the **useful meaning** without depending on **outside context**.
 :::
-::: dont <LucideIcon :iconNode="handshake" /> Same as above in #1234
+::: dont <LucideIcon name="handshake" :iconNode="handshake" /> Same as above in #1234
 This **depends on a discussion** readers **may never see**.
 :::
 ::::
@@ -94,10 +94,10 @@ This **depends on a discussion** readers **may never see**.
 Use cases should usually be 4 to 12 words. Prefer a short phrase over a long explanation.

 :::: example
-::: do <LucideIcon :iconNode="search" /> Searching files by name or content
+::: do <LucideIcon name="search" :iconNode="search" /> Searching files by name or content
 This is **short enough** to scan and **specific enough** to understand.
 :::
-::: dont <LucideIcon :iconNode="search" /> This icon can be used when users want to search through all of their files and folders to find something
+::: dont <LucideIcon name="search" :iconNode="search" /> This icon can be used when users want to search through all of their files and folders to find something
 This is **too long** and reads like **product copy instead of metadata**.
 :::
 ::::
@@ -107,10 +107,10 @@ This is **too long** and reads like **product copy instead of metadata**.
 Use cases are metadata phrases, not full sentences.

 :::: example
-::: do <LucideIcon :iconNode="creditCard" /> Confirming a successful payment
+::: do <LucideIcon name="credit-card" :iconNode="creditCard" /> Confirming a successful payment
 This matches the **phrase style** used across icon metadata.
 :::
-::: dont <LucideIcon :iconNode="creditCard" /> Confirming a successful payment.
+::: dont <LucideIcon name="credit-card" :iconNode="creditCard" /> Confirming a successful payment.
 The period adds **unnecessary punctuation** and makes entries inconsistent.
 :::
 ::::
@@ -120,10 +120,10 @@ The period adds **unnecessary punctuation** and makes entries inconsistent.
 Use plain text only. Formatting belongs in documentation, not metadata values.

 :::: example
-::: do <LucideIcon :iconNode="triangleAlert" /> Warning users about a destructive action
+::: do <LucideIcon name="triangle-alert" :iconNode="triangleAlert" /> Warning users about a destructive action
 This works in search, generated pages, and other places that use metadata.
 :::
-::: dont <LucideIcon :iconNode="triangleAlert" /> <span>**Warning** users about a destructive action ⚠️</span>
+::: dont <LucideIcon name="triangle-alert" :iconNode="triangleAlert" /> <span>**Warning** users about a destructive action ⚠️</span>
 Markdown and emoji can **show up in generated UI** and make metadata **harder to reuse**.
 :::
 ::::
@@ -133,10 +133,10 @@ Markdown and emoji can **show up in generated UI** and make metadata **harder to
 Use cases should describe meaning, not how the SVG was made.

 :::: example
-::: do <LucideIcon :iconNode="crop" /> Representing cropped or trimmed content
+::: do <LucideIcon name="crop" :iconNode="crop" /> Representing cropped or trimmed content
 This explains the icon's **interface meaning**.
 :::
-::: dont <LucideIcon :iconNode="crop" /> Showing a rectangle with two path cuts and adjusted Bezier handles
+::: dont <LucideIcon name="crop" :iconNode="crop" /> Showing a rectangle with two path cuts and adjusted Bezier handles
 This describes **construction details** that do not help people find or understand the icon.
 :::
 ::::
@@ -82,19 +82,19 @@ Icon names **must** use American English, not local variants.
 Icon names **must** describe what the icon shows, not how someone might use it.

 :::: example
-::: do <LucideIcon :iconNode="save" /> `floppy-disk`
+::: do <LucideIcon name="save" :iconNode="save" /> `floppy-disk`
 The icon **shows** a floppy disk.
 :::
-::: dont <LucideIcon :iconNode="save" /> `save`
+::: dont <LucideIcon name="save" :iconNode="save" /> `save`
 Save is a use case.
 :::
 ::::

 :::: example
-::: do <LucideIcon :iconNode="ban" /> `circle-slash`
+::: do <LucideIcon name="ban" :iconNode="ban" /> `circle-slash`
 The icon **shows** a circle with a slash across it.
 :::
-::: dont <LucideIcon :iconNode="ban" /> `ban`
+::: dont <LucideIcon name="ban" :iconNode="ban" /> `ban`
 Ban is an action.
 :::
 ::::
@@ -110,10 +110,10 @@ Icons that belong to the same group **must** use the `<group>-<variant>` naming
 The group name comes first. The variant comes after it.

 :::: example
-::: do <span><LucideIcon :iconNode="badgePlus" /> + <LucideIcon :iconNode="badgeCheck" /></span> <span>`badge-plus` & `badge-check`</span>
+::: do <span><LucideIcon name="badge-plus" :iconNode="badgePlus" /> + <LucideIcon name="badge-check" :iconNode="badgeCheck" /></span> <span>`badge-plus` & `badge-check`</span>
 `badge` is the group.
 :::
-::: dont <span><LucideIcon :iconNode="badgePlus" /> + <LucideIcon :iconNode="badgeCheck" /></span> <span>`plus-badge` & `check-badge`</span>
+::: dont <span><LucideIcon name="badge-plus" :iconNode="badgePlus" /> + <LucideIcon name="badge-check" :iconNode="badgeCheck" /></span> <span>`plus-badge` & `check-badge`</span>
 `plus` and `check` are not the group.
 :::
 ::::
@@ -123,10 +123,10 @@ The group name comes first. The variant comes after it.
 Alternate versions of an icon **must** be named for what makes them visually different. Do **not** use numbers just to separate one version from another.

 :::: example
-::: do <LucideIcon :iconNode="sendHorizontal" /> `send-horizontal`
+::: do <LucideIcon name="send-horizontal" :iconNode="sendHorizontal" /> `send-horizontal`
 The icon depicts a horizontal "send" symbol.
 :::
-::: dont <LucideIcon :iconNode="sendHorizontal" /> <span>`send-2` or `send-alt`</span>
+::: dont <LucideIcon name="send-horizontal" :iconNode="sendHorizontal" /> <span>`send-2` or `send-alt`</span>
 "send number 2" and "alternative send" are not clear names.
 :::
 ::::
@@ -136,19 +136,19 @@ The icon depicts a horizontal "send" symbol.
 Icon names **must not** include numbers unless the icon shows the number.

 :::: example
-::: do <LucideIcon :iconNode="arrowDown01" /> `arrow-down-0-1`
+::: do <LucideIcon name="arrow-down-0-1" :iconNode="arrowDown01" /> `arrow-down-0-1`
 The arrow points from 0 to 1.
 :::
-::: dont <LucideIcon :iconNode="sendHorizontal" /> `send-2`
+::: dont <LucideIcon name="send-horizontal" :iconNode="sendHorizontal" /> `send-2`
 The icon does not show the number 2.
 :::
 ::::

 :::: example
-::: do <LucideIcon :iconNode="clock3" /> `clock-3`
+::: do <LucideIcon name="clock-3" :iconNode="clock3" /> `clock-3`
 The hands point to 3 o'clock.
 :::
-::: dont <LucideIcon :iconNode="userRound" /> `user-3`
+::: dont <LucideIcon name="user-round" :iconNode="userRound" /> `user-3`
 The icon does not show the number 3.
 :::
 ::::
@@ -162,10 +162,10 @@ When an icon shows multiple elements of different sizes, order their names from
 For an icon containing a circle and a person:

 :::: example
-::: do <LucideIcon :iconNode="moonStar" /> `moon-star`
+::: do <LucideIcon name="moon-star" :iconNode="moonStar" /> `moon-star`
 The `moon` is larger than the `star`.
 :::
-::: dont <LucideIcon :iconNode="circleUser" /> `person-circle`
+::: dont <LucideIcon name="circle-user" :iconNode="circleUser" /> `person-circle`
 The `person` is **not** larger than the `circle`.
 :::
 ::::
@@ -179,19 +179,19 @@ If elements overlap, name them from front to back.
 If they do not overlap, name them in English reading order: top to bottom, then left to right.

 :::: example
-::: do <LucideIcon :iconNode="pencilRuler" /> `pencil-ruler`
+::: do <LucideIcon name="pencil-ruler" :iconNode="pencilRuler" /> `pencil-ruler`
 The `pencil` is **in front** of the `ruler`, so it comes first.
 :::
-::: do <LucideIcon :iconNode="rulerDimensionLine" /> `ruler-dimension-line`
+::: do <LucideIcon name="ruler-dimension-line" :iconNode="rulerDimensionLine" /> `ruler-dimension-line`
 The ruler is below the dimension line, but it is **larger**, so it comes first.
 :::
 ::::

 :::: example
-::: do <LucideIcon :iconNode="sunSnow" /> `sun-snow`
+::: do <LucideIcon name="sun-snow" :iconNode="sunSnow" /> `sun-snow`
 The `sun` is **left of** the `snowflake`, so it comes first.
 :::
-::: dont <LucideIcon :iconNode="pencilRulerHorizontal" /> `ruler-pencil`
+::: dont <LucideIcon name="pencil-ruler-horizontal" :iconNode="pencilRulerHorizontal" /> `ruler-pencil`
 The `ruler` is **below** the `pencil`, so `pencil-ruler` is the correct name.
 :::
 ::::
@@ -201,10 +201,10 @@ The `ruler` is **below** the `pencil`, so `pencil-ruler` is the correct name.
 Modifiers **must** come after the element they describe: `<element>-<modifier>`.

 :::: example
-::: do <LucideIcon :iconNode="heartCrack" /> `heart-broken`
+::: do <LucideIcon name="heart-crack" :iconNode="heartCrack" /> `heart-broken`
 The icon shows a heart that is **cracked**.
 :::
-::: dont <LucideIcon :iconNode="boneFracture" /> `broken-bone`
+::: dont <LucideIcon name="bone-fracture" :iconNode="boneFracture" /> `broken-bone`
 The icon shows a bone that is **broken**, so name it `bone-broken`.
 :::
 ::::
@@ -212,12 +212,12 @@ The icon shows a bone that is **broken**, so name it `bone-broken`.
 When an icon has multiple modified elements, each modifier **must** follow the element it describes.

 :::: example
-::: do <LucideIcon :iconNode="circleFadingArrowUp" /> `circle-fading-arrow-up`
+::: do <LucideIcon name="circle-fading-arrow-up" :iconNode="circleFadingArrowUp" /> `circle-fading-arrow-up`
 The icon shows a **fading** circle with an arrow pointing **up** inside it.

 `circle` comes first because it is larger than `arrow`. `fading` follows `circle` because it modifies the circle. `up` follows `arrow` because it modifies the arrow.
 :::
-::: dont <LucideIcon :iconNode="notepadTextDashed" /> `notepad-text-dashed`
+::: dont <LucideIcon name="notepad-text-dashed" :iconNode="notepadTextDashed" /> `notepad-text-dashed`
 This icon shows a dashed notepad with text inside, so name it `notepad-dashed-text`.

 `notepad` comes first because it is larger than `text`. `dashed` follows `notepad` because it modifies the notepad. `text` follows both because `dashed` does not modify `text`.