Compare commits

...
13 Commits
Author SHA1 Message Date
gridalchemygithub-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>Eric Fennis
b826f0c527 feat(icons): added grid-3x3-off icon (#5071)
* feat(icons): added grid-3x3-off icon

* chore(icons): add suggested tags to `grid-3x3-off`

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* fix(icons): use standard off geometry for `grid-3x3-off`

* chore(icons): use metadata markers for `grid-3x3-off`

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
2026-11-05 23:02:56 +01:00
Eric FennisandKarsa 558bdd83b5 feat(icons): added user-exclamation-point, user-round-exclamation-point icons (#5144)
* Added icons/user-round-exclamation-point.svg

* Added icons/user-round-exclamation-point.json

* Updated metadata

* Add user-exclamation-point

* Adds suggestions

* Update icons/user-round-exclamation-point.svg

Co-authored-by: Karsa <karsa@karsa.org>

* Modify user-exclamation-point icon SVG paths

---------

Co-authored-by: Karsa <karsa@karsa.org>
2026-11-05 20:32:56 +01:00
Jamie Lawgithub-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>Eric Fennis
a805955781 feat(icons): added moped icon (#3373)
* Add `dirt-bike` icon

* Fix JSON formatting

* Fix JSON formatting again

* Rounded the handlebars

* Rename icon and add metadata

* Update icons/moped.json

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

---------

Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
2026-11-05 18:43:20 +01:00
tlq5landEric Fennis ee8e10d746 fix(lucide-react-native): emit runtime files for alias icon subpaths (#5055)
closes #5043

Agent: claude

Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
2026-11-05 14:11:40 +01:00
DominikCursorgithub-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>Eric FennisKarsa
2c2ee80687 feat(icons): added square-dashed-search icon (#5119)
* Add the square-dashed-search lab icon.

Co-authored-by: Cursor <cursoragent@cursor.com>

* feat(lab): added zoom selection use case to `square-dashed-search`

Co-authored-by: Cursor <cursoragent@cursor.com>

* feat(icons): delegated `square-dashed-search` icon from lab

Co-authored-by: Cursor <cursoragent@cursor.com>

* Update icons/square-dashed-search.json

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* Update icons/square-dashed-search.json

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* Adjust metadata

* Apply feedback

* Remove text category

* Update icons/square-dashed-search.svg

---------

Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
Co-authored-by: Karsa <contact@karsa.org>
2026-11-05 10:24:38 +01:00
Eric FennisandClaude 1c93e0a476 fix(docs): fix vercel.json redirects that land on 404 (#5157)
- Redirect /docs/lucide-*, /guide/lucide-* and /guide/packages/lucide-*/ to
  the current /guide/<pkg> pages (vue-next -> vue)
- Redirect old /guide/basics/*, /guide/advanced/* and /guide/design/* pages
- Redirect graduated lab icons carton-off and briefcase-plus to core
- Remove the /docs/:slug(lucide-?.*) rule that produced 404 destinations

Fixes LUCIDE-15


Claude-Session: https://claude.ai/code/session_01G9u8FetMRtXGCVFrfg619a

Co-authored-by: Claude <noreply@anthropic.com>
2026-11-05 07:49:42 +01:00
91a1359b5e feat(icons): added circle-fading-check icon (#4089)
* Added icons/circle-fading-check.svg

* Added icons/circle-fading-check.json

* Refactor SVG paths in circle-fading-check.svg

* Add empty use-cases array to circle-fading-check.json

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

* Update metadata

---------

Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
2026-11-04 16:03:14 +01:00
Ilya VredandEric 90e8041a35 feat(icons): added opacity icon (#4222)
* Added icons/opacity.svg

* Added icons/opacity.json

* Updated icons/opacity.svg

* Updated icons/opacity.json

* Adjust usecases

---------

Co-authored-by: Eric <eric.fennis@gmail.com>
2026-11-04 15:56:22 +01:00
Eric FennisandKarsa 3898742b6a feat(icons): added package-question-mark icon (#5155)
* Add metadata

* Add more tags to `package.json`

* Update icons/package-question-mark.json

Co-authored-by: Karsa <contact@karsa.org>

---------

Co-authored-by: Karsa <contact@karsa.org>
2026-11-04 15:29:36 +01:00
Eric FennisandKarsa a4a0e20ff5 feat(icons): added package-pen icon (#5154)
* Add package pen icon

* Update icons/package-pen.json

Co-authored-by: Karsa <contact@karsa.org>

* update metadata

---------

Co-authored-by: Karsa <contact@karsa.org>
2026-11-04 15:26:37 +01:00
Eric Fennis 1980e3d59b chore(icons): Renamed *-warning and *-alert to *-exclamation-point (#5143)
* Rename icons

* Update other file

* Remove deprecation booleans
2026-11-03 15:49:26 +01:00
aa0b77386c feat(icons): added mango icon (#4902)
* feat: add mango icon

* fix: adjust mango icon leaf and body shape

* refactor: switch to rrod497's mango design, expand metadata

* Update use cases for mango in icons/mango.json

Removed outdated use cases and added updated ones for mango.

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

* Apply suggestion from @karsa-mistmere

Co-authored-by: Karsa <contact@karsa.org>

* Update mango.json

---------

Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Karsa <contact@karsa.org>
2026-11-03 14:16:15 +01:00
Bin 7bb15b80a3 fix(docs): keep sponsor tiers within content width (#5149) 2026-11-03 09:41:31 +01:00
61 changed files with 635 additions and 36 deletions
@@ -56,7 +56,7 @@ When checking or adding a `$group:` marker:
- A marker must be exactly `"$group:"` followed by the name of an existing file in `groups/`, without the `.json` extension, in lowercase kebab-case.
- `$group:` is allowed **only** inside `tags`. It is not valid in `categories` or `contributors`.
- Groups are named after the variant suffix: `file-plus` uses `$group:plus`, `file-question-mark` uses `$group:question-mark`. Suffixes with the same meaning share a group: `mail-warning` uses `$group:exclamation-mark`, and every currency suffix uses `$group:currency`.
- Groups are named after the variant suffix: `file-plus` uses `$group:plus`, `file-question-mark` uses `$group:question-mark`. Suffixes with the same meaning share a group: `mail-exclamation-point` uses `$group:exclamation-mark`, and every currency suffix uses `$group:currency`.
- The same suffix can mean different things in different contexts — `-off` means "disabled" on `wifi-off` but "allergy free" on `wheat-off` — so only use the group when the icon carries the group's meaning, and keep context-specific tags as literals.
- Do not repeat a tag a group already provides, and do not use the same group twice in one array.
- Conventional order: the `$extends:` base icon first, then `$group:` markers, then the icon's own literal tags.
+1 -1
View File
@@ -2,5 +2,5 @@
"$schema": "../category.schema.json",
"title": "Notifications",
"description": "Icons for alerts, status updates, reminders, approvals, and attention states.",
"icon": "triangle-alert"
"icon": "triangle-exclamation-point"
}
@@ -6,7 +6,7 @@ import Calendar from '../../../data/iconDetails/calendar.ts';
import Clock from '../../../data/iconDetails/clock.ts';
import Bug from '../../../data/iconDetails/bug.ts';
import Rocket from '../../../data/iconDetails/rocket.ts';
import TriangleAlert from '../../../data/iconDetails/triangle-alert.ts';
import TriangleExclamationPoint from '../../../data/iconDetails/triangle-exclamation-point.ts';
import PartyPopper from '../../../data/iconDetails/party-popper.ts';
import Scissors from '../../../data/iconDetails/scissors.ts';
import Copy from '../../../data/iconDetails/copy.ts';
@@ -41,7 +41,7 @@ const CalendarIcon = createLucideIcon('calendar', Calendar.iconNode);
const ClockIcon = createLucideIcon('clock', Clock.iconNode);
const BugIcon = createLucideIcon('bug', Bug.iconNode);
const RocketIcon = createLucideIcon('rocket', Rocket.iconNode);
const AlertTriangleIcon = createLucideIcon('alert-triangle', TriangleAlert.iconNode);
const TriangleExclamationPointIcon = createLucideIcon('triangle-exclamation-point', TriangleExclamationPoint.iconNode);
const ScissorsIcon = createLucideIcon('scissors', Scissors.iconNode);
const CopyIcon = createLucideIcon('copy', Copy.iconNode);
const SaveIcon = createLucideIcon('save', Save.iconNode);
@@ -128,7 +128,7 @@ const prettyName = props.name
>
<div class="placeholder"></div>
<div class="badge badge-red">
<AlertTriangleIcon :size="20" />
<TriangleExclamationPointIcon :size="20" />
Alert
</div>
</div>
@@ -117,8 +117,6 @@ function scrollTrack(direction: 1 | -1) {
.tiers {
padding-top: 96px;
padding-bottom: 48px;
/* The track bleeds to the right edge of the viewport. */
overflow-x: clip;
}
.tiers-header {
@@ -165,7 +163,6 @@ function scrollTrack(direction: 1 | -1) {
.track-wrapper {
position: relative;
margin-right: min(-24px, calc((1152px - 100vw) / 2));
}
.track {
@@ -178,12 +175,16 @@ function scrollTrack(direction: 1 | -1) {
padding-bottom: 12px;
padding-right: 24px;
scroll-padding-right: 24px;
scrollbar-width: thin;
scrollbar-width: none;
scroll-snap-align: center;
scroll-padding-left: 24px;
scroll-padding-right: 24px;
}
.track::-webkit-scrollbar {
display: none;
}
.track:focus-visible {
outline: 2px solid var(--vp-c-brand-1);
outline-offset: 4px;
@@ -3,7 +3,7 @@ description: Learn the best practices for writing use cases for Lucide icons.
---
<script setup>
import { batteryLow, creditCard, crop, handshake, heading2, microchip, search, squareLetterP, triangleAlert, wifiOff } from '~/.vitepress/data/iconNodes';
import { batteryLow, creditCard, crop, handshake, heading2, microchip, search, squareLetterP, triangleExclamationPoint, wifiOff } from '~/.vitepress/data/iconNodes';
import LucideIcon from '~/.vitepress/theme/components/base/LucideIcon.vue';
</script>
@@ -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 name="triangle-alert" :iconNode="triangleAlert" /> Warning users about a destructive action
::: do <LucideIcon name="triangle-exclamation-point" :iconNode="triangleExclamationPoint" /> Warning users about a destructive action
This works in search, generated pages, and other places that use metadata.
:::
::: dont <LucideIcon name="triangle-alert" :iconNode="triangleAlert" /> <span>**Warning** users about a destructive action ⚠️</span>
::: dont <LucideIcon name="triangle-exclamation-point" :iconNode="triangleExclamationPoint" /> <span>**Warning** users about a destructive action ⚠️</span>
Markdown and emoji can **show up in generated UI** and make metadata **harder to reuse**.
:::
::::
+1 -1
View File
@@ -31,7 +31,7 @@ You can then reference the registered icons by name:
```html [app.html]
<svg lucideIcon="square-check"></svg>
<svg lucideIcon="circle-alert"></svg>
<svg lucideIcon="circle-exclamation-point"></svg>
```
## How names are resolved
+62 -7
View File
@@ -12,8 +12,68 @@
"permanent": true
},
{
"source": "/docs/:slug(lucide-?.*)",
"destination": "/guide/:slug",
"source": "/docs/lucide-vue-next",
"destination": "/guide/vue",
"permanent": true
},
{
"source": "/guide/packages/lucide-vue-next",
"destination": "/guide/vue",
"permanent": true
},
{
"source": "/guide/vue-next",
"destination": "/guide/vue",
"permanent": true
},
{
"source": "/docs/lucide",
"destination": "/guide/lucide",
"permanent": true
},
{
"source": "/docs/lucide-:pkg",
"destination": "/guide/:pkg",
"permanent": true
},
{
"source": "/guide/lucide-:pkg",
"destination": "/guide/:pkg",
"permanent": true
},
{
"source": "/guide/packages/lucide-:pkg/",
"destination": "/guide/:pkg",
"permanent": true
},
{
"source": "/guide/advanced/accessibility",
"destination": "/how-to/accessibility",
"permanent": true
},
{
"source": "/guide/basics/:slug",
"destination": "/guide/react/basics/:slug",
"permanent": true
},
{
"source": "/guide/advanced/:slug",
"destination": "/guide/react/advanced/:slug",
"permanent": true
},
{
"source": "/guide/design/figma-guide",
"destination": "/contribute/icons/figma-guide",
"permanent": true
},
{
"source": "/guide/design/:slug(icon-design-guide|icon-properties)",
"destination": "/contribute/icons/design-principles",
"permanent": true
},
{
"source": "/icons/lab/:name(carton-off|briefcase-plus)",
"destination": "/icons/:name",
"permanent": true
},
{
@@ -47,11 +107,6 @@
"destination": "/how-to/accessibility",
"permanent": true
},
{
"source": "/guide/advanced/accessibility",
"destination": "/how-to/accessibility",
"permanent": true
},
{
"source": "/guide/advanced",
"destination": "/guide/react/advanced",
+3 -1
View File
@@ -20,6 +20,8 @@
"investigate",
"magnifying glass",
"lens",
"zoom"
"zoom",
"inspection",
"visual search"
]
}
@@ -15,5 +15,10 @@
"categories": [
"account",
"social"
],
"aliases": [
{
"name": "badge-alert"
}
]
}

Before

Width:  |  Height:  |  Size: 471 B

After

Width:  |  Height:  |  Size: 471 B

@@ -12,5 +12,10 @@
],
"categories": [
"$extends:battery"
],
"aliases": [
{
"name": "battery-warning"
}
]
}

Before

Width:  |  Height:  |  Size: 393 B

After

Width:  |  Height:  |  Size: 393 B

@@ -15,5 +15,10 @@
],
"categories": [
"$extends:book"
],
"aliases": [
{
"name": "book-alert"
}
]
}

Before

Width:  |  Height:  |  Size: 359 B

After

Width:  |  Height:  |  Size: 359 B

@@ -16,6 +16,9 @@
"name": "alert-circle",
"deprecationReason": "alias.name",
"deprecated": true
},
{
"name": "circle-alert"
}
]
}

Before

Width:  |  Height:  |  Size: 332 B

After

Width:  |  Height:  |  Size: 332 B

+23
View File
@@ -0,0 +1,23 @@
{
"$schema": "../icon.schema.json",
"contributors": [
"n2duc"
],
"use-cases": [
"Indicating a submission or payment that is still being verified",
"Showing a deployment, upload, or backup that is finishing up",
"Marking a task as partially completed or awaiting final approval",
"Displaying a step in a progress tracker that is in progress"
],
"tags": [
"$group:check",
"pending",
"progress",
"processing",
"verifying",
"loading"
],
"categories": [
"notifications"
]
}
+18
View File
@@ -0,0 +1,18 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M12 2a10 10 0 017.38 16.75" />
<path d="m16 9-5.5 5.5L8 12" />
<path d="M2.5 8.875a10 10 0 00-.5 3" />
<path d="M2.83 16a10 10 0 002.43 3.4" />
<path d="M4.636 5.235a10 10 0 01.891-.857" />
<path d="M8.644 21.42a10 10 0 007.631-.38" />
</svg>

After

Width:  |  Height:  |  Size: 465 B

@@ -13,5 +13,10 @@
],
"categories": [
"$extends:clock"
],
"aliases": [
{
"name": "clock-alert"
}
]
}

Before

Width:  |  Height:  |  Size: 332 B

After

Width:  |  Height:  |  Size: 332 B

@@ -19,5 +19,10 @@
"development",
"notifications",
"weather"
],
"aliases": [
{
"name": "cloud-alert"
}
]
}

Before

Width:  |  Height:  |  Size: 331 B

After

Width:  |  Height:  |  Size: 331 B

+27
View File
@@ -0,0 +1,27 @@
{
"$schema": "../icon.schema.json",
"contributors": [
"$extends:grid-3x3",
"gridalchemy"
],
"use-cases": [
"Hiding grid lines on a canvas or artboard",
"Indicating that snap to grid is turned off",
"Hiding the cell grid in spreadsheets"
],
"tags": [
"$extends:grid-3x3",
"$group:off",
"guides",
"snap",
"canvas",
"spreadsheet",
"cells",
"data table",
"diagram",
"overlay"
],
"categories": [
"$extends:grid-3x3"
]
}
+21
View File
@@ -0,0 +1,21 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M15 9.344V3" />
<path d="m2 2 20 20" />
<path d="M20.414 20.414A2 2 0 0119 21H5a2 2 0 01-2-2V5a2 2 0 01.586-1.414" />
<path d="M20.656 15H21" />
<path d="M21 9h-6.344" />
<path d="M3 15h12v6" />
<path d="M3 9h6v12" />
<path d="M8.656 3H19a2 2 0 012 2v10.343" />
<path d="M9 3v.344" />
</svg>

After

Width:  |  Height:  |  Size: 520 B

@@ -13,5 +13,13 @@
"categories": [
"mail",
"notifications"
],
"aliases": [
{
"name": "mail-warning"
},
{
"name": "mail-alert"
}
]
}

Before

Width:  |  Height:  |  Size: 393 B

After

Width:  |  Height:  |  Size: 393 B

+30
View File
@@ -0,0 +1,30 @@
{
"$schema": "../icon.schema.json",
"contributors": [
"Prsenapati09",
"rrod497"
],
"use-cases": [
"Representing tropical fruit in food and grocery apps",
"Indicating produce sections in shopping interfaces",
"Labeling tropical fruit filters in recipe and nutrition apps",
"Highlighting seasonal fruit in marketplaces"
],
"tags": [
"fruit",
"food",
"tropical",
"summer",
"exotic",
"healthy",
"ripe",
"yellow",
"juice",
"smoothie",
"snack",
"produce"
],
"categories": [
"food-beverage"
]
}
+14
View File
@@ -0,0 +1,14 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m17 6 3-3" />
<path d="M7 22a4 4 0 01-2.62-7.023A2 2 0 005 13.383V10a8 8 0 1116 0A12 12 0 019 22z" />
</svg>

After

Width:  |  Height:  |  Size: 323 B

@@ -17,5 +17,13 @@
"categories": [
"$extends:message-circle",
"notifications"
],
"aliases": [
{
"name": "message-circle-warning"
},
{
"name": "message-circle-alert"
}
]
}

Before

Width:  |  Height:  |  Size: 396 B

After

Width:  |  Height:  |  Size: 396 B

@@ -16,5 +16,13 @@
"categories": [
"$extends:message-square",
"notifications"
],
"aliases": [
{
"name": "message-square-warning"
},
{
"name": "message-square-alert"
}
]
}

Before

Width:  |  Height:  |  Size: 388 B

After

Width:  |  Height:  |  Size: 388 B

+38
View File
@@ -0,0 +1,38 @@
{
"$schema": "../icon.schema.json",
"contributors": [
"jamiemlaw",
"jguddas"
],
"use-cases": [
"Picking a transport type in journey planning or racing apps",
"Highlighting a delivery driver on a map when they ride a motorbike"
],
"tags": [
"scooter",
"two-wheeler",
"commute",
"urban",
"city",
"courier",
"motorbike",
"moto",
"motorcycle",
"transport",
"vehicle",
"drive",
"ride",
"race",
"racing",
"trip",
"journey",
"delivery",
"off-road",
"dirt bike",
"trail",
"enduro"
],
"categories": [
"transportation"
]
}
+17
View File
@@ -0,0 +1,17 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m18.16 14.12-2.927-8.447A1 1 0 0 0 14.288 5H13" />
<path d="M19 10a7 7 0 0 0-6.928 6" />
<path d="M2 10h5.5a3 3 0 0 1 2.747 1.795l1.669 3.803A1 1 0 0 1 11.01 17H8" />
<circle cx="19" cy="17" r="3" />
<circle cx="5" cy="17" r="3" />
</svg>

After

Width:  |  Height:  |  Size: 459 B

@@ -18,6 +18,9 @@
"name": "alert-octagon",
"deprecationReason": "alias.name",
"deprecated": true
},
{
"name": "octagon-alert"
}
]
}

Before

Width:  |  Height:  |  Size: 510 B

After

Width:  |  Height:  |  Size: 510 B

+32
View File
@@ -0,0 +1,32 @@
{
"$schema": "../icon.schema.json",
"contributors": [
"ilyavred",
"jamiemlaw"
],
"use-cases": [
"Setting the opacity of layers or objects in graphic editors",
"Adjusting the opacity of fills, strokes, or other object attributes",
"Adjusting the alpha channel in color pickers",
"Indicating that a layer or element is semi-transparent"
],
"tags": [
"opacity",
"opaque",
"transparency",
"visibility",
"fade",
"lens",
"glass",
"blur",
"filter",
"clear",
"mask",
"cover",
"gradient"
],
"categories": [
"design",
"photography"
]
}
+25
View File
@@ -0,0 +1,25 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M12 3h.01" />
<path d="M12 9h.01" />
<path d="M15 6h.01" />
<path d="M18 3h.01" />
<path d="M21 6v13a2 2 0 0 1-2 2H6" />
<path d="M3 12h.01" />
<path d="M3 18h.01" />
<path d="M3 6h.01" />
<path d="M6 15h.01" />
<path d="M6 3h.01" />
<path d="M6 9h.01" />
<path d="M9 12h.01" />
<path d="M9 6h.01" />
</svg>

After

Width:  |  Height:  |  Size: 544 B

+19
View File
@@ -0,0 +1,19 @@
{
"$schema": "../icon.schema.json",
"contributors": [
"$extends:package"
],
"use-cases": [
"Editing recipient addresses or package contents in shipping systems",
"Modifying customer orders before shipment",
"Updating product listings in inventory or e-commerce platforms",
"Editing software package manifests or metadata"
],
"tags": [
"$extends:package",
"$group:pen"
],
"categories": [
"$extends:package"
]
}
+17
View File
@@ -0,0 +1,17 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M12 14.34V12l8.71-5" />
<path d="M16.511 21.141a2 2 0 0 0 .854-.506l4.013-4.009a1 1 0 1 0-3.004-3.004l-4.01 4.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .599.626z" />
<path d="M21 9.114V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l5.087 2.907" />
<path d="M3.29 7 12 12" />
<path d="m7.5 4.27 9 5.15" />
</svg>

After

Width:  |  Height:  |  Size: 564 B

+24
View File
@@ -0,0 +1,24 @@
{
"$schema": "../icon.schema.json",
"contributors": [
"$extends:package"
],
"use-cases": [
"Marking an unknown or unrecognized package in a package registry",
"Indicating a dependency that is still being resolved in a package manager",
"Indicating a lost or missing delivery package",
"Showing a shipment with an unknown delivery status"
],
"tags": [
"$extends:package",
"$group:question-mark",
"unresolved",
"placeholder",
"pending",
"lost",
"dependency"
],
"categories": [
"$extends:package"
]
}
+18
View File
@@ -0,0 +1,18 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M12 22V12l8.71-5" />
<path d="M17 15.27c.2-.4.5-.8.9-1a2.1 2.1 0 0 1 2.6.4c.3.4.5.8.5 1.3 0 1.3-2 2-2 2" />
<path d="M19 21.99h.01" />
<path d="M21 10.342V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l2.33-1.332" />
<path d="M3.29 7 12 12" />
<path d="m7.5 4.27 9 5.15" />
</svg>

After

Width:  |  Height:  |  Size: 550 B

+8 -1
View File
@@ -21,7 +21,14 @@
"packed",
"archive",
"zip",
"module"
"module",
"shipping",
"recipient",
"inventory",
"logistics",
"tracking",
"order",
"product"
],
"categories": [
"files",
@@ -15,5 +15,10 @@
],
"categories": [
"$extends:search"
],
"aliases": [
{
"name": "search-alert"
}
]
}

Before

Width:  |  Height:  |  Size: 322 B

After

Width:  |  Height:  |  Size: 322 B

@@ -59,5 +59,10 @@
"development",
"notifications",
"gaming"
],
"aliases": [
{
"name": "shield-alert"
}
]
}

Before

Width:  |  Height:  |  Size: 435 B

After

Width:  |  Height:  |  Size: 435 B

+20
View File
@@ -0,0 +1,20 @@
{
"$schema": "../icon.schema.json",
"contributors": [
"$extends:square-dashed",
"domarku"
],
"use-cases": [
"Searching within a selected region",
"Finding content inside a placeholder area",
"Scanning a marquee selection",
"Zooming a selected region"
],
"tags": [
"$extends:square-dashed",
"$group:search"
],
"categories": [
"$extends:square-dashed"
]
}
+23
View File
@@ -0,0 +1,23 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M14 3h1" />
<path d="M19 3a2 2 0 012 2" />
<path d="m21 21-1.875-1.875" />
<path d="M21 9v1" />
<path d="M3 14v1" />
<path d="M3 9v1" />
<path d="M5 21a2 2 0 01-2-2" />
<path d="M5 3a2 2 0 00-2 2" />
<path d="M9 21h1" />
<path d="M9 3h1" />
<circle cx="17" cy="17" r="3" />
</svg>

After

Width:  |  Height:  |  Size: 513 B

+4 -1
View File
@@ -15,7 +15,10 @@
"marquee",
"tool",
"dashed",
"box"
"box",
"region",
"area",
"region of interest"
],
"categories": [
"design",
@@ -21,6 +21,9 @@
"name": "alert-triangle",
"deprecationReason": "alias.name",
"deprecated": true
},
{
"name": "triangle-alert"
}
]
}

Before

Width:  |  Height:  |  Size: 345 B

After

Width:  |  Height:  |  Size: 345 B

+26
View File
@@ -0,0 +1,26 @@
{
"$schema": "../icon.schema.json",
"contributors": [
"$extends:user"
],
"use-cases": [
"Flagging an account as suspicious in moderation tools",
"Indicating a problem with a user's account or profile",
"Showing that a user has received a warning",
"Issuing a warning to a member in community management"
],
"tags": [
"$extends:user",
"$group:exclamation-mark",
"flagged",
"suspicious",
"reported",
"violation",
"moderation",
"account issue",
"review"
],
"categories": [
"$extends:user"
]
}
+16
View File
@@ -0,0 +1,16 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M15 15H9a4 4 0 00-4 4v2" />
<path d="M18.988 13v4" />
<path d="M18.988 21h.01" />
<circle cx="12" cy="7" r="4" />
</svg>

After

Width:  |  Height:  |  Size: 339 B

+16
View File
@@ -0,0 +1,16 @@
{
"$schema": "../icon.schema.json",
"contributors": [
"$extends:user-round"
],
"use-cases": [
"$extends:user-exclamation-point"
],
"tags": [
"$extends:user-round",
"$extends:user-exclamation-point"
],
"categories": [
"$extends:user-round"
]
}
+16
View File
@@ -0,0 +1,16 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M19.99 13v4" />
<path d="M19.99 21H20" />
<path d="M4 21a8 8 0 0111.99-6.934" />
<circle cx="12" cy="8" r="5" />
</svg>

After

Width:  |  Height:  |  Size: 338 B

@@ -3,20 +3,20 @@ import { bootstrapApplication, provideClientHydration } from '@angular/platform-
import { provideServerRendering, renderApplication } from '@angular/platform-server';
import { LucideDynamicIcon } from './lucide-dynamic-icon';
import { provideLucideIcons } from './lucide-icons';
import { LucideBadgeAlert } from './icons/badge-alert';
import { LucideBadgeExclamationPoint } from './icons/badge-exclamation-point';
@Component({
// eslint-disable-next-line @angular-eslint/component-selector
selector: 'lucide-static-hydration-root',
template: `<svg lucideBadgeAlert [nonScalingStroke]="true"></svg>`,
imports: [LucideBadgeAlert],
template: `<svg lucideBadgeExclamationPoint [nonScalingStroke]="true"></svg>`,
imports: [LucideBadgeExclamationPoint],
})
class StaticHydrationRootComponent {}
@Component({
// eslint-disable-next-line @angular-eslint/component-selector
selector: 'lucide-dynamic-hydration-root',
template: `<svg [lucideIcon]="'badge-alert'"></svg>`,
template: `<svg [lucideIcon]="'badge-exclamation-point'"></svg>`,
imports: [LucideDynamicIcon],
})
class DynamicHydrationRootComponent {}
@@ -60,7 +60,7 @@ describe('Lucide hydration', () => {
);
(globalThis as { ngServerMode?: boolean }).ngServerMode = false;
const serverDocument = new DOMParser().parseFromString(html, 'text/html');
expectBadgeAlertShapeNodes(serverDocument.querySelector('svg') as SVGSVGElement);
expectBadgeExclamationPointShapeNodes(serverDocument.querySelector('svg') as SVGSVGElement);
document.head.innerHTML = serverDocument.head.innerHTML;
document.body.innerHTML = serverDocument.body.innerHTML;
@@ -75,7 +75,7 @@ describe('Lucide hydration', () => {
return document.querySelector('svg') as SVGSVGElement;
}
function expectBadgeAlertShapeNodes(svg: SVGSVGElement) {
function expectBadgeExclamationPointShapeNodes(svg: SVGSVGElement) {
expect(Array.from(svg.children).map((child) => child.tagName.toLowerCase())).toEqual([
'path',
'line',
@@ -89,7 +89,7 @@ describe('Lucide hydration', () => {
'lucide-static-hydration-root',
);
expectBadgeAlertShapeNodes(svg);
expectBadgeExclamationPointShapeNodes(svg);
for (const child of Array.from(svg.children)) {
expect(child.getAttribute('vector-effect')).toBe('non-scaling-stroke');
}
@@ -99,9 +99,9 @@ describe('Lucide hydration', () => {
const svg = await renderAndHydrate(
DynamicHydrationRootComponent,
'lucide-dynamic-hydration-root',
[provideLucideIcons(LucideBadgeAlert)],
[provideLucideIcons(LucideBadgeExclamationPoint)],
);
expectBadgeAlertShapeNodes(svg);
expectBadgeExclamationPointShapeNodes(svg);
});
});
+2 -1
View File
@@ -55,11 +55,12 @@
"dist"
],
"scripts": {
"build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm build:bundles",
"build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm build:bundles && pnpm check:icon-subpaths",
"copy:license": "cp ../../LICENSE ./LICENSE",
"clean": "rm -rf dist && rm -rf stats && rm -rf ./src/icons/*.ts",
"build:icons": "build-icons --output=./src --templateSrc=./scripts/exportTemplate.mts --renderUniqueKey --iconFileExtension=.ts --exportFileName=index.ts --withAliases --separateAliasesFile --separateAliasesFileIgnore=fingerprint --aliasesFileExtension=.ts",
"build:bundles": "rollup -c ./rollup.config.mjs",
"check:icon-subpaths": "node ./scripts/checkIconSubpaths.mts",
"test": "pnpm build:icons && vitest run",
"test:watch": "vitest watch",
"typecheck": "pnpm build:icons && tsc"
@@ -11,7 +11,14 @@ const dtsOptions = {
const packageName = 'LucideReact';
const outputFileName = 'lucide-react-native';
const outputDir = 'dist';
const inputs = ['src/lucide-react-native.ts', 'src/icons/index.ts'];
const iconAndAliasEntries = await getIconEntryNamesAndAliases();
// Alias modules (e.g. `icons/trash-2`) aren't imported by the index, so list them as entries
// to emit the runtime files the `./icons/*` export map points at.
const inputs = [
'src/lucide-react-native.ts',
'src/icons/index.ts',
...Object.values(iconAndAliasEntries),
];
const bundles = [
{
format: 'cjs',
@@ -28,7 +35,6 @@ const bundles = [
},
];
const iconAndAliasEntries = await getIconEntryNamesAndAliases();
const typesModuleMatcher = /[/\\]src[/\\]types\.(d\.)?ts$/;
const configs = bundles.map(({ inputs, outputDir, format, preserveModules, extension = 'js' }) => ({
@@ -0,0 +1,16 @@
// Fails the build when an `icons/*` subpath has type declarations but no runtime file.
import { existsSync, readdirSync } from 'node:fs';
const declarations = readdirSync('dist/types/icons').filter((file) => file.endsWith('.d.ts'));
const missing = declarations.flatMap((file) => {
const name = file.replace(/\.d\.ts$/, '');
return [`dist/esm/icons/${name}.mjs`, `dist/cjs/icons/${name}.js`].filter(
(runtimeFile) => !existsSync(runtimeFile),
);
});
if (missing.length > 0) {
console.error(`Missing runtime files for icon subpaths:\n${missing.join('\n')}`);
process.exit(1);
}
+1 -1
View File
@@ -1,7 +1,7 @@
import path from 'path';
import fs from 'fs';
import { promisify } from 'util';
import simpleGit from 'simple-git';
import { simpleGit } from 'simple-git';
import { type IconMetadata } from '../../tools/build-icons/types.ts';
/**