Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
b826f0c527 | ||
|
|
558bdd83b5 | ||
|
|
a805955781 | ||
|
|
ee8e10d746 | ||
|
|
2c2ee80687 | ||
|
|
1c93e0a476 | ||
|
|
91a1359b5e | ||
|
|
90e8041a35 | ||
|
|
3898742b6a | ||
|
|
a4a0e20ff5 | ||
|
|
1980e3d59b | ||
|
|
aa0b77386c | ||
|
|
7bb15b80a3 |
@@ -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.
|
||||
|
||||
@@ -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**.
|
||||
:::
|
||||
::::
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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 |
@@ -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"
|
||||
]
|
||||
}
|
||||
@@ -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 |
@@ -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"
|
||||
]
|
||||
}
|
||||
@@ -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 |
@@ -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"
|
||||
]
|
||||
}
|
||||
@@ -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 |
@@ -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"
|
||||
]
|
||||
}
|
||||
@@ -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 |
@@ -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"
|
||||
]
|
||||
}
|
||||
@@ -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 |
@@ -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"
|
||||
]
|
||||
}
|
||||
@@ -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 |
@@ -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"
|
||||
]
|
||||
}
|
||||
@@ -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 |
@@ -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 |
@@ -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"
|
||||
]
|
||||
}
|
||||
@@ -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 |
@@ -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 |
@@ -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"
|
||||
]
|
||||
}
|
||||
@@ -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 |
@@ -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"
|
||||
]
|
||||
}
|
||||
@@ -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);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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,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';
|
||||
|
||||
/**
|
||||
|
||||