| **`lucide`** | [](https://www.npmjs.com/package/lucide) |  | [Docs](https://lucide.dev/guide/packages/lucide) · [Source](./packages/lucide) |
-| 
| **`lucide-react`** | [](https://www.npmjs.com/package/lucide-react) |  | [Docs](https://lucide.dev/guide/packages/lucide-react) · [Source](./packages/lucide-react) |
-| 
| **`lucide-vue-next`** | [](https://www.npmjs.com/package/lucide-vue-next) |  | [Docs](https://lucide.dev/guide/packages/lucide-vue-next) · [Source](./packages/lucide-vue-next) |
-| 
| **`lucide-svelte`** | [](https://www.npmjs.com/package/lucide-svelte) |  | [Docs](https://lucide.dev/guide/packages/lucide-svelte) · [Source](./packages/lucide-svelte) |
-| 
| **`lucide-solid`** | [](https://www.npmjs.com/package/lucide-solid) |  | [Docs](https://lucide.dev/guide/packages/lucide-solid) · [Source](./packages/lucide-solid) |
-| 
| **`lucide-preact`** | [](https://www.npmjs.com/package/lucide-preact) |  | [Docs](https://lucide.dev/guide/packages/lucide-preact) · [Source](./packages/lucide-preact) |
-| 
| **`lucide-react-native`** | [](https://www.npmjs.com/package/lucide-react-native) |  | [Docs](https://lucide.dev/guide/packages/lucide-react-native) · [Source](./packages/lucide-react-native) |
-| 
| **`lucide-angular`** | [](https://www.npmjs.com/package/lucide-angular) |  | [Docs](https://lucide.dev/guide/packages/lucide-angular) · [Source](./packages/lucide-angular) |
-| 
| **`@lucide/astro`** | [](https://www.npmjs.com/package/@lucide/astro) |  | [Docs](https://lucide.dev/guide/packages/lucide-astro) · [Source](./packages/astro) |
-| 
| **`lucide-static`** | [](https://www.npmjs.com/package/lucide-static) |  | [Docs](https://lucide.dev/guide/packages/lucide-static) · [Source](./packages/lucide-static) |
+| 
+[//]: <> (Sponsors)
+
## Sponsors
+
+
@@ -54,6 +111,8 @@ const iconComponent = computed(() => {
position: relative;
background: var(--vp-c-bg-alt);
border-radius: 8px;
+ overflow: hidden;
+ flex-shrink: 0;
}
.icon-container > :deep(svg:not(.icon-grid)) {
width: 100%;
@@ -64,6 +123,34 @@ const iconComponent = computed(() => {
opacity: 0.8;
}
+.studio-button {
+ position: absolute;
+ bottom: 8px;
+ right: 8px;
+ background: var(--vp-c-bg);
+ border: 1px solid var(--vp-c-divider);
+ border-radius: 6px;
+ padding: 5px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: var(--vp-c-text-2);
+ opacity: 0;
+ transition: opacity 0.2s, color 0.2s, background-color 0.2s;
+ z-index: 2;
+}
+
+.icon-container:hover .studio-button,
+.studio-button:focus-visible {
+ opacity: 1;
+}
+
+.studio-button:hover,
+.studio-button:focus-visible {
+ background: var(--vp-c-bg-soft);
+ color: var(--vp-c-text-1);
+}
+
.icon-component.customizable {
will-change: width, height, stroke-width, stroke;
/* color: var(--customize-color, currentColor);
diff --git a/docs/.vitepress/theme/components/icons/IconPreviewSmall.vue b/docs/.vitepress/theme/components/icons/IconPreviewSmall.vue
index c39d94d19..3ac52bbdd 100644
--- a/docs/.vitepress/theme/components/icons/IconPreviewSmall.vue
+++ b/docs/.vitepress/theme/components/icons/IconPreviewSmall.vue
@@ -1,27 +1,32 @@
@@ -42,7 +47,10 @@ const Icon = createLucideIcon(props.name, props.iconNode)
font-weight: 600;
border-radius: 4px;
white-space: nowrap;
- transition: color 0.25s, border-color 0.25s, background-color 0.25s;
+ transition:
+ color 0.25s,
+ border-color 0.25s,
+ background-color 0.25s;
border-radius: 6px;
background-color: var(--vp-c-bg-alt);
display: inline-flex;
diff --git a/docs/.vitepress/theme/components/icons/IconShowcase.vue b/docs/.vitepress/theme/components/icons/IconShowcase.vue
index a3a9cc25f..4d5250fc5 100644
--- a/docs/.vitepress/theme/components/icons/IconShowcase.vue
+++ b/docs/.vitepress/theme/components/icons/IconShowcase.vue
@@ -1,7 +1,7 @@
-
+
+
diff --git a/docs/icons/categories.md b/docs/icons/categories.md
index 04c507358..2dc1a9d44 100644
--- a/docs/icons/categories.md
+++ b/docs/icons/categories.md
@@ -1,5 +1,6 @@
---
title: Categories
+description: Explore Lucide icons organized into various categories for easier browsing.
layout: page
outline: 2
outlineTitle: Categories
diff --git a/docs/icons/icons.data.ts b/docs/icons/icons.data.ts
index b5c50019d..0284b270a 100644
--- a/docs/icons/icons.data.ts
+++ b/docs/icons/icons.data.ts
@@ -1,9 +1,19 @@
-import iconNodes from '../.vitepress/data/iconNodes';
+import * as iconDetails from '../.vitepress/data/iconDetails';
export default {
async load() {
return {
- icons: Object.entries(iconNodes).map(([name, iconNode]) => ({ name, iconNode })),
+ icons: Object.entries(iconDetails).map(
+ ([, { name, iconNode, popularity, createdRelease, aliases = [] }]) => ({
+ name,
+ iconNode,
+ popularity: popularity?.count ?? 0,
+ aliases: aliases
+ .map((alias) => (typeof alias === 'string' ? alias : alias?.name))
+ .filter((alias): alias is string => Boolean(alias)),
+ createdRelease,
+ }),
+ ),
};
},
};
diff --git a/docs/icons/index.md b/docs/icons/index.md
index c5df9e1b9..9da20410b 100644
--- a/docs/icons/index.md
+++ b/docs/icons/index.md
@@ -1,5 +1,6 @@
---
title: Icons
+description: Browse all Lucide icons.
layout: page
outline: 2
outlineTitle: Categories
diff --git a/docs/icons/lab/[name].paths.ts b/docs/icons/lab/[name].paths.ts
index 1ca5982b0..6954ee935 100644
--- a/docs/icons/lab/[name].paths.ts
+++ b/docs/icons/lab/[name].paths.ts
@@ -1,24 +1,26 @@
-import { IconEntity } from '../../.vitepress/theme/types';
+import iconNodes from '../../.vitepress/data/lab/iconNodes';
+import iconPopularity from '../../.vitepress/data/lab/iconPopularity';
+import iconMetaData from '../../.vitepress/data/lab/iconMetaData';
+import { type IconEntity } from '../../.vitepress/theme/types';
export default {
paths: async () => {
- try {
- const iconDetailsResponse = await fetch('https://lab.lucide.dev/api/icon-details');
- const iconDetails = (await iconDetailsResponse.json()) as Record;
+ return (Object.entries(iconNodes) as unknown as IconEntity[]).map(([name, iconNode]) => {
+ const iconDetails = iconMetaData[name];
- return Object.values(iconDetails).map((iconEntity) => {
- const params = {
- externalLibrary: 'lab',
- ...iconEntity,
- };
+ delete iconDetails['$schema'];
- return {
- params,
- };
- });
- } catch (error) {
- console.error('Error fetching icon details:', error);
- return [];
- }
+ const params = {
+ name,
+ iconNode,
+ externalLibrary: 'lab',
+ popularity: iconPopularity[name]?.count ?? 0,
+ ...iconDetails,
+ };
+
+ return {
+ params,
+ };
+ });
},
};
diff --git a/docs/images/a11y/alttext-buttons.svg b/docs/images/a11y/alttext-buttons.svg
index faa749928..51874f8b3 100644
--- a/docs/images/a11y/alttext-buttons.svg
+++ b/docs/images/a11y/alttext-buttons.svg
@@ -1,41 +1,33 @@
-
diff --git a/icons/banana.json b/icons/banana.json
index e89d0037e..0ac1419cf 100644
--- a/icons/banana.json
+++ b/icons/banana.json
@@ -3,6 +3,7 @@
"contributors": [
"karsa-mistmere"
],
+ "use-cases": [],
"tags": [
"fruit",
"food"
diff --git a/icons/bandage.json b/icons/bandage.json
index a3d1fa8e7..079c699b1 100644
--- a/icons/bandage.json
+++ b/icons/bandage.json
@@ -2,8 +2,10 @@
"$schema": "../icon.schema.json",
"contributors": [
"karsa-mistmere",
- "jamiemlaw"
+ "jamiemlaw",
+ "jguddas"
],
+ "use-cases": [],
"tags": [
"plaster",
"band-aid",
diff --git a/icons/bandage.svg b/icons/bandage.svg
index ebd1c3bc3..8241041a5 100644
--- a/icons/bandage.svg
+++ b/icons/bandage.svg
@@ -13,7 +13,7 @@
>;\n size: Signal>;\n color: Signal>;\n strokeWidth: Signal>;\n absoluteStrokeWidth: Signal>;\n}\n/**\n * Represents a Lucide icon component type that has `iconName` and `iconData` signals inherited from `LucideIconBase` and respective static members accessible without instantiating the component.\n */\ninterface LucideIcon extends Type {\n icon: LucideIconData;\n}\n/**\n * Type guard for {@link LucideIconData}\n */\ndeclare function isLucideIconData(icon: unknown): icon is LucideIconData;\n/**\n * Type guard for {@link LucideIcon}\n */\ndeclare function isLucideIconComponent(icon: unknown): icon is LucideIcon;\ntype LucideIconInput = LucideIcon | LucideIconData | string;\n/**\n * @internal\n */\ntype Nullable = T | null | undefined;","originalLength":1445,"removedExports":[],"renderedExports":["LucideIconNode","LucideIcons","LucideIconData","LucideIcon","isLucideIconData","isLucideIconComponent","LucideIconInput","Nullable"],"renderedLength":1331},"/Users/eric.fennis/Development/lucide/packages/angular/dist/tmp-typings/lucide-icon-base.d.ts":{"code":"/**\n * @internal\n */\ndeclare abstract class LucideIconBase {\n protected abstract readonly icon: Signal>;\n protected readonly iconNodes: Signal<_lucide_angular.LucideIconNode[]>;\n protected readonly iconClasses: Signal;\n protected readonly iconConfig: _lucide_angular.LucideConfig;\n /**\n * An optional accessible label for the icon.\n * - If provided, it will add the title as an [`` element](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/title).\n * - If not provided, the component will add an `aria-hidden=\"true\"` attribute automatically.\n *\n * @remarks\n * Please refer to our [Accessibility guide](https://lucide.dev/guide/advanced/accessibility) regarding this matter.\n * Adding accessible labels to icons is normally not necessary:\n * - If your icon is decorative (as most icons are) just leave it as hidden from screen readers.\n * - If your icon is interactive, it should be contained within an interactive element (e.g. button), and you should probably set your accessible label on that element.\n * - If your icon is functional (e.g. used in place of a label), feel free to use this property.\n */\n readonly title: i0.InputSignal>;\n /**\n * Width and height.\n * @default 24\n */\n readonly size: i0.InputSignalWithTransform>;\n /**\n * Stroke color.\n * @default currentColor\n */\n readonly color: i0.InputSignalWithTransform>;\n /**\n * Stroke width\n * @default 2\n */\n readonly strokeWidth: i0.InputSignalWithTransform>;\n /**\n * If set to true, it adds [`vector-effect=\"non-scaling-stroke\"`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/vector-effect) to child elements.\n */\n readonly absoluteStrokeWidth: i0.InputSignalWithTransform>;\n static ɵfac: i0.ɵɵFactoryDeclaration;\n static ɵcmp: i0.ɵɵComponentDeclaration;\n}","originalLength":2848,"removedExports":[],"renderedExports":["LucideIconBase"],"renderedLength":2586},"/Users/eric.fennis/Development/lucide/packages/angular/dist/tmp-typings/icons/a-arrow-down.d.ts":{"code":"/**\n * @component @name AArrowDown\n * @description Lucide SVG icon component, renders SVG Element with children.\n *\n * @preview  - https://lucide.dev/icons/a-arrow-down\n * @see https://lucide.dev/guide/packages/angular - Documentation\n *\n * @param {Object} props - Lucide icons props and any valid SVG attribute\n *\n */\ndeclare class LucideAArrowDown extends LucideIconBase {\n static readonly icon: LucideIconData;\n protected readonly icon: i0.WritableSignal;\n static ɵfac: i0.ɵɵFactoryDeclaration;\n static ɵcmp: i0.ɵɵComponentDeclaration;\n}","originalLength":1408,"removedExports":[],"renderedExports":["LucideAArrowDown"],"renderedLength":1245},"/Users/eric.fennis/Development/lucide/packages/angular/dist/tmp-typings/icons/a-large-small.d.ts":{"code":"/**\n * @component @name ALargeSmall\n * @description Lucide SVG icon component, renders SVG Element with children.\n *\n * @preview  - https://lucide.dev/icons/a-large-small\n * @see https://lucide.dev/guide/packages/angular - Documentation\n *\n * @param {Object} props - Lucide icons props and any valid SVG attribute\n *\n */\ndeclare class LucideALargeSmall extends LucideIconBase {\n static readonly icon: LucideIconData;\n protected readonly icon: i0.WritableSignal;\n static ɵfac: i0.ɵɵFactoryDeclaration;\n static ɵcmp: i0.ɵɵComponentDeclaration;\n}","originalLength":1470,"removedExports":[],"renderedExports":["LucideALargeSmall"],"renderedLength":1307},"/Users/eric.fennis/Development/lucide/packages/angular/dist/tmp-typings/icons/activity.d.ts":{"code":"/**\n * @component @name Activity\n * @description Lucide SVG icon component, renders SVG Element with children.\n *\n * @preview  - https://lucide.dev/icons/activity\n * @see https://lucide.dev/guide/packages/angular - Documentation\n *\n * @param {Object} props - Lucide icons props and any valid SVG attribute\n *\n */\ndeclare class LucideActivity extends LucideIconBase {\n static readonly icon: LucideIconData;\n protected readonly icon: i0.WritableSignal;\n static ɵfac: i0.ɵɵFactoryDeclaration;\n static ɵcmp: i0.ɵɵComponentDeclaration;\n}","originalLength":1390,"removedExports":[],"renderedExports":["LucideActivity"],"renderedLength":1227},"/Users/eric.fennis/Development/lucide/packages/angular/dist/tmp-typings/icons/a-arrow-up.d.ts":{"code":"/**\n * @component @name AArrowUp\n * @description Lucide SVG icon component, renders SVG Element with children.\n *\n * @preview  - https://lucide.dev/icons/a-arrow-up\n * @see https://lucide.dev/guide/packages/angular - Documentation\n *\n * @param {Object} props - Lucide icons props and any valid SVG attribute\n *\n */\ndeclare class LucideAArrowUp extends LucideIconBase {\n static readonly icon: LucideIconData;\n protected readonly icon: i0.WritableSignal;\n static ɵfac: i0.ɵɵFactoryDeclaration;\n static ɵcmp: i0.ɵɵComponentDeclaration;\n}","originalLength":1396,"removedExports":[],"renderedExports":["LucideAArrowUp"],"renderedLength":1233},"/Users/eric.fennis/Development/lucide/packages/angular/dist/tmp-typings/icons/accessibility.d.ts":{"code":"/**\n * @component @name Accessibility\n * @description Lucide SVG icon component, renders SVG Element with children.\n *\n * @preview  - https://lucide.dev/icons/accessibility\n * @see https://lucide.dev/guide/packages/angular - Documentation\n *\n * @param {Object} props - Lucide icons props and any valid SVG attribute\n *\n */\ndeclare class LucideAccessibility extends LucideIconBase {\n static readonly icon: LucideIconData;\n protected readonly icon: i0.WritableSignal;\n static ɵfac: i0.ɵɵFactoryDeclaration;\n static ɵcmp: i0.ɵɵComponentDeclaration;\n}","originalLength":1488,"removedExports":[],"renderedExports":["LucideAccessibility"],"renderedLength":1325},"/Users/eric.fennis/Development/lucide/packages/angular/dist/tmp-typings/icons/ad.d.ts":{"code":"/**\n * @component @name Ad\n * @description Lucide SVG icon component, renders SVG Element with children.\n *\n * @preview  - https://lucide.dev/icons/ad\n * @see https://lucide.dev/guide/packages/angular - Documentation\n *\n * @param {Object} props - Lucide icons props and any valid SVG attribute\n *\n */\ndeclare class LucideAd extends LucideIconBase {\n static readonly icon: LucideIconData;\n protected readonly icon: i0.WritableSignal;\n static ɵfac: i0.ɵɵFactoryDeclaration;\n static ɵcmp: i0.ɵɵComponentDeclaration;\n}","originalLength":1470,"removedExports":[],"renderedExports":["LucideAd"],"renderedLength":1307},"/Users/eric.fennis/Development/lucide/packages/angular/dist/tmp-typings/icons/air-vent.d.ts":{"code":"/**\n * @component @name AirVent\n * @description Lucide SVG icon component, renders SVG Element with children.\n *\n * @preview  - https://lucide.dev/icons/air-vent\n * @see https://lucide.dev/guide/packages/angular - Documentation\n *\n * @param {Object} props - Lucide icons props and any valid SVG attribute\n *\n */\ndeclare class LucideAirVent extends LucideIconBase {\n static readonly icon: LucideIconData;\n protected readonly icon: i0.WritableSignal;\n static ɵfac: i0.ɵɵFactoryDeclaration;\n static ɵcmp: i0.ɵɵComponentDeclaration;\n}","originalLength":1473,"removedExports":[],"renderedExports":["LucideAirVent"],"renderedLength":1310},"/Users/eric.fennis/Development/lucide/packages/angular/dist/tmp-typings/icons/alarm-clock-check.d.ts":{"code":"/**\n * @component @name AlarmClockCheck\n * @description Lucide SVG icon component, renders SVG Element with children.\n *\n * @preview  - https://lucide.dev/icons/alarm-clock-check\n * @see https://lucide.dev/guide/packages/angular - Documentation\n *\n * @param {Object} props - Lucide icons props and any valid SVG attribute\n *\n */\ndeclare class LucideAlarmClockCheck extends LucideIconBase {\n static readonly icon: LucideIconData;\n protected readonly icon: i0.WritableSignal;\n static ɵfac: i0.ɵɵFactoryDeclaration;\n static ɵcmp: i0.ɵɵComponentDeclaration;\n}\n/**\n * @deprecated\n * @see LucideAlarmClockCheck\n */\ndeclare const LucideAlarmCheck: typeof LucideAlarmClockCheck;","originalLength":1631,"removedExports":[],"renderedExports":["LucideAlarmClockCheck","LucideAlarmCheck"],"renderedLength":1461},"/Users/eric.fennis/Development/lucide/packages/angular/dist/tmp-typings/icons/alarm-clock-minus.d.ts":{"code":"/**\n * @component @name AlarmClockMinus\n * @description Lucide SVG icon component, renders SVG Element with children.\n *\n * @preview  - https://lucide.dev/icons/alarm-clock-minus\n * @see https://lucide.dev/guide/packages/angular - Documentation\n *\n * @param {Object} props - Lucide icons props and any valid SVG attribute\n *\n */\ndeclare class LucideAlarmClockMinus extends LucideIconBase {\n static readonly icon: LucideIconData;\n protected readonly icon: i0.WritableSignal;\n static ɵfac: i0.ɵɵFactoryDeclaration;\n static ɵcmp: i0.ɵɵComponentDeclaration;\n}\n/**\n * @deprecated\n * @see LucideAlarmClockMinus\n */\ndeclare const LucideAlarmMinus: typeof LucideAlarmClockMinus;","originalLength":1623,"removedExports":[],"renderedExports":["LucideAlarmClockMinus","LucideAlarmMinus"],"renderedLength":1453},"/Users/eric.fennis/Development/lucide/packages/angular/dist/tmp-typings/icons/alarm-clock-off.d.ts":{"code":"/**\n * @component @name AlarmClockOff\n * @description Lucide SVG icon component, renders SVG Element with children.\n *\n * @preview  - https://lucide.dev/icons/alarm-clock-off\n * @see https://lucide.dev/guide/packages/angular - Documentation\n *\n * @param {Object} props - Lucide icons props and any valid SVG attribute\n *\n */\ndeclare class LucideAlarmClockOff extends LucideIconBase {\n static readonly icon: LucideIconData;\n protected readonly icon: i0.WritableSignal;\n static ɵfac: i0.ɵɵFactoryDeclaration;\n static ɵcmp: i0.ɵɵComponentDeclaration;\n}","originalLength":1506,"removedExports":[],"renderedExports":["LucideAlarmClockOff"],"renderedLength":1343},"/Users/eric.fennis/Development/lucide/packages/angular/dist/tmp-typings/icons/alarm-clock-plus.d.ts":{"code":"/**\n * @component @name AlarmClockPlus\n * @description Lucide SVG icon component, renders SVG Element with children.\n *\n * @preview  - https://lucide.dev/icons/alarm-clock-plus\n * @see https://lucide.dev/guide/packages/angular - Documentation\n *\n * @param {Object} props - Lucide icons props and any valid SVG attribute\n *\n */\ndeclare class LucideAlarmClockPlus extends LucideIconBase {\n static readonly icon: LucideIconData;\n protected readonly icon: i0.WritableSignal;\n static ɵfac: i0.ɵɵFactoryDeclaration;\n static ɵcmp: i0.ɵɵComponentDeclaration;\n}\n/**\n * @deprecated\n * @see LucideAlarmClockPlus\n */\ndeclare const LucideAlarmPlus: typeof LucideAlarmClockPlus;","originalLength":1645,"removedExports":[],"renderedExports":["LucideAlarmClockPlus","LucideAlarmPlus"],"renderedLength":1475},"/Users/eric.fennis/Development/lucide/packages/angular/dist/tmp-typings/icons/alarm-clock.d.ts":{"code":"/**\n * @component @name AlarmClock\n * @description Lucide SVG icon component, renders SVG Element with children.\n *\n * @preview  - https://lucide.dev/icons/alarm-clock\n * @see https://lucide.dev/guide/packages/angular - Documentation\n *\n * @param {Object} props - Lucide icons props and any valid SVG attribute\n *\n */\ndeclare class LucideAlarmClock extends LucideIconBase {\n static readonly icon: LucideIconData;\n protected readonly icon: i0.WritableSignal;\n static ɵfac: i0.ɵɵFactoryDeclaration;\n static ɵcmp: i0.ɵɵComponentDeclaration;\n}","originalLength":1451,"removedExports":[],"renderedExports":["LucideAlarmClock"],"renderedLength":1288},"/Users/eric.fennis/Development/lucide/packages/angular/dist/tmp-typings/icons/align-center-horizontal.d.ts":{"code":"/**\n * @component @name AlignCenterHorizontal\n * @description Lucide SVG icon component, renders SVG Element with children.\n *\n * @preview  - https://lucide.dev/icons/align-center-horizontal\n * @see https://lucide.dev/guide/packages/angular - Documentation\n *\n * @param {Object} props - Lucide icons props and any valid SVG attribute\n *\n */\ndeclare class LucideAlignCenterHorizontal extends LucideIconBase {\n static readonly icon: LucideIconData;\n protected readonly icon: i0.WritableSignal;\n static ɵfac: i0.ɵɵFactoryDeclaration;\n static ɵcmp: i0.ɵɵComponentDeclaration;\n}","originalLength":1618,"removedExports":[],"renderedExports":["LucideAlignCenterHorizontal"],"renderedLength":1455},"/Users/eric.fennis/Development/lucide/packages/angular/dist/tmp-typings/icons/alarm-smoke.d.ts":{"code":"/**\n * @component @name AlarmSmoke\n * @description Lucide SVG icon component, renders SVG Element with children.\n *\n * @preview  - https://lucide.dev/icons/alarm-smoke\n * @see https://lucide.dev/guide/packages/angular - Documentation\n *\n * @param {Object} props - Lucide icons props and any valid SVG attribute\n *\n */\ndeclare class LucideAlarmSmoke extends LucideIconBase {\n static readonly icon: LucideIconData;\n protected readonly icon: i0.WritableSignal;\n static ɵfac: i0.ɵɵFactoryDeclaration;\n static ɵcmp: i0.ɵɵComponentDeclaration;\n}","originalLength":1583,"removedExports":[],"renderedExports":["LucideAlarmSmoke"],"renderedLength":1420},"/Users/eric.fennis/Development/lucide/packages/angular/dist/tmp-typings/icons/align-center-vertical.d.ts":{"code":"/**\n * @component @name AlignCenterVertical\n * @description Lucide SVG icon component, renders SVG Element with children.\n *\n * @preview  - https://lucide.dev/icons/align-center-vertical\n * @see https://lucide.dev/guide/packages/angular - Documentation\n *\n * @param {Object} props - Lucide icons props and any valid SVG attribute\n *\n */\ndeclare class LucideAlignCenterVertical extends LucideIconBase {\n static readonly icon: LucideIconData;\n protected readonly icon: i0.WritableSignal;\n static ɵfac: i0.ɵɵFactoryDeclaration;\n static ɵcmp: i0.ɵɵComponentDeclaration;\n}","originalLength":1606,"removedExports":[],"renderedExports":["LucideAlignCenterVertical"],"renderedLength":1443},"/Users/eric.fennis/Development/lucide/packages/angular/dist/tmp-typings/icons/align-end-vertical.d.ts":{"code":"/**\n * @component @name AlignEndVertical\n * @description Lucide SVG icon component, renders SVG Element with children.\n *\n * @preview  - https://lucide.dev/icons/align-end-vertical\n * @see https://lucide.dev/guide/packages/angular - Documentation\n *\n * @param {Object} props - Lucide icons props and any valid SVG attribute\n *\n */\ndeclare class LucideAlignEndVertical extends LucideIconBase {\n static readonly icon: LucideIconData;\n protected readonly icon: i0.WritableSignal;\n static ɵfac: i0.ɵɵFactoryDeclaration;\n static ɵcmp: i0.ɵɵComponentDeclaration;\n}","originalLength":1424,"removedExports":[],"renderedExports":["LucideAlignEndVertical"],"renderedLength":1261},"/Users/eric.fennis/Development/lucide/packages/angular/dist/tmp-typings/icons/align-end-horizontal.d.ts":{"code":"/**\n * @component @name AlignEndHorizontal\n * @description Lucide SVG icon component, renders SVG Element with children.\n *\n * @preview  - https://lucide.dev/icons/align-end-horizontal\n * @see https://lucide.dev/guide/packages/angular - Documentation\n *\n * @param {Object} props - Lucide icons props and any valid SVG attribute\n *\n */\ndeclare class LucideAlignEndHorizontal extends LucideIconBase {\n static readonly icon: LucideIconData;\n protected readonly icon: i0.WritableSignal;\n static ɵfac: i0.ɵɵFactoryDeclaration;\n static ɵcmp: i0.ɵɵComponentDeclaration;\n}","originalLength":1436,"removedExports":[],"renderedExports":["LucideAlignEndHorizontal"],"renderedLength":1273},"/Users/eric.fennis/Development/lucide/packages/angular/dist/tmp-typings/icons/airplay.d.ts":{"code":"/**\n * @component @name Airplay\n * @description Lucide SVG icon component, renders SVG Element with children.\n *\n * @preview  - https://lucide.dev/icons/airplay\n * @see https://lucide.dev/guide/packages/angular - Documentation\n *\n * @param {Object} props - Lucide icons props and any valid SVG attribute\n *\n */\ndeclare class LucideAirplay extends LucideIconBase {\n static readonly icon: LucideIconData;\n protected readonly icon: i0.WritableSignal;\n static ɵfac: i0.ɵɵFactoryDeclaration;\n static ɵcmp: i0.ɵɵComponentDeclaration;\n}","originalLength":1356,"removedExports":[],"renderedExports":["LucideAirplay"],"renderedLength":1193},"/Users/eric.fennis/Development/lucide/packages/angular/dist/tmp-typings/icons/align-horizontal-distribute-center.d.ts":{"code":"/**\n * @component @name AlignHorizontalDistributeCenter\n * @description Lucide SVG icon component, renders SVG Element with children.\n *\n * @preview  - https://lucide.dev/icons/align-horizontal-distribute-center\n * @see https://lucide.dev/guide/packages/angular - Documentation\n *\n * @param {Object} props - Lucide icons props and any valid SVG attribute\n *\n */\ndeclare class LucideAlignHorizontalDistributeCenter extends LucideIconBase {\n static readonly icon: LucideIconData;\n protected readonly icon: i0.WritableSignal;\n static ɵfac: i0.ɵɵFactoryDeclaration;\n static ɵcmp: i0.ɵɵComponentDeclaration;\n}","originalLength":1611,"removedExports":[],"renderedExports":["LucideAlignHorizontalDistributeCenter"],"renderedLength":1448},"/Users/eric.fennis/Development/lucide/packages/angular/dist/tmp-typings/icons/align-horizontal-justify-center.d.ts":{"code":"/**\n * @component @name AlignHorizontalJustifyCenter\n * @description Lucide SVG icon component, renders SVG Element with children.\n *\n * @preview  - https://lucide.dev/icons/align-horizontal-justify-center\n * @see https://lucide.dev/guide/packages/angular - Documentation\n *\n * @param {Object} props - Lucide icons props and any valid SVG attribute\n *\n */\ndeclare class LucideAlignHorizontalJustifyCenter extends LucideIconBase {\n static readonly icon: LucideIconData;\n protected readonly icon: i0.WritableSignal;\n static ɵfac: i0.ɵɵFactoryDeclaration;\n static ɵcmp: i0.ɵɵComponentDeclaration;\n}","originalLength":1501,"removedExports":[],"renderedExports":["LucideAlignHorizontalJustifyCenter"],"renderedLength":1338},"/Users/eric.fennis/Development/lucide/packages/angular/dist/tmp-typings/icons/align-horizontal-distribute-start.d.ts":{"code":"/**\n * @component @name AlignHorizontalDistributeStart\n * @description Lucide SVG icon component, renders SVG Element with children.\n *\n * @preview  - https://lucide.dev/icons/align-horizontal-distribute-start\n * @see https://lucide.dev/guide/packages/angular - Documentation\n *\n * @param {Object} props - Lucide icons props and any valid SVG attribute\n *\n */\ndeclare class LucideAlignHorizontalDistributeStart extends LucideIconBase {\n static readonly icon: LucideIconData;\n protected readonly icon: i0.WritableSignal;\n static ɵfac: i0.ɵɵFactoryDeclaration;\n static ɵcmp: i0.ɵɵComponentDeclaration;\n}","originalLength":1541,"removedExports":[],"renderedExports":["LucideAlignHorizontalDistributeStart"],"renderedLength":1378},"/Users/eric.fennis/Development/lucide/packages/angular/dist/tmp-typings/icons/align-horizontal-distribute-end.d.ts":{"code":"/**\n * @component @name AlignHorizontalDistributeEnd\n * @description Lucide SVG icon component, renders SVG Element with children.\n *\n * @preview  - https://lucide.dev/icons/align-horizontal-distribute-end\n * @see https://lucide.dev/guide/packages/angular - Documentation\n *\n * @param {Object} props - Lucide icons props and any valid SVG attribute\n *\n */\ndeclare class LucideAlignHorizontalDistributeEnd extends LucideIconBase {\n static readonly icon: LucideIconData;\n protected readonly icon: i0.WritableSignal;\n static ɵfac: i0.ɵɵFactoryDeclaration;\n static ɵcmp: i0.ɵɵComponentDeclaration;\n}","originalLength":1533,"removedExports":[],"renderedExports":["LucideAlignHorizontalDistributeEnd"],"renderedLength":1370},"/Users/eric.fennis/Development/lucide/packages/angular/dist/tmp-typings/icons/align-horizontal-justify-end.d.ts":{"code":"/**\n * @component @name AlignHorizontalJustifyEnd\n * @description Lucide SVG icon component, renders SVG Element with children.\n *\n * @preview  - https://lucide.dev/icons/align-horizontal-justify-end\n * @see https://lucide.dev/guide/packages/angular - Documentation\n *\n * @param {Object} props - Lucide icons props and any valid SVG attribute\n *\n */\ndeclare class LucideAlignHorizontalJustifyEnd extends LucideIconBase {\n static readonly icon: LucideIconData;\n protected readonly icon: i0.WritableSignal;\n static ɵfac: i0.ɵɵFactoryDeclaration;\n static ɵcmp: i0.ɵɵComponentDeclaration;\n}","originalLength":1483,"removedExports":[],"renderedExports":["LucideAlignHorizontalJustifyEnd"],"renderedLength":1320},"/Users/eric.fennis/Development/lucide/packages/angular/dist/tmp-typings/icons/align-horizontal-space-around.d.ts":{"code":"/**\n * @component @name AlignHorizontalSpaceAround\n * @description Lucide SVG icon component, renders SVG Element with children.\n *\n * @preview  - https://lucide.dev/icons/align-horizontal-space-around\n * @see https://lucide.dev/guide/packages/angular - Documentation\n *\n * @param {Object} props - Lucide icons props and any valid SVG attribute\n *\n */\ndeclare class LucideAlignHorizontalSpaceAround extends LucideIconBase {\n static readonly icon: LucideIconData;\n protected readonly icon: i0.WritableSignal;\n static ɵfac: i0.ɵɵFactoryDeclaration;\n static ɵcmp: i0.ɵɵComponentDeclaration;\n}","originalLength":1449,"removedExports":[],"renderedExports":["LucideAlignHorizontalSpaceAround"],"renderedLength":1286},"/Users/eric.fennis/Development/lucide/packages/angular/dist/tmp-typings/icons/align-horizontal-space-between.d.ts":{"code":"/**\n * @component @name AlignHorizontalSpaceBetween\n * @description Lucide SVG icon component, renders SVG Element with children.\n *\n * @preview  - https://lucide.dev/icons/align-horizontal-space-between\n * @see https://lucide.dev/guide/packages/angular - Documentation\n *\n * @param {Object} props - Lucide icons props and any valid SVG attribute\n *\n */\ndeclare class LucideAlignHorizontalSpaceBetween extends LucideIconBase {\n static readonly icon: LucideIconData;\n protected readonly icon: i0.WritableSignal;\n static ɵfac: i0.ɵɵFactoryDeclaration;\n static ɵcmp: i0.ɵɵComponentDeclaration;\n}","originalLength":1523,"removedExports":[],"renderedExports":["LucideAlignHorizontalSpaceBetween"],"renderedLength":1360},"/Users/eric.fennis/Development/lucide/packages/angular/dist/tmp-typings/icons/align-start-horizontal.d.ts":{"code":"/**\n * @component @name AlignStartHorizontal\n * @description Lucide SVG icon component, renders SVG Element with children.\n *\n * @preview  - https://lucide.dev/icons/align-start-horizontal\n * @see https://lucide.dev/guide/packages/angular - Documentation\n *\n * @param {Object} props - Lucide icons props and any valid SVG attribute\n *\n */\ndeclare class LucideAlignStartHorizontal extends LucideIconBase {\n static readonly icon: LucideIconData;\n protected readonly icon: i0.WritableSignal;\n static ɵfac: i0.ɵɵFactoryDeclaration;\n static ɵcmp: i0.ɵɵComponentDeclaration;\n}","originalLength":1448,"removedExports":[],"renderedExports":["LucideAlignStartHorizontal"],"renderedLength":1285},"/Users/eric.fennis/Development/lucide/packages/angular/dist/tmp-typings/icons/align-start-vertical.d.ts":{"code":"/**\n * @component @name AlignStartVertical\n * @description Lucide SVG icon component, renders SVG Element with children.\n *\n * @preview  - https://lucide.dev/icons/align-start-vertical\n * @see https://lucide.dev/guide/packages/angular - Documentation\n *\n * @param {Object} props - Lucide icons props and any valid SVG attribute\n *\n */\ndeclare class LucideAlignStartVertical extends LucideIconBase {\n static readonly icon: LucideIconData;\n protected readonly icon: i0.WritableSignal;\n static ɵfac: i0.ɵɵFactoryDeclaration;\n static ɵcmp: i0.ɵɵComponentDeclaration;\n}","originalLength":1436,"removedExports":[],"renderedExports":["LucideAlignStartVertical"],"renderedLength":1273},"/Users/eric.fennis/Development/lucide/packages/angular/dist/tmp-typings/icons/align-horizontal-justify-start.d.ts":{"code":"/**\n * @component @name AlignHorizontalJustifyStart\n * @description Lucide SVG icon component, renders SVG Element with children.\n *\n * @preview  - https://lucide.dev/icons/align-horizontal-justify-start\n * @see https://lucide.dev/guide/packages/angular - Documentation\n *\n * @param {Object} props - Lucide icons props and any valid SVG attribute\n *\n */\ndeclare class LucideAlignHorizontalJustifyStart extends LucideIconBase {\n static readonly icon: LucideIconData;\n protected readonly icon: i0.WritableSignal;\n static ɵfac: i0.ɵɵFactoryDeclaration;\n static ɵcmp: i0.ɵɵComponentDeclaration;\n}","originalLength":1491,"removedExports":[],"renderedExports":["LucideAlignHorizontalJustifyStart"],"renderedLength":1328},"/Users/eric.fennis/Development/lucide/packages/angular/dist/tmp-typings/icons/align-vertical-distribute-end.d.ts":{"code":"/**\n * @component @name AlignVerticalDistributeEnd\n * @description Lucide SVG icon component, renders SVG Element with children.\n *\n * @preview  - https://lucide.dev/icons/align-vertical-distribute-end\n * @see https://lucide.dev/guide/packages/angular - Documentation\n *\n * @param {Object} props - Lucide icons props and any valid SVG attribute\n *\n */\ndeclare class LucideAlignVerticalDistributeEnd extends LucideIconBase {\n static readonly icon: LucideIconData;\n protected readonly icon: i0.WritableSignal;\n static ɵfac: i0.ɵɵFactoryDeclaration;\n static ɵcmp: i0.ɵɵComponentDeclaration;\n}","originalLength":1521,"removedExports":[],"renderedExports":["LucideAlignVerticalDistributeEnd"],"renderedLength":1358},"/Users/eric.fennis/Development/lucide/packages/angular/dist/tmp-typings/icons/align-vertical-distribute-center.d.ts":{"code":"/**\n * @component @name AlignVerticalDistributeCenter\n * @description Lucide SVG icon component, renders SVG Element with children.\n *\n * @preview  - https://lucide.dev/icons/align-vertical-distribute-center\n * @see https://lucide.dev/guide/packages/angular - Documentation\n *\n * @param {Object} props - Lucide icons props and any valid SVG attribute\n *\n */\ndeclare class LucideAlignVerticalDistributeCenter extends LucideIconBase {\n static readonly icon: LucideIconData;\n protected readonly icon: i0.WritableSignal;\n static ɵfac: i0.ɵɵFactoryDeclaration;\n static ɵcmp: i0.ɵɵComponentDeclaration;\n}","originalLength":1599,"removedExports":[],"renderedExports":["LucideAlignVerticalDistributeCenter"],"renderedLength":1436},"/Users/eric.fennis/Development/lucide/packages/angular/dist/tmp-typings/icons/align-vertical-justify-end.d.ts":{"code":"/**\n * @component @name AlignVerticalJustifyEnd\n * @description Lucide SVG icon component, renders SVG Element with children.\n *\n * @preview  - https://lucide.dev/icons/align-vertical-justify-end\n * @see https://lucide.dev/guide/packages/angular - Documentation\n *\n * @param {Object} props - Lucide icons props and any valid SVG attribute\n *\n */\ndeclare class LucideAlignVerticalJustifyEnd extends LucideIconBase {\n static readonly icon: LucideIconData;\n protected readonly icon: i0.WritableSignal;\n static ɵfac: i0.ɵɵFactoryDeclaration;\n static ɵcmp: i0.ɵɵComponentDeclaration;\n}","originalLength":1471,"removedExports":[],"renderedExports":["LucideAlignVerticalJustifyEnd"],"renderedLength":1308},"/Users/eric.fennis/Development/lucide/packages/angular/dist/tmp-typings/icons/align-vertical-justify-center.d.ts":{"code":"/**\n * @component @name AlignVerticalJustifyCenter\n * @description Lucide SVG icon component, renders SVG Element with children.\n *\n * @preview  - https://lucide.dev/icons/align-vertical-justify-center\n * @see https://lucide.dev/guide/packages/angular - Documentation\n *\n * @param {Object} props - Lucide icons props and any valid SVG attribute\n *\n */\ndeclare class LucideAlignVerticalJustifyCenter extends LucideIconBase {\n static readonly icon: LucideIconData;\n protected readonly icon: i0.WritableSignal;\n static ɵfac: i0.ɵɵFactoryDeclaration;\n static ɵcmp: i0.ɵɵComponentDeclaration;\n}","originalLength":1489,"removedExports":[],"renderedExports":["LucideAlignVerticalJustifyCenter"],"renderedLength":1326},"/Users/eric.fennis/Development/lucide/packages/angular/dist/tmp-typings/icons/align-vertical-justify-start.d.ts":{"code":"/**\n * @component @name AlignVerticalJustifyStart\n * @description Lucide SVG icon component, renders SVG Element with children.\n *\n * @preview  - https://lucide.dev/icons/align-vertical-justify-start\n * @see https://lucide.dev/guide/packages/angular - Documentation\n *\n * @param {Object} props - Lucide icons props and any valid SVG attribute\n *\n */\ndeclare class LucideAlignVerticalJustifyStart extends LucideIconBase {\n static readonly icon: LucideIconData;\n protected readonly icon: i0.WritableSignal;\n static ɵfac: i0.ɵɵFactoryDeclaration;\n static ɵcmp: i0.ɵɵComponentDeclaration;\n}","originalLength":1479,"removedExports":[],"renderedExports":["LucideAlignVerticalJustifyStart"],"renderedLength":1316},"/Users/eric.fennis/Development/lucide/packages/angular/dist/tmp-typings/icons/align-vertical-space-around.d.ts":{"code":"/**\n * @component @name AlignVerticalSpaceAround\n * @description Lucide SVG icon component, renders SVG Element with children.\n *\n * @preview  - https://lucide.dev/icons/align-vertical-space-around\n * @see https://lucide.dev/guide/packages/angular - Documentation\n *\n * @param {Object} props - Lucide icons props and any valid SVG attribute\n *\n */\ndeclare class LucideAlignVerticalSpaceAround extends LucideIconBase {\n static readonly icon: LucideIconData;\n protected readonly icon: i0.WritableSignal;\n static ɵfac: i0.ɵɵFactoryDeclaration;\n static ɵcmp: i0.ɵɵComponentDeclaration;\n}","originalLength":1437,"removedExports":[],"renderedExports":["LucideAlignVerticalSpaceAround"],"renderedLength":1274},"/Users/eric.fennis/Development/lucide/packages/angular/dist/tmp-typings/icons/align-vertical-space-between.d.ts":{"code":"/**\n * @component @name AlignVerticalSpaceBetween\n * @description Lucide SVG icon component, renders SVG Element with children.\n *\n * @preview  - https://lucide.dev/icons/align-vertical-space-between\n * @see https://lucide.dev/guide/packages/angular - Documentation\n *\n * @param {Object} props - Lucide icons props and any valid SVG attribute\n *\n */\ndeclare class LucideAlignVerticalSpaceBetween extends LucideIconBase {\n static readonly icon: LucideIconData;\n protected readonly icon: i0.WritableSignal;\n static ɵfac: i0.ɵɵFactoryDeclaration;\n static ɵcmp: i0.ɵɵComponentDeclaration;\n}","originalLength":1511,"removedExports":[],"renderedExports":["LucideAlignVerticalSpaceBetween"],"renderedLength":1348},"/Users/eric.fennis/Development/lucide/packages/angular/dist/tmp-typings/icons/ambulance.d.ts":{"code":"/**\n * @component @name Ambulance\n * @description Lucide SVG icon component, renders SVG Element with children.\n *\n * @preview  - https://lucide.dev/icons/ambulance\n * @see https://lucide.dev/guide/packages/angular - Documentation\n *\n * @param {Object} props - Lucide icons props and any valid SVG attribute\n *\n */\ndeclare class LucideAmbulance extends LucideIconBase {\n static readonly icon: LucideIconData;\n protected readonly icon: i0.WritableSignal;\n static ɵfac: i0.ɵɵFactoryDeclaration;\n static ɵcmp: i0.ɵɵComponentDeclaration;\n}","originalLength":1668,"removedExports":[],"renderedExports":["LucideAmbulance"],"renderedLength":1505},"/Users/eric.fennis/Development/lucide/packages/angular/dist/tmp-typings/icons/align-vertical-distribute-start.d.ts":{"code":"/**\n * @component @name AlignVerticalDistributeStart\n * @description Lucide SVG icon component, renders SVG Element with children.\n *\n * @preview  - https://lucide.dev/icons/align-vertical-distribute-start\n * @see https://lucide.dev/guide/packages/angular - Documentation\n *\n * @param {Object} props - Lucide icons props and any valid SVG attribute\n *\n */\ndeclare class LucideAlignVerticalDistributeStart extends LucideIconBase {\n static readonly icon: LucideIconData;\n protected readonly icon: i0.WritableSignal;\n static ɵfac: i0.ɵɵFactoryDeclaration;\n static ɵcmp: i0.ɵɵComponentDeclaration;\n}","originalLength":1529,"removedExports":[],"renderedExports":["LucideAlignVerticalDistributeStart"],"renderedLength":1366},"/Users/eric.fennis/Development/lucide/packages/angular/dist/tmp-typings/icons/ampersand.d.ts":{"code":"/**\n * @component @name Ampersand\n * @description Lucide SVG icon component, renders SVG Element with children.\n *\n * @preview  - https://lucide.dev/icons/ampersand\n * @see https://lucide.dev/guide/packages/angular - Documentation\n *\n * @param {Object} props - Lucide icons props and any valid SVG attribute\n *\n */\ndeclare class LucideAmpersand extends LucideIconBase {\n static readonly icon: LucideIconData;\n protected readonly icon: i0.WritableSignal;\n static ɵfac: i0.ɵɵFactoryDeclaration;\n static ɵcmp: i0.ɵɵComponentDeclaration;\n}","originalLength":1384,"removedExports":[],"renderedExports":["LucideAmpersand"],"renderedLength":1221},"/Users/eric.fennis/Development/lucide/packages/angular/dist/tmp-typings/icons/ampersands.d.ts":{"code":"/**\n * @component @name Ampersands\n * @description Lucide SVG icon component, renders SVG Element with children.\n *\n * @preview  - https://lucide.dev/icons/ampersands\n * @see https://lucide.dev/guide/packages/angular - Documentation\n *\n * @param {Object} props - Lucide icons props and any valid SVG attribute\n *\n */\ndeclare class LucideAmpersands extends LucideIconBase {\n static readonly icon: LucideIconData;\n protected readonly icon: i0.WritableSignal;\n static ɵfac: i0.ɵɵFactoryDeclaration;\n static ɵcmp: i0.ɵɵComponentDeclaration;\n}","originalLength":1474,"removedExports":[],"renderedExports":["LucideAmpersands"],"renderedLength":1311},"/Users/eric.fennis/Development/lucide/packages/angular/dist/tmp-typings/icons/amphora.d.ts":{"code":"/**\n * @component @name Amphora\n * @description Lucide SVG icon component, renders SVG Element with children.\n *\n * @preview  - https://lucide.dev/icons/amphora\n * @see https://lucide.dev/guide/packages/angular - Documentation\n *\n * @param {Object} props - Lucide icons props and any valid SVG attribute\n *\n */\ndeclare class LucideAmphora extends LucideIconBase {\n static readonly icon: LucideIconData;\n protected readonly icon: i0.WritableSignal;\n static ɵfac: i0.ɵɵFactoryDeclaration;\n static ɵcmp: i0.ɵɵComponentDeclaration;\n}","originalLength":1584,"removedExports":[],"renderedExports":["LucideAmphora"],"renderedLength":1421},"/Users/eric.fennis/Development/lucide/packages/angular/dist/tmp-typings/icons/anchor.d.ts":{"code":"/**\n * @component @name Anchor\n * @description Lucide SVG icon component, renders SVG Element with children.\n *\n * @preview  - https://lucide.dev/icons/anchor\n * @see https://lucide.dev/guide/packages/angular - Documentation\n *\n * @param {Object} props - Lucide icons props and any valid SVG attribute\n *\n */\ndeclare class LucideAnchor extends LucideIconBase {\n static readonly icon: LucideIconData;\n protected readonly icon: i0.WritableSignal;\n static ɵfac: i0.ɵɵFactoryDeclaration;\n static ɵcmp: i0.ɵɵComponentDeclaration;\n}","originalLength":1362,"removedExports":[],"renderedExports":["LucideAnchor"],"renderedLength":1199},"/Users/eric.fennis/Development/lucide/packages/angular/dist/tmp-typings/icons/antenna.d.ts":{"code":"/**\n * @component @name Antenna\n * @description Lucide SVG icon component, renders SVG Element with children.\n *\n * @preview  - https://lucide.dev/icons/antenna\n * @see https://lucide.dev/guide/packages/angular - Documentation\n *\n * @param {Object} props - Lucide icons props and any valid SVG attribute\n *\n */\ndeclare class LucideAntenna extends LucideIconBase {\n static readonly icon: LucideIconData;\n protected readonly icon: i0.WritableSignal;\n static ɵfac: i0.ɵɵFactoryDeclaration;\n static ɵcmp: i0.ɵɵComponentDeclaration;\n}","originalLength":1404,"removedExports":[],"renderedExports":["LucideAntenna"],"renderedLength":1241},"/Users/eric.fennis/Development/lucide/packages/angular/dist/tmp-typings/icons/anvil.d.ts":{"code":"/**\n * @component @name Anvil\n * @description Lucide SVG icon component, renders SVG Element with children.\n *\n * @preview  - https://lucide.dev/icons/anvil\n * @see https://lucide.dev/guide/packages/angular - Documentation\n *\n * @param {Object} props - Lucide icons props and any valid SVG attribute\n *\n */\ndeclare class LucideAnvil extends LucideIconBase {\n static readonly icon: LucideIconData;\n protected readonly icon: i0.WritableSignal;\n static ɵfac: i0.ɵɵFactoryDeclaration;\n static ɵcmp: i0.ɵɵComponentDeclaration;\n}","originalLength":1536,"removedExports":[],"renderedExports":["LucideAnvil"],"renderedLength":1373},"/Users/eric.fennis/Development/lucide/packages/angular/dist/tmp-typings/icons/aperture.d.ts":{"code":"/**\n * @component @name Aperture\n * @description Lucide SVG icon component, renders SVG Element with children.\n *\n * @preview  - https://lucide.dev/icons/aperture\n * @see https://lucide.dev/guide/packages/angular - Documentation\n *\n * @param {Object} props - Lucide icons props and any valid SVG attribute\n *\n */\ndeclare class LucideAperture extends LucideIconBase {\n static readonly icon: LucideIconData;\n protected readonly icon: i0.WritableSignal;\n static ɵfac: i0.ɵɵFactoryDeclaration;\n static ɵcmp: i0.ɵɵComponentDeclaration;\n}","originalLength":1514,"removedExports":[],"renderedExports":["LucideAperture"],"renderedLength":1351},"/Users/eric.fennis/Development/lucide/packages/angular/dist/tmp-typings/icons/app-window-mac.d.ts":{"code":"/**\n * @component @name AppWindowMac\n * @description Lucide SVG icon component, renders SVG Element with children.\n *\n * @preview  - https://lucide.dev/icons/app-window-mac\n * @see https://lucide.dev/guide/packages/angular - Documentation\n *\n * @param {Object} props - Lucide icons props and any valid SVG attribute\n *\n */\ndeclare class LucideAppWindowMac extends LucideIconBase {\n static readonly icon: LucideIconData;\n protected readonly icon: i0.WritableSignal;\n static ɵfac: i0.ɵɵFactoryDeclaration;\n static ɵcmp: i0.ɵɵComponentDeclaration;\n}","originalLength":1400,"removedExports":[],"renderedExports":["LucideAppWindowMac"],"renderedLength":1237},"/Users/eric.fennis/Development/lucide/packages/angular/dist/tmp-typings/icons/app-window.d.ts":{"code":"/**\n * @component @name AppWindow\n * @description Lucide SVG icon component, renders SVG Element with children.\n *\n * @preview  - https://lucide.dev/icons/app-window\n * @see https://lucide.dev/guide/packages/angular - Documentation\n *\n * @param {Object} props - Lucide icons props and any valid SVG attribute\n *\n */\ndeclare class LucideAppWindow extends LucideIconBase {\n static readonly icon: LucideIconData;\n protected readonly icon: i0.WritableSignal;\n static ɵfac: i0.ɵɵFactoryDeclaration;\n static ɵcmp: i0.ɵɵComponentDeclaration;\n}","originalLength":1373,"removedExports":[],"renderedExports":["LucideAppWindow"],"renderedLength":1210},"/Users/eric.fennis/Development/lucide/packages/angular/dist/tmp-typings/icons/apple.d.ts":{"code":"/**\n * @component @name Apple\n * @description Lucide SVG icon component, renders SVG Element with children.\n *\n * @preview  - https://lucide.dev/icons/apple\n * @see https://lucide.dev/guide/packages/angular - Documentation\n *\n * @param {Object} props - Lucide icons props and any valid SVG attribute\n *\n */\ndeclare class LucideApple extends LucideIconBase {\n static readonly icon: LucideIconData;\n protected readonly icon: i0.WritableSignal;\n static ɵfac: i0.ɵɵFactoryDeclaration;\n static ɵcmp: i0.ɵɵComponentDeclaration;\n}","originalLength":1464,"removedExports":[],"renderedExports":["LucideApple"],"renderedLength":1301},"/Users/eric.fennis/Development/lucide/packages/angular/dist/tmp-typings/icons/archive-x.d.ts":{"code":"/**\n * @component @name ArchiveX\n * @description Lucide SVG icon component, renders SVG Element with children.\n *\n * @preview  - https://lucide.dev/icons/archive-x\n * @see https://lucide.dev/guide/packages/angular - Documentation\n *\n * @param {Object} props - Lucide icons props and any valid SVG attribute\n *\n */\ndeclare class LucideArchiveX extends LucideIconBase {\n static readonly icon: LucideIconData;\n protected readonly icon: i0.WritableSignal;\n static ɵfac: i0.ɵɵFactoryDeclaration;\n static ɵcmp: i0.ɵɵComponentDeclaration;\n}","originalLength":1423,"removedExports":[],"renderedExports":["LucideArchiveX"],"renderedLength":1260},"/Users/eric.fennis/Development/lucide/packages/angular/dist/tmp-typings/icons/archive-restore.d.ts":{"code":"/**\n * @component @name ArchiveRestore\n * @description Lucide SVG icon component, renders SVG Element with children.\n *\n * @preview  - https://lucide.dev/icons/archive-restore\n * @see https://lucide.dev/guide/packages/angular - Documentation\n *\n * @param {Object} props - Lucide icons props and any valid SVG attribute\n *\n */\ndeclare class LucideArchiveRestore extends LucideIconBase {\n static readonly icon: LucideIconData;\n protected readonly icon: i0.WritableSignal;\n static ɵfac: i0.ɵɵFactoryDeclaration;\n static ɵcmp: i0.ɵɵComponentDeclaration;\n}","originalLength":1487,"removedExports":[],"renderedExports":["LucideArchiveRestore"],"renderedLength":1324},"/Users/eric.fennis/Development/lucide/packages/angular/dist/tmp-typings/icons/archive.d.ts":{"code":"/**\n * @component @name Archive\n * @description Lucide SVG icon component, renders SVG Element with children.\n *\n * @preview  - https://lucide.dev/icons/archive\n * @see https://lucide.dev/guide/packages/angular - Documentation\n *\n * @param {Object} props - Lucide icons props and any valid SVG attribute\n *\n */\ndeclare class LucideArchive extends LucideIconBase {\n static readonly icon: LucideIconData;\n protected readonly icon: i0.WritableSignal;\n static ɵfac: i0.ɵɵFactoryDeclaration;\n static ɵcmp: i0.ɵɵComponentDeclaration;\n}","originalLength":1376,"removedExports":[],"renderedExports":["LucideArchive"],"renderedLength":1213},"/Users/eric.fennis/Development/lucide/packages/angular/dist/tmp-typings/icons/armchair.d.ts":{"code":"/**\n * @component @name Armchair\n * @description Lucide SVG icon component, renders SVG Element with children.\n *\n * @preview  - https://lucide.dev/icons/armchair\n * @see https://lucide.dev/guide/packages/angular - Documentation\n *\n * @param {Object} props - Lucide icons props and any valid SVG attribute\n *\n */\ndeclare class LucideArmchair extends LucideIconBase {\n static readonly icon: LucideIconData;\n protected readonly icon: i0.WritableSignal;\n static ɵfac: i0.ɵɵFactoryDeclaration;\n static ɵcmp: i0.ɵɵComponentDeclaration;\n}","originalLength":1510,"removedExports":[],"renderedExports":["LucideArmchair"],"renderedLength":1347},"/Users/eric.fennis/Development/lucide/packages/angular/dist/tmp-typings/icons/arrow-big-down-dash.d.ts":{"code":"/**\n * @component @name ArrowBigDownDash\n * @description Lucide SVG icon component, renders SVG Element with children.\n *\n * @preview  - https://lucide.dev/icons/arrow-big-down-dash\n * @see https://lucide.dev/guide/packages/angular - Documentation\n *\n * @param {Object} props - Lucide icons props and any valid SVG attribute\n *\n */\ndeclare class LucideArrowBigDownDash extends LucideIconBase {\n static readonly icon: LucideIconData;\n protected readonly icon: i0.WritableSignal;\n static ɵfac: i0.ɵɵFactoryDeclaration;\n static ɵcmp: i0.ɵɵComponentDeclaration;\n}","originalLength":1537,"removedExports":[],"renderedExports":["LucideArrowBigDownDash"],"renderedLength":1374},"/Users/eric.fennis/Development/lucide/packages/angular/dist/tmp-typings/icons/arrow-big-down.d.ts":{"code":"/**\n * @component @name ArrowBigDown\n * @description Lucide SVG icon component, renders SVG Element with children.\n *\n * @preview  - https://lucide.dev/icons/arrow-big-down\n * @see https://lucide.dev/guide/packages/angular - Documentation\n *\n * @param {Object} props - Lucide icons props and any valid SVG attribute\n *\n */\ndeclare class LucideArrowBigDown extends LucideIconBase {\n static readonly icon: LucideIconData;\n protected readonly icon: i0.WritableSignal;\n static ɵfac: i0.ɵɵFactoryDeclaration;\n static ɵcmp: i0.ɵɵComponentDeclaration;\n}","originalLength":1472,"removedExports":[],"renderedExports":["LucideArrowBigDown"],"renderedLength":1309},"/Users/eric.fennis/Development/lucide/packages/angular/dist/tmp-typings/icons/arrow-big-left-dash.d.ts":{"code":"/**\n * @component @name ArrowBigLeftDash\n * @description Lucide SVG icon component, renders SVG Element with children.\n *\n * @preview  - https://lucide.dev/icons/arrow-big-left-dash\n * @see https://lucide.dev/guide/packages/angular - Documentation\n *\n * @param {Object} props - Lucide icons props and any valid SVG attribute\n *\n */\ndeclare class LucideArrowBigLeftDash extends LucideIconBase {\n static readonly icon: LucideIconData;\n protected readonly icon: i0.WritableSignal;\n static ɵfac: i0.ɵɵFactoryDeclaration;\n static ɵcmp: i0.ɵɵComponentDeclaration;\n}","originalLength":1537,"removedExports":[],"renderedExports":["LucideArrowBigLeftDash"],"renderedLength":1374},"/Users/eric.fennis/Development/lucide/packages/angular/dist/tmp-typings/icons/arrow-big-left.d.ts":{"code":"/**\n * @component @name ArrowBigLeft\n * @description Lucide SVG icon component, renders SVG Element with children.\n *\n * @preview  - https://lucide.dev/icons/arrow-big-left\n * @see https://lucide.dev/guide/packages/angular - Documentation\n *\n * @param {Object} props - Lucide icons props and any valid SVG attribute\n *\n */\ndeclare class LucideArrowBigLeft extends LucideIconBase {\n static readonly icon: LucideIconData;\n protected readonly icon: i0.WritableSignal;\n static ɵfac: i0.ɵɵFactoryDeclaration;\n static ɵcmp: i0.ɵɵComponentDeclaration;\n}","originalLength":1484,"removedExports":[],"renderedExports":["LucideArrowBigLeft"],"renderedLength":1321},"/Users/eric.fennis/Development/lucide/packages/angular/dist/tmp-typings/icons/arrow-big-right-dash.d.ts":{"code":"/**\n * @component @name ArrowBigRightDash\n * @description Lucide SVG icon component, renders SVG Element with children.\n *\n * @preview  - https://lucide.dev/icons/arrow-big-right-dash\n * @see https://lucide.dev/guide/packages/angular - Documentation\n *\n * @param {Object} props - Lucide icons props and any valid SVG attribute\n *\n */\ndeclare class LucideArrowBigRightDash extends LucideIconBase {\n static readonly icon: LucideIconData;\n protected readonly icon: i0.WritableSignal;\n static ɵfac: i0.ɵɵFactoryDeclaration;\n static ɵcmp: i0.ɵɵComponentDeclaration;\n}","originalLength":1539,"removedExports":[],"renderedExports":["LucideArrowBigRightDash"],"renderedLength":1376},"/Users/eric.fennis/Development/lucide/packages/angular/dist/tmp-typings/icons/arrow-big-right.d.ts":{"code":"/**\n * @component @name ArrowBigRight\n * @description Lucide SVG icon component, renders SVG Element with children.\n *\n * @preview  - https://lucide.dev/icons/arrow-big-right\n * @see https://lucide.dev/guide/packages/angular - Documentation\n *\n * @param {Object} props - Lucide icons props and any valid SVG attribute\n *\n */\ndeclare class LucideArrowBigRight extends LucideIconBase {\n static readonly icon: LucideIconData;\n protected readonly icon: i0.WritableSignal;\n static ɵfac: i0.ɵɵFactoryDeclaration;\n static ɵcmp: i0.ɵɵComponentDeclaration;\n}","originalLength":1486,"removedExports":[],"renderedExports":["LucideArrowBigRight"],"renderedLength":1323},"/Users/eric.fennis/Development/lucide/packages/angular/dist/tmp-typings/icons/arrow-big-up-dash.d.ts":{"code":"/**\n * @component @name ArrowBigUpDash\n * @description Lucide SVG icon component, renders SVG Element with children.\n *\n * @preview  - https://lucide.dev/icons/arrow-big-up-dash\n * @see https://lucide.dev/guide/packages/angular - Documentation\n *\n * @param {Object} props - Lucide icons props and any valid SVG attribute\n *\n */\ndeclare class LucideArrowBigUpDash extends LucideIconBase {\n static readonly icon: LucideIconData;\n protected readonly icon: i0.WritableSignal;\n static ɵfac: i0.ɵɵFactoryDeclaration;\n static ɵcmp: i0.ɵɵComponentDeclaration;\n}","originalLength":1529,"removedExports":[],"renderedExports":["LucideArrowBigUpDash"],"renderedLength":1366},"/Users/eric.fennis/Development/lucide/packages/angular/dist/tmp-typings/icons/arrow-big-up.d.ts":{"code":"/**\n * @component @name ArrowBigUp\n * @description Lucide SVG icon component, renders SVG Element with children.\n *\n * @preview  - https://lucide.dev/icons/arrow-big-up\n * @see https://lucide.dev/guide/packages/angular - Documentation\n *\n * @param {Object} props - Lucide icons props and any valid SVG attribute\n *\n */\ndeclare class LucideArrowBigUp extends LucideIconBase {\n static readonly icon: LucideIconData;\n protected readonly icon: i0.WritableSignal;\n static ɵfac: i0.ɵɵFactoryDeclaration;\n static ɵcmp: i0.ɵɵComponentDeclaration;\n}","originalLength":1464,"removedExports":[],"renderedExports":["LucideArrowBigUp"],"renderedLength":1301},"/Users/eric.fennis/Development/lucide/packages/angular/dist/tmp-typings/icons/arrow-down-1-0.d.ts":{"code":"/**\n * @component @name ArrowDown10\n * @description Lucide SVG icon component, renders SVG Element with children.\n *\n * @preview  - https://lucide.dev/icons/arrow-down-1-0\n * @see https://lucide.dev/guide/packages/angular - Documentation\n *\n * @param {Object} props - Lucide icons props and any valid SVG attribute\n *\n */\ndeclare class LucideArrowDown10 extends LucideIconBase {\n static readonly icon: LucideIconData;\n protected readonly icon: i0.WritableSignal;\n static ɵfac: i0.ɵɵFactoryDeclaration;\n static ɵcmp: i0.ɵɵComponentDeclaration;\n}","originalLength":1435,"removedExports":[],"renderedExports":["LucideArrowDown10"],"renderedLength":1272},"/Users/eric.fennis/Development/lucide/packages/angular/dist/tmp-typings/icons/arrow-down-0-1.d.ts":{"code":"/**\n * @component @name ArrowDown01\n * @description Lucide SVG icon component, renders SVG Element with children.\n *\n * @preview  - https://lucide.dev/icons/arrow-down-0-1\n * @see https://lucide.dev/guide/packages/angular - Documentation\n *\n * @param {Object} props - Lucide icons props and any valid SVG attribute\n *\n */\ndeclare class LucideArrowDown01 extends LucideIconBase {\n static readonly icon: LucideIconData;\n protected readonly icon: i0.WritableSignal;\n static ɵfac: i0.ɵɵFactoryDeclaration;\n static ɵcmp: i0.ɵɵComponentDeclaration;\n}","originalLength":1435,"removedExports":[],"renderedExports":["LucideArrowDown01"],"renderedLength":1272},"/Users/eric.fennis/Development/lucide/packages/angular/dist/tmp-typings/icons/arrow-down-a-z.d.ts":{"code":"/**\n * @component @name ArrowDownAZ\n * @description Lucide SVG icon component, renders SVG Element with children.\n *\n * @preview  - https://lucide.dev/icons/arrow-down-a-z\n * @see https://lucide.dev/guide/packages/angular - Documentation\n *\n * @param {Object} props - Lucide icons props and any valid SVG attribute\n *\n */\ndeclare class LucideArrowDownAZ extends LucideIconBase {\n static readonly icon: LucideIconData;\n protected readonly icon: i0.WritableSignal;\n static ɵfac: i0.ɵɵFactoryDeclaration;\n static ɵcmp: i0.ɵɵComponentDeclaration;\n}\n/**\n * @deprecated\n * @see LucideArrowDownAZ\n */\ndeclare const LucideArrowDownAz: typeof LucideArrowDownAZ;","originalLength":1570,"removedExports":[],"renderedExports":["LucideArrowDownAZ","LucideArrowDownAz"],"renderedLength":1400},"/Users/eric.fennis/Development/lucide/packages/angular/dist/tmp-typings/icons/arrow-down-from-line.d.ts":{"code":"/**\n * @component @name ArrowDownFromLine\n * @description Lucide SVG icon component, renders SVG Element with children.\n *\n * @preview  - https://lucide.dev/icons/arrow-down-from-line\n * @see https://lucide.dev/guide/packages/angular - Documentation\n *\n * @param {Object} props - Lucide icons props and any valid SVG attribute\n *\n */\ndeclare class LucideArrowDownFromLine extends LucideIconBase {\n static readonly icon: LucideIconData;\n protected readonly icon: i0.WritableSignal;\n static ɵfac: i0.ɵɵFactoryDeclaration;\n static ɵcmp: i0.ɵɵComponentDeclaration;\n}","originalLength":1363,"removedExports":[],"renderedExports":["LucideArrowDownFromLine"],"renderedLength":1200},"/Users/eric.fennis/Development/lucide/packages/angular/dist/tmp-typings/icons/arrow-down-left.d.ts":{"code":"/**\n * @component @name ArrowDownLeft\n * @description Lucide SVG icon component, renders SVG Element with children.\n *\n * @preview  - https://lucide.dev/icons/arrow-down-left\n * @see https://lucide.dev/guide/packages/angular - Documentation\n *\n * @param {Object} props - Lucide icons props and any valid SVG attribute\n *\n */\ndeclare class LucideArrowDownLeft extends LucideIconBase {\n static readonly icon: LucideIconData;\n protected readonly icon: i0.WritableSignal;\n static ɵfac: i0.ɵɵFactoryDeclaration;\n static ɵcmp: i0.ɵɵComponentDeclaration;\n}","originalLength":1306,"removedExports":[],"renderedExports":["LucideArrowDownLeft"],"renderedLength":1143},"/Users/eric.fennis/Development/lucide/packages/angular/dist/tmp-typings/icons/arrow-down-narrow-wide.d.ts":{"code":"/**\n * @component @name ArrowDownNarrowWide\n * @description Lucide SVG icon component, renders SVG Element with children.\n *\n * @preview  - https://lucide.dev/icons/arrow-down-narrow-wide\n * @see https://lucide.dev/guide/packages/angular - Documentation\n *\n * @param {Object} props - Lucide icons props and any valid SVG attribute\n *\n */\ndeclare class LucideArrowDownNarrowWide extends LucideIconBase {\n static readonly icon: LucideIconData;\n protected readonly icon: i0.WritableSignal;\n static ɵfac: i0.ɵɵFactoryDeclaration;\n static ɵcmp: i0.ɵɵComponentDeclaration;\n}","originalLength":1439,"removedExports":[],"renderedExports":["LucideArrowDownNarrowWide"],"renderedLength":1276},"/Users/eric.fennis/Development/lucide/packages/angular/dist/tmp-typings/icons/arrow-down-right.d.ts":{"code":"/**\n * @component @name ArrowDownRight\n * @description Lucide SVG icon component, renders SVG Element with children.\n *\n * @preview  - https://lucide.dev/icons/arrow-down-right\n * @see https://lucide.dev/guide/packages/angular - Documentation\n *\n * @param {Object} props - Lucide icons props and any valid SVG attribute\n *\n */\ndeclare class LucideArrowDownRight extends LucideIconBase {\n static readonly icon: LucideIconData;\n protected readonly icon: i0.WritableSignal;\n static ɵfac: i0.ɵɵFactoryDeclaration;\n static ɵcmp: i0.ɵɵComponentDeclaration
-
-
-
See this icon in action
diff --git a/docs/.vitepress/theme/components/icons/IconsCategoryOverview.vue b/docs/.vitepress/theme/components/icons/IconsCategoryOverview.vue
index b47be6481..1fdece4ba 100644
--- a/docs/.vitepress/theme/components/icons/IconsCategoryOverview.vue
+++ b/docs/.vitepress/theme/components/icons/IconsCategoryOverview.vue
@@ -1,5 +1,5 @@
@@ -150,6 +182,7 @@ function handleCloseDrawer() {
{
if (containerWidth.value === 0) return 120;
@@ -32,9 +50,14 @@ const props = defineProps<{
}>();
const activeIconName = ref(null);
+const selectedSort = ref(SORTING[0])
-const { execute: fetchTags, data: tags } = useFetchTags();
-const { execute: fetchCategories, data: categories } = useFetchCategories();
+const { execute: fetchTags, data: tags, isFetching: isFetchingTags } = useFetchTags();
+const {
+ execute: fetchCategories,
+ data: categories,
+ isFetching: isFetchingCategories,
+} = useFetchCategories();
const overviewEl = ref(null);
const { width: containerWidth } = useElementSize(overviewEl);
@@ -43,12 +66,29 @@ const columnSize = computed(() => {
return Math.floor(containerWidth.value / (ICON_SIZE + ICON_GRID_GAP));
});
+const sortedIcons = computed(() => {
+ switch (selectedSort.value.value) {
+ case 'popularity':
+ return [...props.icons].sort((a, b) => (b.popularity || 0) - (a.popularity || 0));
+ case 'release-date':
+ return [...props.icons].sort((a, b) => {
+ const aDate = a.createdRelease?.date ? new Date(a.createdRelease.date).getTime() : 0;
+ const bDate = b.createdRelease?.date ? new Date(b.createdRelease.date).getTime() : 0;
+ return bDate - aDate;
+ });
+ case 'name':
+ return [...props.icons].sort((a, b) => a.name.localeCompare(b.name));
+ default:
+ return props.icons;
+ }
+});
+
const mappedIcons = computed(() => {
if (tags.value == null) {
- return props.icons;
+ return sortedIcons.value;
}
- return props.icons.map((icon) => {
+ return sortedIcons.value.map((icon) => {
const iconTags = tags.value[icon.name];
const iconCategories = categories.value?.[icon.name] ?? [];
@@ -68,11 +108,15 @@ const { shortcutText: kbdSearchShortcut } = useSearchShortcut(() => {
const searchResults = useSearch(searchQueryDebounced, mappedIcons, [
{ name: 'name', weight: 3 },
- { name: 'aliases', weight: 3 },
+ { name: 'aliases', weight: 8 },
{ name: 'tags', weight: 2 },
{ name: 'categories', weight: 1 },
]);
+
const searchPlaceholder = useSearchPlaceholder(searchQuery, searchResults);
+const isSearchMetadataLoading = computed(
+ () => searchQuery.value.length > 0 && (tags.value == null || categories.value == null),
+);
const chunkedIcons = computed(() => {
return chunkArray(searchResults.value, columnSize.value);
@@ -98,15 +142,21 @@ function setActiveIconName(name: string) {
activeIconName.value = name;
}
-function onFocusSearchInput() {
- if (tags.value == null) {
- fetchTags();
+function loadSearchMetadata() {
+ if (tags.value == null && !isFetchingTags.value) {
+ void fetchTags();
}
- if (categories.value == null) {
- fetchCategories();
+ if (categories.value == null && !isFetchingCategories.value) {
+ void fetchCategories();
}
}
+watch(searchQuery, (searchString) => {
+ if (searchString !== '') {
+ loadSearchMetadata();
+ }
+});
+
const NoResults = defineAsyncComponent(() => import('./NoResults.vue'));
const IconDetailOverlay = defineAsyncComponent(() => import('./IconDetailOverlay.vue'));
@@ -118,7 +168,14 @@ watch(searchQueryDebounced, () => {
function handleCloseDrawer() {
setActiveIconName('');
- window.history.pushState({}, '', '/icons/');
+ const url = new URL(window.location);
+ url.pathname = '/icons/';
+
+ if (searchQueryDebounced.value) {
+ url.searchParams.set('search', searchQueryDebounced.value);
+ }
+
+ window.history.pushState({}, '', url);
}
@@ -126,6 +183,7 @@ function handleCloseDrawer() {
diff --git a/docs/.vitepress/theme/components/icons/NoResults.vue b/docs/.vitepress/theme/components/icons/NoResults.vue
index 7d4bbbd6b..e11adf309 100644
--- a/docs/.vitepress/theme/components/icons/NoResults.vue
+++ b/docs/.vitepress/theme/components/icons/NoResults.vue
@@ -20,7 +20,7 @@ import {
testTubeDiagonal,
sword,
} from '../../../data/iconNodes';
-import createLucideIcon from 'lucide-vue-next/src/createLucideIcon';
+import createLucideIcon from '@lucide/vue/src/createLucideIcon';
import { useEventListener } from '@vueuse/core';
import VPButton from 'vitepress/dist/client/theme-default/components/VPButton.vue';
import { IconNode } from '../../types';
diff --git a/docs/.vitepress/theme/components/icons/SidebarIconCustomizer.vue b/docs/.vitepress/theme/components/icons/SidebarIconCustomizer.vue
index 169d47efb..68b2e50b4 100644
--- a/docs/.vitepress/theme/components/icons/SidebarIconCustomizer.vue
+++ b/docs/.vitepress/theme/components/icons/SidebarIconCustomizer.vue
@@ -73,13 +73,11 @@ const customizingActive = computed(() => {
id="icon-color"
label="Color"
>
-
- {
}
.color-picker {
- margin-left: auto;
+ width: 100%;
}
diff --git a/docs/.vitepress/theme/components/icons/StickyBar.vue b/docs/.vitepress/theme/components/icons/StickyBar.vue
index 8c0350409..1a7434fb1 100644
--- a/docs/.vitepress/theme/components/icons/StickyBar.vue
+++ b/docs/.vitepress/theme/components/icons/StickyBar.vue
@@ -9,20 +9,63 @@
margin-bottom: 16px;
position: sticky;
z-index: 10;
- top: 48px;
- padding-top: 24px;
- margin-top: -32px;
+ top: var(--vp-layout-top-height);
width: 100%;
display: flex;
margin-bottom: 32px;
background: var(--vp-c-bg);
box-shadow: 0 16px 24px var(--vp-c-bg);
+ gap: 16px;
+}
+
+.search-bar :deep(.select-button) {
+ padding: 11px 14px;
+ background-color: var(--vp-c-bg-alt);
+ color: var(--vp-c-text-2);
+ flex-shrink: 0;
+ flex: 1;
+ font-weight: 500;
+ cursor: pointer;
+}
+
+.search-bar :deep(.select-button):hover,
+.search-bar :deep(.select-button):focus {
+ border-color: var(--vp-c-brand);
+ background: var(--vp-c-bg-alt);
+}
+
+.search-bar :deep(.select-options) {
+ min-width: 160px;
+}
+
+.search-bar :deep(.select-option) {
+ padding-right: 36px;
+ padding-left: 8px;
+}
+
+.search-bar :deep(.select-icon) {
+ display: none;
+}
+
+.search-bar :deep(.select-button) .select-text {
+ display: none;
+}
+
+@media (min-width: 640px) {
+ .search-bar :deep(.select-button) {
+ padding: 11px 16px 11px 16px;
+ }
+
+ .search-bar :deep(.select-button) .select-text {
+ display: block;
+ }
}
@media (min-width: 960px) {
.search-bar {
padding-top: 32px;
- top: 64px;
+ margin-top: calc((var(--vp-layout-top-height, 0px) + 32px) * -1);
+ top: calc(var(--vp-layout-top-height, 0px) + 64px);
}
}
diff --git a/docs/.vitepress/theme/components/overrides/Hero.vue b/docs/.vitepress/theme/components/overrides/Hero.vue
new file mode 100644
index 000000000..d0c524b3d
--- /dev/null
+++ b/docs/.vitepress/theme/components/overrides/Hero.vue
@@ -0,0 +1,379 @@
+
+
+
+
+
+
+
+ Search {{ data.iconsCount }} icons...
+
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/overrides/HeroMatrix.vue b/docs/.vitepress/theme/components/overrides/HeroMatrix.vue
new file mode 100644
index 000000000..61865665c
--- /dev/null
+++ b/docs/.vitepress/theme/components/overrides/HeroMatrix.vue
@@ -0,0 +1,248 @@
+
+
+
+
```
+
+## Accessibility
+
+By default, we hide icons from screen readers using `aria-hidden="true"`.
+
+You can add accessibility attributes using aria-labels.
+
+```vue
+
+
+
+
+ This is my house
+
+
+// or
+
+
+
+);
+```
+
+This will apply the `color`, `size` and `strokeWidth` props to all icons that are children of the `LucideProvider`.
+
+
+## Style by using CSS
+Styling icons is easy to accomplish using CSS.
+
+Every icon has a class attribute applied called `lucide`. This class name can be used in the CSS file to target all icons that are being used within the app.
+
+- The **color** of the icons can be changed using the [`color`](https://developer.mozilla.org/en-US/docs/Web/CSS/color) CSS property.
+- The **size** of the icons can be changed using [`width`](https://developer.mozilla.org/en-US/docs/Web/CSS/width) and [`height`](https://developer.mozilla.org/en-US/docs/Web/CSS/height) CSS properties.
+- The **stroke width** of the icons can be changed using the [`stroke-width`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-width) CSS property.
+
+::: sandpack {editorHeight=400 editorWidthPercentage=60 dependencies="lucide-preact"}
+
+```css icon.css [active]
+.lucide {
+ /* Change this! */
+ color: #ffadff;
+ width: 48px;
+ height: 48px;
+ stroke-width: 1px;
+}
+
+.grid {
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr;
+ grid-template-rows: 1fr 1fr 1fr;
+ gap: 6px;
+}
+```
+
+```jsx App.js
+import {
+ CakeSlice,
+ Candy,
+ Apple,
+ Cookie,
+ Martini,
+ IceCream2,
+ Sandwich,
+ Wine,
+ Dessert,
+} from "lucide-preact";
+import { h } from "preact";
+import "./icon.css";
+
+function App() {
+ return (
+ ;
+```
+
+### Using `LucideIcon`
+
+You can use the `LucideIcon` type when you need to work with icon components directly.
+
+```tsx
+import { type LucideIcon } from 'lucide-preact';
+
+interface ButtonProps {
+ icon: LucideIcon;
+ label: string;
+}
+
+const IconButton = ({ icon: Icon, label }: ButtonProps) => {
+ return (
+
+ );
+};
+
+export default IconButton;
+```
+
+## `IconNode`
+
+Type for the raw SVG structure of an icon. This is an array of SVG elements and their attributes to render the icon.
+Not commonly used directly in application code. But can be useful for advanced use cases, such as using custom icons or with Lucide Lab.
+
+```ts
+type IconNode = [elementName: string, attrs: Record][];
+```
+
+### Using `IconNode`
+You can use the `IconNode` type when you need to work with the raw SVG structure of an icon.
+
+```tsx
+import { type IconNode, Icon } from 'lucide-preact';
+
+const customIcon: IconNode = [
+ ['circle', { cx: 12, cy: 12, r: 10 }],
+ ['line', { x1: 12, y1: 8, x2: 12, y2: 12 }],
+ ['line', { x1: 12, y1: 16, x2: 12, y2: 16 }],
+];
+
+const MyCustomIcon = () => {
+ return (
+
+
diff --git a/docs/guide/preact/index.md b/docs/guide/preact/index.md
new file mode 100644
index 000000000..c664aec10
--- /dev/null
+++ b/docs/guide/preact/index.md
@@ -0,0 +1,53 @@
+---
+title: Lucide for Preact
+description: Lucide provides a Preact icon component library that makes it easy to integrate icons into your Preact applications. Each icon is available as a standalone Preact component, allowing for seamless integration and customization.
+nextPage:
+ - getting-started
+---
+
+
+
+
+
+
+# Lucide for Preact
+
+Lucide provides a Preact icon component library that makes it easy to integrate icons into your Preact applications.
+Each icon is available as a standalone Preact component, allowing for seamless integration and customization.
+
+List of features:
+- **Easy to Use**: Import icons as Preact components and use them directly in your Preact components with JSX.
+- **Customizable**: Adjust size, color, and other properties via props.
+- **Tree-shakable**: Only the icons you use are included in your final bundle
+- **TypeScript Support**: Fully typed components for better developer experience.
+
+## Overview
+
+
+
+
+### Basics
+{{''}}
+
+
+
+
+### Advanced
+{{''}}
+
+
+
+
+### Resources
+{{''}}
+
+
+
diff --git a/docs/guide/preact/migration.md b/docs/guide/preact/migration.md
new file mode 100644
index 000000000..72261e47e
--- /dev/null
+++ b/docs/guide/preact/migration.md
@@ -0,0 +1,20 @@
+# Migration from v0
+
+Brand icons are removed in v1. If you are using any of the following icons, you will need to replace them with a custom SVG or an alternative icon:
+
+- Chromium
+- Codepen
+- Codesandbox
+- Dribbble
+- Facebook
+- Figma
+- Framer
+- Github
+- Gitlab
+- Instagram
+- LinkedIn
+- Pocket
+- RailSymbol (based on the British Rail logo)
+- Slack
+
+We recommend to use the official SVG icons provided by the respective brands, most of them can be found on their websites or in their brand guidelines. Alternatively, you can use the icons from [Simple Icons](https://simpleicons.org/), which provides a large collection of brand icons. Also with links to the official Brand Guidelines and SVG icons.
diff --git a/docs/guide/react-native/advanced/aliased-names.md b/docs/guide/react-native/advanced/aliased-names.md
new file mode 100644
index 000000000..77699f55e
--- /dev/null
+++ b/docs/guide/react-native/advanced/aliased-names.md
@@ -0,0 +1,59 @@
+---
+title: Aliased Names - React Native
+description: Learn about the different import name styles available for Lucide icons in your React Native project and how to choose the one that best fits your needs.
+---
+# Aliased Names
+
+Some icons have multiple names. This is because we sometimes choose to rename them to make them more consistent with the rest of the icon set, or the name was not generic. For example, the `edit-2` icon is renamed to `pen` to make the name more generic, since it is just a pen icon.
+
+Beside these aliases, Lucide also includes prefixed and suffixed names to use within your project. This is to prevent import name collisions with other libraries or your own code.
+
+```tsx
+// These are all the same icon
+import {
+ House,
+ HouseIcon,
+ LucideHouse,
+} from "lucide-react-native";
+```
+
+## Choosing import name style
+
+If you want consistent imports across your project, or if you want to change the autocompletion of Lucide icons in your IDE, there an option to choose the import name style you prefer.
+
+This can be done by creating a custom module declaration file to override Lucide imports and turning off the autocomplete in your IDE.
+
+### Turn off autocomplete in your IDE
+
+```json [.vscode/settings.json]
+{
+ "js/ts.preferences.autoImportFileExcludePatterns": [
+ "lucide-react-native",
+ ]
+}
+```
+
+### Create a custom module declaration file
+
+Create a custom TypeScript declaration file that re-exports the preferred naming style:
+
+```ts [lucide-react-native.d.ts]
+declare module "lucide-react-native" {
+ // Prefixed import names
+ export * from "lucide-react-native/dist/lucide-react-native.prefixed";
+ // or
+ // Suffixed import names
+ export * from "lucide-react-native/dist/lucide-react-native.suffixed";
+}
+```
+
+Place this file in your project root or in a directory included in your TypeScript configuration.
+A common approach is to create a `@types` folder and name the file `lucide-react-native.d.ts`.
+
+### Import name styles
+
+| Import Style | Available imports | Declaration file import |
+| ------------- | --------------------------- | ----------------------- |
+| Default | Home, HomeIcon, LucideHome | |
+| Prefixed | LucideHome | lucide-react-native.prefixed |
+| Suffixed | HomeIcon | lucide-react-native.suffixed |
diff --git a/docs/guide/react-native/advanced/combining-icons.md b/docs/guide/react-native/advanced/combining-icons.md
new file mode 100644
index 000000000..61fc7c615
--- /dev/null
+++ b/docs/guide/react-native/advanced/combining-icons.md
@@ -0,0 +1,136 @@
+---
+title: Combining icons - React Native
+description: Learn how to combine multiple icons into a single icon nested SVG elements in your React Native application.
+---
+
+# Combining icons
+
+You can combine multiple icons into a single icon by nesting SVG elements.
+This is useful if you want to create custom icons by combining existing ones.
+
+```SnackPlayer name=State&ext=js&dependencies=react-native-svg,lucide-react-native
+import React, {useState, useEffect} from 'react';
+import { View, StyleSheet } from 'react-native';
+import { Scan, User} from "lucide-react-native";
+
+const App = () => {
+ return (
+
+
+
+
+ );
+};
+
+const styles = StyleSheet.create({
+ container: {
+ height: '100%',
+ alignItems: 'center',
+ display: 'flex',
+ justifyContent: 'center'
+ },
+});
+
+export default App;
+```
+
+This is valid, since [SVGs can be nested](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/svg#nested_svg_element), and all SVG properties are supported on the icons.
+The `x` and `y` coordinates can be adjusted to position the icons as you like.
+
+::: info Limitation
+When combining icons, you need to make sure that the `x` and `y` coordinates are within the `viewBox` of the outer icon (24x24).
+:::
+
+## With native SVG elements
+
+You can also combine Lucide icons with native SVG elements to build custom icon variations.
+
+### Example with notification badge
+
+For example, you can add a notification badge to an icon by using the `circle` SVG element.
+
+```SnackPlayer name=State&ext=js&dependencies=react-native-svg,lucide-react-native
+import React, {useState, useEffect} from 'react';
+import { View, StyleSheet } from 'react-native';
+import { Mail } from "lucide-react-native";
+import { Circle } from 'react-native-svg';
+
+const App = () => {
+ const hasUnreadMessages = true;
+
+ return (
+
+
+ {hasUnreadMessages && (
+
+
+ );
+};
+
+const styles = StyleSheet.create({
+ container: {
+ height: '100%',
+ alignItems: 'center',
+ display: 'flex',
+ justifyContent: 'center'
+ },
+});
+
+export default App;
+```
+
+### Example with text element
+
+You can also use the `text` SVG element to add text to your icon.
+
+```SnackPlayer name=State&ext=js&dependencies=react-native-svg,lucide-react-native
+import React, {useState, useEffect} from 'react';
+import { View, StyleSheet } from 'react-native';
+import { File } from "lucide-react-native";
+import { Text } from 'react-native-svg';
+
+const App = () => {
+ const hasUnreadMessages = true;
+
+ return (
+
+
+
+ JS
+
+
+
+ );
+};
+
+const styles = StyleSheet.create({
+ container: {
+ height: '100%',
+ alignItems: 'center',
+ display: 'flex',
+ justifyContent: 'center'
+ },
+});
+
+export default App;
+```
diff --git a/docs/guide/react-native/advanced/filled-icons.md b/docs/guide/react-native/advanced/filled-icons.md
new file mode 100644
index 000000000..b5a0153b7
--- /dev/null
+++ b/docs/guide/react-native/advanced/filled-icons.md
@@ -0,0 +1,60 @@
+---
+title: Filled Icons - React Native
+description: Learn how to use fills with Lucide icons in your React Native application, and the limitations of using fills with Lucide icons.
+---
+
+# Filled Icons
+
+Fills are officially not supported.
+However, all SVG properties are available on all icons.
+Fill can still be used and will work fine on certain icons.
+
+Example with stars:
+
+```SnackPlayer name=State&ext=js&dependencies=react-native-svg,lucide-react-native
+import React, {useState, useEffect} from 'react';
+import { View, StyleSheet } from 'react-native';
+import { Star, StarHalf } from "lucide-react-native";
+
+const App = () => {
+ return (
+
+
+
+ { Array.from({ length: 5 }, () => (
+
+
+
+
+
+ );
+};
+
+const styles = StyleSheet.create({
+ container: {
+ height: '100%',
+ alignItems: 'center',
+ display: 'flex',
+ justifyContent: 'center'
+ },
+ starRating: {
+ position: 'relative',
+ },
+ stars: {
+ display: 'flex',
+ flexDirection: 'row',
+ gap: 4,
+ },
+ rating: {
+ position: 'absolute',
+ top: 0,
+ }
+});
+
+export default App;
+```
diff --git a/docs/guide/react-native/advanced/global-styling.md b/docs/guide/react-native/advanced/global-styling.md
new file mode 100644
index 000000000..f2a2b1f71
--- /dev/null
+++ b/docs/guide/react-native/advanced/global-styling.md
@@ -0,0 +1,28 @@
+---
+title: Global Styling - React Native
+description: Learn how to style all Lucide icons globally in your React Native application using CSS or the Lucide context provider.
+---
+# Global Styling
+
+Adjusting icons can be done by using [color](../basics/color.md), [size](../basics/sizing.md) and [stroke width](../basics/stroke-width.md).
+To style all icons globally, you can use a context provider.
+
+## Context Provider
+
+For global styling using a context provider, you can use the `LucideProvider` component that is provided by the `lucide-react-native` package.
+
+```tsx
+import { LucideProvider, Home } from 'lucide-react-native';
+
+const App = () => (
+
+
+);
+```
+
+This will apply the `color`, `size` and `strokeWidth` props to all icons that are children of the `LucideProvider`.
diff --git a/docs/guide/react-native/advanced/optimizations.md b/docs/guide/react-native/advanced/optimizations.md
new file mode 100644
index 000000000..01c1ec6ab
--- /dev/null
+++ b/docs/guide/react-native/advanced/optimizations.md
@@ -0,0 +1,56 @@
+---
+title: Optimizations - React Native
+description: Learn how to optimize the bundle size of your React Native and Expo web exports by tree-shaking Lucide icons.
+---
+
+# Optimizations
+
+By default you import icons from the `lucide-react-native` entry point:
+
+```jsx
+import { Camera } from 'lucide-react-native';
+```
+
+This is convenient, but it relies on the bundler to _tree-shake_ the entry point (a "barrel" file that re-exports every icon) so that only the icons you actually use end up in your bundle.
+
+On native platforms this is usually fine. On **web exports** it can be a problem, because the Metro bundler is currently not very good at tree-shaking barrel imports and may include **all** icons in your final bundle.
+
+## The Metro tree-shaking limitation
+
+When you build for web with Expo (`expo export --platform web`), Metro is used to bundle your JavaScript. Metro bundles modules on-demand and, by default, does not remove unused exports from a barrel file.
+
+This means an import like the one below can pull in the entire icon set, even though only a single icon is rendered:
+
+```jsx
+// May bundle every Lucide icon on web exports
+import { Camera } from 'lucide-react-native';
+```
+
+Expo documents an experimental optimization for [React Native web imports](https://docs.expo.dev/guides/tree-shaking/#react-native-web-imports) and for [removing unused imports and exports](https://docs.expo.dev/guides/tree-shaking/#remove-unused-imports-and-exports). In practice this tree-shaking does **not** currently work reliably for `lucide-react-native` barrel imports, so the unused icons are not removed from web exports.
+
+## Recommended: import icons individually
+
+To guarantee that only the icons you use are bundled — regardless of the bundler's tree-shaking capabilities — import each icon directly from its own module:
+
+```jsx
+import Camera from 'lucide-react-native/icons/camera';
+
+// Usage
+const App = () => {
+ return ;
+```
+
+### Using `LucideIcon`
+
+You can use the `LucideIcon` type when you need to work with icon components directly.
+
+```tsx
+import { type LucideIcon } from 'lucide-react-native';
+
+interface ButtonProps {
+ icon: LucideIcon;
+ label: string;
+}
+
+const IconButton = ({ icon: Icon, label }: ButtonProps) => {
+ return (
+
+ );
+};
+
+export default IconButton;
+```
+
+## `IconNode`
+
+Type for the raw SVG structure of an icon. This is an array of SVG elements and their attributes to render the icon.
+Not commonly used directly in application code. But can be useful for advanced use cases, such as using custom icons or with Lucide Lab.
+
+```ts
+type IconNode = [elementName: string, attrs: Record][];
+```
+
+### Using `IconNode`
+You can use the `IconNode` type when you need to work with the raw SVG structure of an icon.
+
+```tsx
+import { type IconNode, Icon } from 'lucide-react-native';
+
+const customIcon: IconNode = [
+ ['circle', { cx: 12, cy: 12, r: 10 }],
+ ['line', { x1: 12, y1: 8, x2: 12, y2: 12 }],
+ ['line', { x1: 12, y1: 16, x2: 12, y2: 16 }],
+];
+
+const MyCustomIcon = () => {
+ return (
+
+
+ );
+};
+
+export default App;
+```
diff --git a/docs/guide/react-native/basics/sizing.md b/docs/guide/react-native/basics/sizing.md
new file mode 100644
index 000000000..778b4f2c7
--- /dev/null
+++ b/docs/guide/react-native/basics/sizing.md
@@ -0,0 +1,60 @@
+---
+title: Sizing - React Native
+description: Learn how to adjust the size of icons in your React Native application using the `size` prop or by using CSS.
+---
+# Sizing
+
+By default, the size of all icons is `24px` by `24px`. The size is adjustable using the `size` prop and CSS.
+
+## Adjusting the icon size using the `size` prop
+
+```SnackPlayer name=State&ext=js&dependencies=react-native-svg,lucide-react-native
+import React, {useState, useEffect} from 'react';
+import { View } from 'react-native';
+import { Landmark } from "lucide-react-native";
+
+const style = { height: '100%', alignItems: 'center', display: 'flex', justifyContent: 'center' }
+
+const App = () => {
+ return (
+
+
+ );
+};
+
+export default App;
+```
+
+## Adjusting the icon size via the style prop
+
+The style properties `width` and `height` can be used to adjust the icon size.
+
+```SnackPlayer name=State&ext=js&dependencies=react-native-svg,lucide-react-native
+import React, {useState, useEffect} from 'react';
+import { View, StyleSheet } from 'react-native';
+import { Landmark } from "lucide-react-native";
+
+const styles = StyleSheet.create({
+ container: {
+ height: '100%',
+ alignItems: 'center',
+ display: 'flex',
+ justifyContent: 'center'
+ },
+ icon: {
+ width: 48,
+ height: 48
+ },
+});
+
+const App = () => {
+ return (
+
+
+ );
+};
+
+export default App;
+```
diff --git a/docs/guide/react-native/basics/stroke-width.md b/docs/guide/react-native/basics/stroke-width.md
new file mode 100644
index 000000000..1a8b6dffd
--- /dev/null
+++ b/docs/guide/react-native/basics/stroke-width.md
@@ -0,0 +1,80 @@
+---
+title: Stroke width - React Native
+description: Learn how to adjust the stroke width of icons in your React Native application using the `strokeWidth` prop or adjust the strokeWidth appearance using the `absoluteStrokeWidth` prop.
+---
+# Stroke width
+
+All icons are designed with SVG elements using strokes.
+These have a default stroke width of `2px`.
+
+The `strokeWidth` can be adjusted to create a different look of the icons.
+
+## Adjusting stroke width with `strokeWidth` prop
+
+```SnackPlayer name=State&ext=js&dependencies=react-native-svg,lucide-react-native
+import React, {useState, useEffect} from 'react';
+import { View } from 'react-native';
+import { FolderLock } from "lucide-react-native";
+
+const style = { height: '100%', alignItems: 'center', display: 'flex', justifyContent: 'center', backgroundColor: '#202127', color: '#fff' }
+
+const App = () => {
+ return (
+
+
+ );
+};
+
+export default App;
+```
+
+## Absolute stroke width
+
+When adjusting the `size` prop the size of the stroke width will be relative to the size of the icon, this is the default SVG behavior. The `absoluteStrokeWidth` prop is introduced to adjust this behavior to make the stroke width constant no matter the size of the icon.
+
+This means that when `absoluteStrokeWidth` is enabled and the `size` of the icons is set to `48px` the `strokeWidth` will still be `2px` on the screen.
+
+Note `2px` is the default stroke width for a Lucide icon, this can be adjusted to all sizes.
+
+
+
+### Adjusting stroke width with `absoluteStrokeWidth` prop
+
+Setting `absoluteStrokeWidth` to `true` will make the stroke width absolute.
+
+```SnackPlayer name=State&ext=js&dependencies=react-native-svg,lucide-react-native
+import React, {useState, useEffect} from 'react';
+import { View } from 'react-native';
+import { RollerCoaster } from "lucide-react-native";
+
+const style = { height: '100%', alignItems: 'center', display: 'flex', justifyContent: 'center', backgroundColor: '#202127', color: '#fff' }
+
+const App = () => {
+ return (
+
+
+ );
+};
+
+export default App;
+```
+
+
diff --git a/docs/guide/react-native/getting-started.md b/docs/guide/react-native/getting-started.md
new file mode 100644
index 000000000..eb1ee82a0
--- /dev/null
+++ b/docs/guide/react-native/getting-started.md
@@ -0,0 +1,81 @@
+---
+title: Getting started - React Native
+description: This guide will help you get started with Lucide in your React Native project.
+---
+
+
+# Getting started
+
+This guide will help you get started with Lucide in your React Native project.
+Make sure you have a React Native environment set up. If you don't have one yet, you can create a new React Native project using React Native CLI, Expo, or any other React Native boilerplate of your choice.
+
+## Installation
+
+First, ensure that you have `react-native-svg` (version between 12 and 15) installed. Then, install the package:
+
+::: code-group
+
+```sh [pnpm]
+pnpm add lucide-react-native
+```
+
+```sh [yarn]
+yarn add lucide-react-native
+```
+
+```sh [npm]
+npm install lucide-react-native
+```
+
+```sh [bun]
+bun add lucide-react-native
+```
+
+:::
+
+## Importing your first icon
+
+Lucide is built with ES Modules.
+
+Each icon can be imported as a React component, which renders an `react-native-svg` element.
+
+```jsx
+import { Camera } from 'lucide-react-native';
+
+// Usage
+const App = () => {
+ return
+
diff --git a/docs/guide/react-native/index.md b/docs/guide/react-native/index.md
new file mode 100644
index 000000000..a216d739a
--- /dev/null
+++ b/docs/guide/react-native/index.md
@@ -0,0 +1,71 @@
+---
+title: Lucide for React Native
+description: Lucide provides a React Native icon component library that makes it easy to integrate icons into your React Native applications. Each icon is available as a standalone React Native component, allowing for seamless integration and customization.
+nextPage:
+ - getting-started
+---
+
+
+
+
+
+# Lucide for React Native
+
+Lucide provides a React Native icon component library that makes it easy to integrate icons into your React Native applications.
+Each icon is available as a standalone React component, allowing for seamless integration and customization.
+
+List of features:
+
+- **Easy to use** – Import icons and use them directly in JSX.
+- **Customizable** – Adjust size, color, stroke width, and other properties via props.
+- **Tree-shakable** – Only the icons you import are included in your final bundle.
+- **TypeScript support** – Fully typed components for a better developer experience.
+
+## Overview
+
+
+
+
+### Basics
+{{''}}
+
+
+
+
+### Advanced
+{{''}}
+
+
+
+
+### Resources
+{{''}}
+
+
+
diff --git a/docs/guide/react-native/migration.md b/docs/guide/react-native/migration.md
new file mode 100644
index 000000000..72261e47e
--- /dev/null
+++ b/docs/guide/react-native/migration.md
@@ -0,0 +1,20 @@
+# Migration from v0
+
+Brand icons are removed in v1. If you are using any of the following icons, you will need to replace them with a custom SVG or an alternative icon:
+
+- Chromium
+- Codepen
+- Codesandbox
+- Dribbble
+- Facebook
+- Figma
+- Framer
+- Github
+- Gitlab
+- Instagram
+- LinkedIn
+- Pocket
+- RailSymbol (based on the British Rail logo)
+- Slack
+
+We recommend to use the official SVG icons provided by the respective brands, most of them can be found on their websites or in their brand guidelines. Alternatively, you can use the icons from [Simple Icons](https://simpleicons.org/), which provides a large collection of brand icons. Also with links to the official Brand Guidelines and SVG icons.
diff --git a/docs/guide/react/advanced/accessibility.md b/docs/guide/react/advanced/accessibility.md
new file mode 100644
index 000000000..c7e92d84e
--- /dev/null
+++ b/docs/guide/react/advanced/accessibility.md
@@ -0,0 +1,51 @@
+---
+title: Accessibility - React
+description: Best practices for accessible icons in your React application.
+---
+
+
+# Accessibility
+
+Lucide icons ship with `aria-hidden="true"` by default. In almost all cases this is exactly what you want.
+
+## Should icons be accessible?
+
+Most of the time, icons are used purely for decoration or visual reinforcement. Exposing decorative icons to assistive technologies can create unnecessary noise for screen reader users.
+
+For a broader explanation of this, and other best practices on how to use icons accessibly in your application, please refer to our detailed guide on accessibility:
+
+
+ This is my house
+
+
+// or
+
+
+ +::: info Caveats + +- All icons are imported during build time, which increases build time. +- The bundler will create a separate module for each icon, which can increase the number of network requests. +- You can encounter flashing when loading the icon, since the icon is loaded dynamically. +- When using server-side rendering, you need to make sure that the icon is available during the initial render. +::: diff --git a/docs/guide/react/advanced/filled-icons.md b/docs/guide/react/advanced/filled-icons.md new file mode 100644 index 000000000..f706f4fd4 --- /dev/null +++ b/docs/guide/react/advanced/filled-icons.md @@ -0,0 +1,62 @@ +--- +title: Filled Icons - React +description: Learn how to use fills with Lucide icons in your React application, and the limitations of using fills with Lucide icons. +--- + + +# Filled Icons + +Fills are officially not supported. +However, all SVG properties are available on all icons. +Fill can still be used and will work fine on certain icons. + +Example with stars: + +::: sandpack {template=react editorHeight=580 editorWidthPercentage=60 dependencies="lucide-react"} + +```jsx App.js [active] +import { Star, StarHalf } from "lucide-react"; +import "./icon.css"; + +function App() { + return ( +
+
+);
+```
+
+This will apply the `color`, `size` and `strokeWidth` props to all icons that are children of the `LucideProvider`.
+
+
+## Style by using CSS
+Styling icons is easy to accomplish using CSS.
+
+Every icon has a class attribute applied called `lucide`. This class name can be used in the CSS file to target all icons that are being used within the app.
+
+- The **color** of the icons can be changed using the [`color`](https://developer.mozilla.org/en-US/docs/Web/CSS/color) CSS property.
+- The **size** of the icons can be changed using [`width`](https://developer.mozilla.org/en-US/docs/Web/CSS/width) and [`height`](https://developer.mozilla.org/en-US/docs/Web/CSS/height) CSS properties.
+- The **stroke width** of the icons can be changed using the [`stroke-width`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-width) CSS property.
+
+::: sandpack {template=react editorHeight=300 dependencies="lucide-react"}
+
+```css icon.css [active]
+.lucide {
+ /* Change this! */
+ color: #ffadff;
+ width: 56px;
+ height: 56px;
+ stroke-width: 1px;
+}
+
+.app {
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr;
+ grid-template-rows: 1fr 1fr 1fr;
+ gap: 6px;
+}
+```
+
+```jsx App.js
+import {
+ CakeSlice,
+ Candy,
+ Apple,
+ Cookie,
+ Martini,
+ IceCream2,
+ Sandwich,
+ Wine,
+ Dessert,
+} from "lucide-react";
+import "./icon.css";
+
+function App() {
+ return (
+ ;
+```
+
+### Using `LucideIcon`
+
+You can use the `LucideIcon` type when you need to work with icon components directly.
+
+```tsx
+import { type LucideIcon } from 'lucide-react';
+
+interface ButtonProps {
+ icon: LucideIcon;
+ label: string;
+}
+
+const IconButton = ({ icon: Icon, label }: ButtonProps) => {
+ return (
+
+ );
+};
+
+export default IconButton;
+```
+
+## `IconNode`
+
+Type for the raw SVG structure of an icon. This is an array of SVG elements and their attributes to render the icon.
+Not commonly used directly in application code. But can be useful for advanced use cases, such as using custom icons or with Lucide Lab.
+
+```ts
+type IconNode = [elementName: string, attrs: Record][];
+```
+
+### Using `IconNode`
+You can use the `IconNode` type when you need to work with the raw SVG structure of an icon.
+
+```tsx
+import { type IconNode, Icon } from 'lucide-react';
+
+const customIcon: IconNode = [
+ ['circle', { cx: 12, cy: 12, r: 10 }],
+ ['line', { x1: 12, y1: 8, x2: 12, y2: 12 }],
+ ['line', { x1: 12, y1: 16, x2: 12, y2: 16 }],
+];
+
+const MyCustomIcon = () => {
+ return (
+
+
diff --git a/docs/guide/react/index.md b/docs/guide/react/index.md
new file mode 100644
index 000000000..165c113c5
--- /dev/null
+++ b/docs/guide/react/index.md
@@ -0,0 +1,52 @@
+---
+title: Lucide for React
+description: Lucide provides a React icon component library that makes it easy to integrate icons into your React applications. Each icon is available as a standalone React component, allowing for seamless integration and customization.
+nextPage:
+ - getting-started
+---
+
+
+
+
+
+# Lucide for React
+
+Lucide provides a React component library for using icons in your applications. Each icon is available as a standalone component that renders an optimized inline SVG.
+
+List of features:
+
+- **Easy to use** – Import icons and use them directly in JSX.
+- **Customizable** – Adjust size, color, stroke width, and other properties via props.
+- **Tree-shakable** – Only the icons you import are included in your final bundle.
+- **TypeScript support** – Fully typed components for a better developer experience.
+
+## Overview
+
+
+
+
+### Basics
+{{''}}
+
+
+
+
+### Advanced
+{{''}}
+
+
+
+
+### Resources
+{{''}}
+
+
+
diff --git a/docs/guide/react/migration-from-feather.md b/docs/guide/react/migration-from-feather.md
new file mode 100644
index 000000000..54ef968ca
--- /dev/null
+++ b/docs/guide/react/migration-from-feather.md
@@ -0,0 +1,58 @@
+# Migration Guide: react-feather → lucide-react
+
+`react-feather` is similar to `lucide-react`, the package is inspired by `react-feather`. The API is nearly identical, so migration is straightforward.
+
+## 1. Install the new package
+
+```sh
+npm install lucide-react
+npm uninstall react-feather
+```
+
+## 2. Update imports
+
+Replace all `react-feather` imports with `lucide-react`:
+
+```diff
+- import { Home, User } from 'react-feather'
++ import { Home, User } from 'lucide-react'
+```
+
+You can do this across your entire codebase with a find-and-replace:
+
+- Find: `from 'react-feather'`
+- Replace: `from 'lucide-react'`
+
+## 3. Renamed icons
+
+Four icons have been renamed. Update any usages of these:
+
+| react-feather | lucide-react |
+| ------------- | ------------ |
+| `GitHub` | `Github` |
+| `Grid` | `LayoutGrid` |
+| `Table` | `Table2` |
+| `Tool` | `Wrench` |
+
+### Examples
+
+```diff
+- import { GitHub, Grid, Table, Tool } from 'react-feather'
++ import { Github, LayoutGrid, Table2, Wrench } from 'lucide-react'
+
+-
++
+ This is my house
+
+
+// or
+
+
+
+);
+```
+
+This will apply the `color`, `size` and `strokeWidth` props to all icons that are children of the `LucideProvider`.
+
+
+## Style by using CSS
+Styling icons is easy to accomplish using CSS.
+
+Every icon has a class attribute applied called `lucide`. This class name can be used in the CSS file to target all icons that are being used within the app.
+
+- The **color** of the icons can be changed using the [`color`](https://developer.mozilla.org/en-US/docs/Web/CSS/color) CSS property.
+- The **size** of the icons can be changed using [`width`](https://developer.mozilla.org/en-US/docs/Web/CSS/width) and [`height`](https://developer.mozilla.org/en-US/docs/Web/CSS/height) CSS properties.
+- The **stroke width** of the icons can be changed using the [`stroke-width`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-width) CSS property.
+
+::: sandpack {template=vite-solid editorHeight=300 editorWidthPercentage=60 dependencies="lucide-solid"}
+
+```css icon.css [active]
+.lucide {
+ /* Change this! */
+ color: #ffadff;
+ width: 48px;
+ height: 48px;
+ stroke-width: 1px;
+}
+
+.grid {
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr;
+ grid-template-rows: 1fr 1fr 1fr;
+ gap: 6px;
+}
+```
+
+```tsx App.tsx
+import CakeSlice from 'lucide-solid/icons/cake-slice';
+import Candy from 'lucide-solid/icons/candy';
+import Apple from 'lucide-solid/icons/apple';
+import Cookie from 'lucide-solid/icons/cookie';
+import Martini from 'lucide-solid/icons/martini';
+import IceCream2 from 'lucide-solid/icons/ice-cream-2';
+import Sandwich from 'lucide-solid/icons/sandwich';
+import Wine from 'lucide-solid/icons/wine';
+import Dessert from 'lucide-solid/icons/dessert';
+import "./icon.css";
+
+function App() {
+ return (
+ ][];
+```
+
+### Using `IconNode`
+You can use the `IconNode` type when you need to work with the raw SVG structure of an icon.
+
+```tsx
+import { type IconNode, Icon } from 'lucide-solid';
+
+const customIcon: IconNode = [
+ ['circle', { cx: 12, cy: 12, r: 10 }],
+ ['line', { x1: 12, y1: 8, x2: 12, y2: 12 }],
+ ['line', { x1: 12, y1: 16, x2: 12, y2: 16 }],
+];
+
+const MyCustomIcon = () => {
+ return (
+
+
diff --git a/docs/guide/solid/index.md b/docs/guide/solid/index.md
new file mode 100644
index 000000000..c5b2f31d8
--- /dev/null
+++ b/docs/guide/solid/index.md
@@ -0,0 +1,53 @@
+---
+title: Lucide for Solid
+description: Lucide provides a Solid icon component library that makes it easy to integrate icons into your Solid applications. Each icon is available as a standalone Solid component, allowing for seamless integration and customization.
+nextPage:
+ - getting-started
+---
+
+
+
+
+
+
+# Lucide for Solid
+
+Lucide provides a Solid icon component library that makes it easy to integrate icons into your Solid applications.
+Each icon is available as a standalone Solid component, allowing for seamless integration and customization.
+
+List of features:
+- **Easy to Use**: Import icons as Solid components and use them directly in your Solid components with JSX.
+- **Customizable**: Adjust size, color, and other properties via props.
+- **Tree-shakable**: Only the icons you use are included in your final bundle
+- **TypeScript Support**: Fully typed components for better developer experience.
+
+## Overview
+
+
+
+
+### Basics
+{{''}}
+
+
+
+
+### Advanced
+{{''}}
+
+
+
+
+### Resources
+{{''}}
+
+
+
diff --git a/docs/guide/solid/migration.md b/docs/guide/solid/migration.md
new file mode 100644
index 000000000..72261e47e
--- /dev/null
+++ b/docs/guide/solid/migration.md
@@ -0,0 +1,20 @@
+# Migration from v0
+
+Brand icons are removed in v1. If you are using any of the following icons, you will need to replace them with a custom SVG or an alternative icon:
+
+- Chromium
+- Codepen
+- Codesandbox
+- Dribbble
+- Facebook
+- Figma
+- Framer
+- Github
+- Gitlab
+- Instagram
+- LinkedIn
+- Pocket
+- RailSymbol (based on the British Rail logo)
+- Slack
+
+We recommend to use the official SVG icons provided by the respective brands, most of them can be found on their websites or in their brand guidelines. Alternatively, you can use the icons from [Simple Icons](https://simpleicons.org/), which provides a large collection of brand icons. Also with links to the official Brand Guidelines and SVG icons.
diff --git a/docs/guide/static/font/color.md b/docs/guide/static/font/color.md
new file mode 100644
index 000000000..94e9e62ab
--- /dev/null
+++ b/docs/guide/static/font/color.md
@@ -0,0 +1,23 @@
+---
+title: Color the Lucide icon font
+description: Learn how to customize the color of Lucide icons in your static projects using CSS. This guide covers how to change icon colors with CSS classes and inline styles for web font implementations.
+---
+# Color the font
+
+Styling the Lucide icon font with CSS is straightforward. You can change the color of the icons using the `color` property in your CSS. This allows you to easily customize the appearance of the icons to match your design.
+
+## Changing Icon Color
+
+To change the color of the icons, simply apply the `color` property to the element that contains the icon. For example, if you want to change the color of an icon to red, you can use the following CSS:
+
+```css
+.icon-house {
+ color: red;
+}
+```
+
+This will change the color of the icon with the class `icon-house` to red. You can use any valid CSS color value, such as hex codes, RGB, or named colors.
+
+## Inheriting Color from Parent Elements
+
+By default, the icons will inherit the color from their parent elements. This means that if you set a color on a parent element, all child icons will automatically take on that color unless you override it with a specific color for the icon. The same as text elements in HTML, the icon font will use the `color` property to determine its color, allowing for easy styling and consistency across your project.
diff --git a/docs/guide/static/font/index.md b/docs/guide/static/font/index.md
new file mode 100644
index 000000000..82764e9da
--- /dev/null
+++ b/docs/guide/static/font/index.md
@@ -0,0 +1,70 @@
+---
+description: Using the web font version of Lucide icons in your project. Learn how to include the stylesheet and use the icons with CSS classes.
+nextPage:
+ - getting-started
+---
+
+# Icon Font
+
+Lucide icons are also available as a web font. The font includes all icons as glyphs, allowing you to use them in your project with CSS classes. This can be a convenient option for projects that prefer using icon fonts.
+
+:::warning Not recommended for high traffic production use
+The Icon font includes all icons, which can significantly increase your app's bundle size and load time. For production environments, we recommend using a bundler with tree-shaking support to include only the icons you actually use. Consider using one of the framework-specific [packages](../../../packages.md).
+:::
+
+## Using the CSS Stylesheet
+
+::: code-group
+
+```css [Vite]
+@import 'lucide-static/font/lucide.css';
+```
+
+```css [Webpack]
+@import "~lucide-static/font/lucide.css";
+```
+
+```html [CDN]
+
+```
+
+```html [Static asset]
+
+```
+
+:::
+
+## Using the Icon Font
+
+Once you have included the stylesheet, you can use the icons in your HTML by applying the appropriate CSS classes. Each icon has a corresponding class name that you can use to display it.
+
+For example, to display the "home" icon, you would use the following HTML:
+
+```html
+
+```
+
+## Example with JavaScript
+
+
+::: sandpack {template=vanilla showTabs=false editorHeight=480 editorWidthPercentage=60 dependencies="lucide-static"}
+
+```html /index.html [active]
+
+
+
+
+
+
+
+
+```
+
+```js /index.js
+import "./styles.css";
+import "lucide-static/font/lucide.css";
+```
+
+:::
diff --git a/docs/guide/static/font/sizing.md b/docs/guide/static/font/sizing.md
new file mode 100644
index 000000000..9f0c32f9b
--- /dev/null
+++ b/docs/guide/static/font/sizing.md
@@ -0,0 +1,19 @@
+---
+title: Size the Lucide icon font
+description: Learn how to customize the color of Lucide icons in your static projects using CSS. This guide covers how to change icon colors with CSS classes and inline styles for web font implementations.
+---
+# Size the font
+
+Styling the Lucide icon font with CSS is straightforward. You can change the color of the icons using the `font-size` property in your CSS. This allows you to easily customize the appearance of the icons to match your design.
+
+## Changing the size
+
+To change the size of the icons, simply apply the `font-size` property to the element that contains the icon. For example, if you want to change the size of an icon to 24px, you can use the following CSS:
+
+```css
+.icon-house {
+ font-size: 24px;
+}
+```
+
+This will change the size of the icon with the class `icon-house` to 24px. You can use any valid CSS size value, such as em, rem, or percentage.
diff --git a/docs/guide/static/getting-started.md b/docs/guide/static/getting-started.md
new file mode 100644
index 000000000..fbae06247
--- /dev/null
+++ b/docs/guide/static/getting-started.md
@@ -0,0 +1,48 @@
+
+
+# Getting started
+
+This guide will help you get started with Lucide Static in your project.
+Make sure you have a your environment set up. If you don't have one yet, you can create a new project using Vite, Parcel or any other boilerplate of your choice.
+
+## For what use cases is `lucide-static` suitable?
+
+`lucide-static` is suitable for _very specific use cases_ where you want to use Lucide icons without relying on a JavaScript framework or component system. It's ideal for:
+
+- Projects that use icon fonts with plain CSS or utility-first frameworks
+- Embedding raw SVG files or sprites directly in HTML
+- Using SVGs as CSS background images
+- Importing SVG strings into Node.js environments
+
+::: danger Not recommended for production high performance needs {#production-warning}
+SVG sprites and icon fonts include **all icons**, which can significantly increase your app's bundle size and load time.
+
+For production environments, we recommend using a bundler with tree-shaking support to include only the icons you actually use. Consider using one of the framework-specific [packages](../../packages.md).
+:::
+
+## Installation
+
+### Package Managers
+
+::: code-group
+
+```sh [pnpm]
+pnpm add lucide-static
+```
+
+```sh [yarn]
+yarn add lucide-static
+```
+
+```sh [npm]
+npm install lucide-static
+```
+
+```sh [bun]
+bun add lucide-static
+```
+
+:::
diff --git a/docs/guide/static/index.md b/docs/guide/static/index.md
new file mode 100644
index 000000000..7f7bbcbb1
--- /dev/null
+++ b/docs/guide/static/index.md
@@ -0,0 +1,66 @@
+---
+title: Overview
+nextPage:
+ - getting-started
+---
+
+
+
+
+
+# Lucide Static Assets
+
+Static assets and utilities for Lucide icons that work without JavaScript frameworks. This package provides multiple formats including individual SVG files, SVG sprites, icon fonts, and Node.js utilities for server-side rendering and static site generation.
+
+**What you can accomplish:**
+
+- Use individual SVG files as images or CSS background images
+- Implement icon fonts for CSS-based icon systems
+- Create SVG sprites for efficient icon loading in static sites
+- Import SVG strings in Node.js applications and server-side rendering
+- Build static websites and applications without JavaScript framework dependencies
+
+This package includes the following implementations of Lucide icons:
+
+- Individual SVG files
+- SVG sprite
+- Icon font files
+- A JavaScript library exporting SVG strings
+
+## Overview
+
+
+
+
+### SVG Files & Sprite
+{{''}}
+
+
+
+
+### Icon Font
+{{''}}
+
+
+
+
+### Javascript modules
+{{''}}
+
+
+
+
+### Resources
+{{''}}
+
+
+
diff --git a/docs/guide/static/js-modules/node.md b/docs/guide/static/js-modules/node.md
new file mode 100644
index 000000000..0799324b4
--- /dev/null
+++ b/docs/guide/static/js-modules/node.md
@@ -0,0 +1,57 @@
+
+
+# Use Lucide in Node.js
+
+You can also import Lucide icons in Node.js projects, with the lucide-static package.
+Each icon is exported as a string containing the SVG markup, which can be used in server-side rendering or static site generation.
+
+::: code-group
+
+```js [ESM]
+import {MessageSquare} from 'lucide-static';
+```
+
+```js [CommonJs]
+const {MessageSquare} = require('lucide-static');
+```
+
+:::
+
+> Note: Each icon name is in PascalCase. You can find the icon names in the [Lucide Icons page](https://lucide.dev/icons).
+
+
+## Example with Node.js
+
+::: sandpack {template=node showTabs=false editorHeight=480 editorWidthPercentage=60 dependencies="lucide-static"}
+
+```js /index.js [active]
+import http from 'http';
+import { MessageSquare } from 'lucide-static';
+
+const server = http.createServer((req, res) => {
+ res.statusCode = 200;
+ res.setHeader('Content-Type', 'text/html');
+
+ res.end(`
+
+
+
+ ![]()
` tag. The path to the SVG files will depend on how you have set up your project.
+
+::: code-group
+
+```html [Vite]
+
+
+ 
+
+
+```
+
+```html [Webpack]
+
+
+ 
+
+
+```
+
+```html [CDN]
+
+
+ 
+
+
+```
+
+:::
+
+::: warning For CDN users
+Names of icons can change in future releases. Make sure you set an explicit version in the URL to avoid breaking changes.\
+`https://cdn.jsdelivr.net/npm/lucide-static@{version}/icons/smile.svg`
+:::
+
+## In CSS
+
+You can also use the icons as background images in your CSS. This is useful for adding icons to buttons, links, or other elements.
+
+::: code-group
+
+```css [Vite]
+.button {
+ background-image: url('node_modules/lucide-static/icons/smile.svg');
+}
+```
+
+```css [Webpack]
+.button {
+ background-image: url('~/lucide-static/icons/smile.svg');
+}
+```
+
+```css [CDN]
+.button {
+ background-image: url('https://cdn.jsdelivr.net/npm/lucide-static@latest/icons/smile.svg');
+}
+```
+
+:::
+
+::: warning For CDN users
+Names of icons can change in future releases. Make sure you set an explicit version in the URL to avoid breaking changes.\
+`https://cdn.jsdelivr.net/npm/lucide-static@{version}/icons/smile.svg`
+:::
+
+
diff --git a/docs/guide/static/migration.md b/docs/guide/static/migration.md
new file mode 100644
index 000000000..72261e47e
--- /dev/null
+++ b/docs/guide/static/migration.md
@@ -0,0 +1,20 @@
+# Migration from v0
+
+Brand icons are removed in v1. If you are using any of the following icons, you will need to replace them with a custom SVG or an alternative icon:
+
+- Chromium
+- Codepen
+- Codesandbox
+- Dribbble
+- Facebook
+- Figma
+- Framer
+- Github
+- Gitlab
+- Instagram
+- LinkedIn
+- Pocket
+- RailSymbol (based on the British Rail logo)
+- Slack
+
+We recommend to use the official SVG icons provided by the respective brands, most of them can be found on their websites or in their brand guidelines. Alternatively, you can use the icons from [Simple Icons](https://simpleicons.org/), which provides a large collection of brand icons. Also with links to the official Brand Guidelines and SVG icons.
diff --git a/docs/guide/static/svg-sprite.md b/docs/guide/static/svg-sprite.md
new file mode 100644
index 000000000..09747187a
--- /dev/null
+++ b/docs/guide/static/svg-sprite.md
@@ -0,0 +1,108 @@
+---
+description: Learn how to use SVG sprites with Lucide icons in your project, including basic usage and inline options.
+---
+
+# Using the SVG sprite
+
+Learn how to use SVG sprites with Lucide icons in your project, including basic usage and inline options.
+
+:::warning Not recommended for high traffic production use
+The SVG sprite includes all icons, which can significantly increase your app's bundle size and load time. For production environments, we recommend using a bundler with tree-shaking support to include only the icons you actually use. Consider using one of the framework-specific [packages](../../packages.md).
+:::
+
+SVG sprites can be loaded as individual image, or used inline with the `
-
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/overrides/VPCarbonAds.vue b/docs/.vitepress/theme/components/overrides/VPCarbonAds.vue
new file mode 100644
index 000000000..494c28a84
--- /dev/null
+++ b/docs/.vitepress/theme/components/overrides/VPCarbonAds.vue
@@ -0,0 +1,133 @@
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/overrides/VPFooter.vue b/docs/.vitepress/theme/components/overrides/VPFooter.vue
index 813ba1aca..b63a5da06 100644
--- a/docs/.vitepress/theme/components/overrides/VPFooter.vue
+++ b/docs/.vitepress/theme/components/overrides/VPFooter.vue
@@ -1,57 +1,91 @@
-
+
+
+
+ );
+}
+
+export default App;
+
+```
+:::
+
+This is valid, since [SVGs can be nested](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/svg#nested_svg_element), and all SVG properties are supported on the icons.
+The `x` and `y` coordinates can be adjusted to position the icons as you like.
+
+::: info Limitation
+When combining icons, you need to make sure that the `x` and `y` coordinates are within the `viewBox` of the outer icon (24x24).
+:::
+
+## With native SVG elements
+
+You can also combine Lucide icons with native SVG elements to build custom icon variations.
+
+### Example with notification badge
+
+For example, you can add a notification badge to an icon by using the `circle` SVG element.
+
+::: sandpack {showTabs=false editorHeight=580 editorWidthPercentage=60 dependencies="lucide-preact"}
+
+```jsx App.js [active]
+import { Mail } from "lucide-preact";
+import { h } from "preact";
+
+function App() {
+ const hasUnreadMessages = true;
+
+ return (
+
+
+ {hasUnreadMessages && (
+
+
+ );
+}
+
+export default App;
+
+```
+:::
+
+### Example with text element
+
+You can also use the `text` SVG element to add text to your icon.
+
+::: sandpack {showTabs=false editorHeight=400 editorWidthPercentage=60 dependencies="lucide-preact"}
+
+```jsx App.js [active]
+import { File } from "lucide-preact";
+import { h } from "preact";
+
+function App() {
+ return (
+
+
+
+ JS
+
+
+
+ );
+}
+
+export default App;
+
+```
+:::
diff --git a/docs/guide/preact/advanced/filled-icons.md b/docs/guide/preact/advanced/filled-icons.md
new file mode 100644
index 000000000..28da66430
--- /dev/null
+++ b/docs/guide/preact/advanced/filled-icons.md
@@ -0,0 +1,63 @@
+---
+title: Filled Icons - Preact
+description: Learn how to use fills with Lucide icons in your Preact application, and the limitations of using fills with Lucide icons.
+---
+
+
+# Filled Icons
+
+Fills are officially not supported.
+However, all SVG properties are available on all icons.
+Fill can still be used and will work fine on certain icons.
+
+Example with stars:
+
+::: sandpack { editorHeight=580 editorWidthPercentage=60 dependencies="lucide-preact"}
+
+```jsx App.js [active]
+import { Star, StarHalf } from "lucide-preact";
+import { h } from "preact";
+import "./icon.css";
+
+function App() {
+ return (
+
+
+ );
+}
+
+export default App;
+```
+
+```css icon.css
+.star-rating {
+ position: relative;
+}
+
+.stars {
+ display: flex;
+ gap: 4px;
+}
+
+.rating {
+ position: absolute;
+ top: 0;
+}
+
+```
+
+:::
diff --git a/docs/guide/preact/advanced/global-styling.md b/docs/guide/preact/advanced/global-styling.md
new file mode 100644
index 000000000..c8e77feb7
--- /dev/null
+++ b/docs/guide/preact/advanced/global-styling.md
@@ -0,0 +1,162 @@
+---
+title: Global Styling - Preact
+description: Learn how to style all Lucide icons globally in your Preact application using CSS or the Lucide context provider.
+---
+
+
+# Global Styling
+
+Adjusting icons can be done by using [color](../basics/color.md), [size](../basics/sizing.md) and [stroke width](../basics/stroke-width.md).
+To style all icons globally, you can either use CSS, or use a context provider.
+
+We recommend using CSS for global styling, as it is the most straightforward way to achieve this.
+But using CSS prevents you from using props like `size`, `color` and `strokeWidth` on individual icons, since CSS specificity will override these props, to be able to use the props on individual ones you need to use the Lucide context provider.
+
+## Context Provider
+
+For global styling using a context provider, you can use the `LucideProvider` component that is provided by the `lucide-preact` package.
+
+```tsx
+import { LucideProvider, Home } from 'lucide-preact';
+
+const App = () => (
+
+
+
+ { Array.from({ length: 5 }, () => (
+
+
+
+
+
+ );
+}
+
+export default App;
+```
+
+:::
+
+
+### Absolute stroke width
+
+For global absolute stroke width styling the `vector-effect: non-scaling-stroke` CSS property can be applied to the children. This will keep the stroke-width the same size no matter the size of the icon. See [absolute-stroke-width](../basics/stroke-width.md#absolute-stroke-width) for more info.
+
+::: sandpack {editorHeight=480 editorWidthPercentage=60 dependencies="lucide-preact"}
+
+```css icon.css [active]
+.lucide {
+ width: 48px;
+ height: 48px;
+ stroke-width: 1.5;
+}
+
+.lucide * {
+ vector-effect: non-scaling-stroke;
+}
+
+.grid {
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr;
+ grid-template-rows: 1fr 1fr 1fr;
+ gap: 6px;
+}
+```
+
+```jsx App.js
+import {
+ TentTree,
+ Caravan,
+ FlameKindling,
+ MountainSnow,
+ Trees,
+ Axe,
+ Map,
+ CloudMoon,
+ Sparkles,
+} from "lucide-preact";
+import { h } from "preact";
+import "./icon.css";
+
+function App() {
+ return (
+
+
+ );
+}
+
+export default App;
+```
+
+:::
diff --git a/docs/guide/preact/advanced/typescript.md b/docs/guide/preact/advanced/typescript.md
new file mode 100644
index 000000000..b55c7c720
--- /dev/null
+++ b/docs/guide/preact/advanced/typescript.md
@@ -0,0 +1,97 @@
+---
+title: Typescript - Preact
+description: Learn about the different types exported by the `lucide-preact` package and how to use them in your Preact application.
+---
+# TypeScript
+
+List of exported types from the `lucide-preact` package.
+These can be used to type your components when using Lucide icons in a TypeScript React project
+
+## `LucideProps`
+
+Exports all props that can be passed to an icon component and any other SVG attributes, see: [SVG Presentation Attributes on MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation).
+
+```ts
+interface LucideProps {
+ size?: number | string;
+ color?: string;
+ strokeWidth?: number;
+ absoluteStrokeWidth?: boolean;
+ [key: string]: any; // Any other SVG attributes
+}
+```
+
+### Using `LucideProps`
+You can use the `LucideProps` interface to type your custom icon components or when you need to work with icon props.
+
+```tsx
+import { type LucideProps } from 'lucide-preact';
+import { Camera } from 'lucide-preact';
+
+const WrapIcon = (props: LucideProps) => {
+ return
+
+ );
+}
+
+export default App;
+```
+
+:::
+
+## Using parent elements text color value
+
+Because the color of lucide icons uses `currentColor`, the color of the icon depends on the computed `color` of the element, or it inherits it from its parent.
+
+For example, if a parent element's color value is `#fff` and one of the children is a lucide icon, the color of the icon will be rendered as `#fff`. This is browser native behavior.
+
+::: sandpack {showTabs=false editorHeight=340 editorWidthPercentage=60 dependencies="lucide-preact"}
+
+```jsx Button.jsx [active]
+import { h } from "preact";
+import { ThumbsUp } from "lucide-preact";
+
+function LikeButton() {
+ return (
+
+ );
+}
+
+export default LikeButton;
+```
+
+```js App.js [hidden]
+import { h } from "preact";
+import Button from "./Button";
+
+export default function App() {
+ return ;
+}
+
+```
+
+:::
diff --git a/docs/guide/preact/basics/sizing.md b/docs/guide/preact/basics/sizing.md
new file mode 100644
index 000000000..cbe10ce3e
--- /dev/null
+++ b/docs/guide/preact/basics/sizing.md
@@ -0,0 +1,130 @@
+---
+title: Sizing - Preact
+description: Learn how to adjust the size of icons in your Preact application using the `size` prop or by using CSS.
+---
+
+
+# Sizing
+
+By default, the size of all icons is `24px` by `24px`. The size is adjustable using the `size` prop and CSS.
+
+## Adjusting the icon size using the `size` prop
+
+::: sandpack {showTabs=false editorHeight=320 editorWidthPercentage=60 dependencies="lucide-preact"}
+
+```js App.js [active]
+import { h } from "preact";
+import { Landmark } from "lucide-preact";
+
+function App() {
+ return (
+
+
+ );
+}
+
+export default App;
+```
+
+:::
+
+## Adjusting the icon size via CSS
+
+The CSS properties `width` and `height` can be used to adjust the icon size.
+
+::: sandpack {editorHeight=320 dependencies="lucide-preact"}
+
+```css icon.css [active]
+.my-beer-icon {
+ /* Change this! */
+ width: 64px;
+ height: 64px;
+}
+```
+
+```jsx App.js
+import { h } from "preact";
+import { Beer } from "lucide-preact";
+import "./icon.css";
+
+function App() {
+ return (
+
+
+ );
+}
+
+export default App;
+```
+:::
+
+### Dynamically change the icon size based on the font size
+
+It is possible to resize icons based on font size. This can be achieved using the `em` unit. See this [MDN article](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size#ems) for more information on the `em` unit.
+
+::: sandpack {editorHeight=320 dependencies="lucide-preact"}
+
+```css icon.css [active]
+.my-icon {
+ /* Icon size will relative to font-size of .text-wrapper */
+ width: 1em;
+ height: 1em;
+}
+
+.text-wrapper {
+ /* Change this! */
+ font-size: 96px;
+
+ /* layout stuff */
+ display: flex;
+ gap: 0.25em;
+ align-items: center;
+}
+```
+
+```jsx App.js
+import { h } from "preact";
+import { Star } from "lucide-preact";
+import "./icon.css";
+
+function App() {
+ return (
+
+
+ );
+}
+
+export default App;
+```
+
+:::
+
+### Resizing with Tailwind
+
+`size-*` utilities can be used to adjust the size of the icon. See the [Tailwind documentation](https://tailwindcss.com/docs/width#setting-both-width-and-height) for more information on the `size-*` utilities.
+
+::: sandpack {showTabs=false editorHeight=300 editorWidthPercentage=60 dependencies="lucide-preact" externalResources="https://cdn.tailwindcss.com"}
+
+```js App.js [active]
+import { h } from "preact";
+import { PartyPopper } from "lucide-preact";
+
+function App() {
+ return (
+ Yes
+
+
+ );
+}
+
+export default App;
+```
+
+:::
+
diff --git a/docs/guide/preact/basics/stroke-width.md b/docs/guide/preact/basics/stroke-width.md
new file mode 100644
index 000000000..fe88199b3
--- /dev/null
+++ b/docs/guide/preact/basics/stroke-width.md
@@ -0,0 +1,69 @@
+---
+title: Stroke width - Preact
+description: Learn how to adjust the stroke width of icons in your Preact application using the `strokeWidth` prop or adjust the strokeWidth appearance using the `absoluteStrokeWidth` prop.
+---
+
+
+# Stroke width
+
+All icons are designed with SVG elements using strokes.
+These have a default stroke width of `2px`.
+
+The `strokeWidth` can be adjusted to create a different look of the icons.
+
+## Adjusting stroke width with `strokeWidth` prop
+
+::: sandpack {showTabs=false editorHeight=320 editorWidthPercentage=60 dependencies="lucide-preact"}
+
+```jsx App.js [active]
+import { h } from "preact";
+import { FolderLock } from "lucide-preact";
+
+function App() {
+ return (
+
+
+ );
+}
+
+export default App;
+```
+:::
+
+## Absolute stroke width
+
+When adjusting the `size` prop the size of the stroke width will be relative to the size of the icon, this is the default SVG behavior. The `absoluteStrokeWidth` prop is introduced to adjust this behavior to make the stroke width constant no matter the size of the icon.
+
+This means that when `absoluteStrokeWidth` is enabled and the `size` of the icons is set to `48px` the `strokeWidth` will still be `2px` on the screen.
+
+Note `2px` is the default stroke width for a Lucide icon, this can be adjusted to all sizes.
+
+
+
+### Adjusting stroke width with `absoluteStrokeWidth` prop
+
+Setting `absoluteStrokeWidth` to `true` will make the stroke width absolute.
+
+::: sandpack {showTabs=false editorHeight=340 editorWidthPercentage=60 dependencies="lucide-preact"}
+
+```jsx App.js [active]
+import { h } from "preact";
+import { RollerCoaster } from "lucide-preact";
+
+function App() {
+ return (
+
+
+ );
+}
+
+export default App;
+```
+:::
diff --git a/docs/guide/preact/getting-started.md b/docs/guide/preact/getting-started.md
new file mode 100644
index 000000000..f7343b9fe
--- /dev/null
+++ b/docs/guide/preact/getting-started.md
@@ -0,0 +1,79 @@
+---
+title: Getting started - Preact
+description: This guide will help you get started with Lucide in your Preact project.
+---
+
+
+# Getting started
+
+This guide will help you get started with Lucide in your Preact project.
+Make sure you have a Preact environment set up. If you don't have one yet, you can create a new Preact project using Create Preact App, Vite, or any other Preact boilerplate of your choice.
+
+## Installation
+
+::: code-group
+
+```sh [pnpm]
+pnpm add lucide-preact
+```
+
+```sh [yarn]
+yarn add lucide-preact
+```
+
+```sh [npm]
+npm install lucide-preact
+```
+
+```sh [bun]
+bun add lucide-preact
+```
+
+:::
+
+## Importing your first icon
+
+Lucide is built with ES Modules, so it's completely tree-shakable.
+
+Each icon can be imported as a Preact component, which renders an inline SVG element. This way, only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away.
+
+```jsx
+import { Camera } from 'lucide-preact';
+
+// Usage
+const App = () => {
+ return
+
+
+
+ );
+}
+
+export default App;
+```
+:::
+
+This is valid, since [SVGs can be nested](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/svg#nested_svg_element), and all SVG properties are supported on the icons.
+The `x` and `y` coordinates can be adjusted to position the icons as you like.
+
+::: info Limitation
+When combining icons, you need to make sure that the `x` and `y` coordinates are within the `viewBox` of the outer icon (24x24).
+:::
+
+## With native SVG elements
+
+You can also combine Lucide icons with native SVG elements to build custom icon variations.
+
+### Example with notification badge
+
+For example, you can add a notification badge to an icon by using the `circle` SVG element.
+
+
+::: sandpack {template=react showTabs=false editorHeight=580 editorWidthPercentage=60 dependencies="lucide-react"}
+
+```jsx App.js [active]
+import { Mail } from "lucide-react";
+
+function App() {
+ const hasUnreadMessages = true;
+
+ return (
+
+
+ {hasUnreadMessages && (
+
+
+ );
+}
+
+export default App;
+```
+:::
+
+### Example with text element
+
+You can also use the `text` SVG element to add text to your icon.
+
+::: sandpack {template=react showTabs=false editorHeight=400 editorWidthPercentage=60 dependencies="lucide-react"}
+
+```jsx App.js [active]
+import { File } from "lucide-react";
+
+function App() {
+ return (
+
+
+
+ JS
+
+
+
+ );
+}
+
+export default App;
+```
+:::
diff --git a/docs/guide/react/advanced/dynamic-icon-component.md b/docs/guide/react/advanced/dynamic-icon-component.md
new file mode 100644
index 000000000..31f230845
--- /dev/null
+++ b/docs/guide/react/advanced/dynamic-icon-component.md
@@ -0,0 +1,31 @@
+---
+title: Dynamic Icon Component - React
+description: Learn how to use the DynamicIcon component to load icons dynamically by name in your React application, and understand the caveats of using this approach.
+---
+# Dynamic Icon Component
+
+It is possible to use one generic icon component to load icons. But it is not recommended, since it is importing all icons during the build. See [Caveats](#caveats).
+
+`DynamicIcon` is useful for applications that want to show icons dynamically by icon name. For example, when using a content management system where icon names are stored in a database.
+
+For static use cases, it is recommended to import the icons directly.
+
+The same props can be passed to adjust the icon appearance. The `name` prop is required to load the correct icon.
+
+```jsx
+import { DynamicIcon } from 'lucide-react/dynamic';
+
+const App = () => (
+ + +::: info Caveats + +- All icons are imported during build time, which increases build time. +- The bundler will create a separate module for each icon, which can increase the number of network requests. +- You can encounter flashing when loading the icon, since the icon is loaded dynamically. +- When using server-side rendering, you need to make sure that the icon is available during the initial render. +::: diff --git a/docs/guide/react/advanced/filled-icons.md b/docs/guide/react/advanced/filled-icons.md new file mode 100644 index 000000000..f706f4fd4 --- /dev/null +++ b/docs/guide/react/advanced/filled-icons.md @@ -0,0 +1,62 @@ +--- +title: Filled Icons - React +description: Learn how to use fills with Lucide icons in your React application, and the limitations of using fills with Lucide icons. +--- + + +# Filled Icons + +Fills are officially not supported. +However, all SVG properties are available on all icons. +Fill can still be used and will work fine on certain icons. + +Example with stars: + +::: sandpack {template=react editorHeight=580 editorWidthPercentage=60 dependencies="lucide-react"} + +```jsx App.js [active] +import { Star, StarHalf } from "lucide-react"; +import "./icon.css"; + +function App() { + return ( +
+
+ );
+}
+
+export default App;
+```
+
+```css icon.css
+.star-rating {
+ position: relative;
+}
+
+.stars {
+ display: flex;
+ gap: 4px;
+}
+
+.rating {
+ position: absolute;
+ top: 0;
+}
+
+```
+
+:::
diff --git a/docs/guide/react/advanced/global-styling.md b/docs/guide/react/advanced/global-styling.md
new file mode 100644
index 000000000..1a68b0457
--- /dev/null
+++ b/docs/guide/react/advanced/global-styling.md
@@ -0,0 +1,161 @@
+---
+title: Global Styling - React
+description: Learn how to style all Lucide icons globally in your React application using CSS or the Lucide context provider.
+---
+
+
+# Global Styling
+
+Adjusting icons can be done by using [color](../basics/color.md), [size](../basics/sizing.md) and [stroke width](../basics/stroke-width.md).
+To style all icons globally, you can either use CSS, or use a context provider.
+
+We recommend using CSS for global styling, as it is the most straightforward way to achieve this.
+But using CSS prevents you from using props like `size`, `color` and `strokeWidth` on individual icons, since CSS specificity will override these props, to be able to use the props on individual ones you need to use the Lucide context provider.
+
+## Context Provider
+
+For global styling using a context provider, you can use the `LucideProvider` component that is provided by the `lucide-react` package.
+
+
+```tsx
+import { LucideProvider, Home } from 'lucide-react';
+
+const App = () => (
+
+
+
+ { Array.from({ length: 5 }, () => (
+
+
+
+
+
+ );
+}
+
+export default App;
+```
+
+:::
+
+### Absolute stroke width
+
+For global absolute stroke width styling the `vector-effect: non-scaling-stroke` CSS property can be applied to the children. This will keep the stroke-width the same size no matter the size of the icon. See [absolute-stroke-width](../basics/stroke-width.md#absolute-stroke-width) for more info.
+
+::: sandpack {template=react editorHeight=300 dependencies="lucide-react"}
+
+```css icon.css [active]
+.lucide {
+ width: 48px;
+ height: 48px;
+ stroke-width: 1.5;
+}
+
+.lucide * {
+ vector-effect: non-scaling-stroke;
+}
+
+.app {
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr;
+ grid-template-rows: 1fr 1fr 1fr;
+ gap: 6px;
+}
+
+```
+
+```jsx App.js
+import {
+ TentTree,
+ Caravan,
+ FlameKindling,
+ MountainSnow,
+ Trees,
+ Axe,
+ Map,
+ CloudMoon,
+ Sparkles,
+} from "lucide-react";
+import "./icon.css";
+
+function App() {
+ return (
+
+
+ );
+}
+
+export default App;
+```
+
+:::
diff --git a/docs/guide/react/advanced/typescript.md b/docs/guide/react/advanced/typescript.md
new file mode 100644
index 000000000..fbeff8df5
--- /dev/null
+++ b/docs/guide/react/advanced/typescript.md
@@ -0,0 +1,97 @@
+---
+title: Typescript - React
+description: Learn about the different types exported by the `lucide-react` package and how to use them in your React application.
+---
+# TypeScript Support
+
+List of exported types from the `lucide-react` package.
+These can be used to type your components when using Lucide icons in a TypeScript React project.
+
+## `LucideProps`
+
+Exports all props that can be passed to an icon component and any other SVG attributes, see: [SVG Presentation Attributes on MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation).
+
+```ts
+interface LucideProps {
+ size?: number | string;
+ color?: string;
+ strokeWidth?: number;
+ absoluteStrokeWidth?: boolean;
+ [key: string]: any; // Any other SVG attributes
+}
+```
+
+### Using `LucideProps`
+You can use the `LucideProps` interface to type your custom icon components or when you need to work with icon props.
+
+```tsx
+import { type LucideProps } from 'lucide-react';
+import { Camera } from 'lucide-react';
+
+const WrapIcon = (props: LucideProps) => {
+ return
+
+ );
+}
+
+export default App;
+```
+
+:::
+
+
+## Using parent elements text color value
+
+Because the color of lucide icons uses `currentColor`, the color of the icon depends on the computed `color` of the element, or it inherits it from its parent.
+
+For example, if a parent element's color value is `#fff` and one of the children is a lucide icon, the color of the icon will be rendered as `#fff`. This is browser native behavior.
+
+::: sandpack {template=react showTabs=false editorHeight=320 editorWidthPercentage=60 dependencies="lucide-react"}
+
+```jsx Button.jsx [active]
+import { ThumbsUp } from "lucide-react";
+
+function LikeButton() {
+ return (
+
+ );
+}
+
+export default LikeButton;
+```
+
+```jsx App.js [hidden]
+import Button from "./Button";
+
+export default function App() {
+ return ;
+}
+
+```
+:::
diff --git a/docs/guide/react/basics/sizing.md b/docs/guide/react/basics/sizing.md
new file mode 100644
index 000000000..cf657e6a9
--- /dev/null
+++ b/docs/guide/react/basics/sizing.md
@@ -0,0 +1,124 @@
+---
+title: Sizing - React
+description: Learn how to adjust the size of icons in your React application using the `size` prop or by using CSS.
+---
+
+
+# Sizing
+
+By default, the size of all icons is `24px` by `24px`. The size is adjustable using the `size` prop and CSS.
+
+## Adjusting the icon size using the `size` prop
+
+::: sandpack {template=react showTabs=false editorHeight=300 editorWidthPercentage=60 dependencies="lucide-react"}
+
+```jsx App.js [active]
+import { Landmark } from "lucide-react";
+
+function App() {
+ return (
+
+
+ );
+}
+
+export default App;
+```
+:::
+
+## Adjusting the icon size via CSS
+
+The CSS properties `width` and `height` can be used to adjust the icon size.
+
+::: sandpack {template=react editorHeight=300 dependencies="lucide-react"}
+
+```css icon.css [active]
+.my-beer-icon {
+ /* Change this! */
+ width: 64px;
+ height: 64px;
+}
+```
+
+```jsx App.js
+import { Beer } from "lucide-react";
+import "./icon.css";
+
+function App() {
+ return (
+
+
+ );
+}
+
+export default App;
+
+```
+:::
+
+### Dynamically change the icon size based on the font size
+
+It is possible to resize icons based on font size. This can be achieved using the `em` unit. See this [MDN article](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size#ems) for more information on the `em` unit.
+
+::: sandpack {template=react editorHeight=300 dependencies="lucide-react"}
+
+```css icon.css [active]
+.my-icon {
+ /* Icon size will relative to font-size of .text-wrapper */
+ width: 1em;
+ height: 1em;
+}
+
+.text-wrapper {
+ /* Change this! */
+ font-size: 96px;
+
+ /* layout stuff */
+ display: flex;
+ gap: 0.25em;
+ align-items: center;
+}
+```
+
+```jsx App.js
+import { Star } from "lucide-react";
+import "./icon.css";
+
+function App() {
+ return (
+
+
+ );
+}
+
+export default App;
+```
+
+:::
+
+### Resizing with Tailwind
+
+`size-*` utilities can be used to adjust the size of the icon. See the [Tailwind documentation](https://tailwindcss.com/docs/width#setting-both-width-and-height) for more information on the `size-*` utilities.
+
+::: sandpack {template=react editorHeight=300 editorWidthPercentage=60 dependencies="lucide-react" externalResources="https://cdn.tailwindcss.com"}
+
+```jsx App.js [active]
+import { PartyPopper } from "lucide-react";
+
+function App() {
+ return (
+ Yes
+
+
+ );
+}
+
+export default App;
+```
+:::
diff --git a/docs/guide/react/basics/stroke-width.md b/docs/guide/react/basics/stroke-width.md
new file mode 100644
index 000000000..8b6f8938a
--- /dev/null
+++ b/docs/guide/react/basics/stroke-width.md
@@ -0,0 +1,68 @@
+---
+title: Stroke width - React
+description: Learn how to adjust the stroke width of icons in your React application using the `strokeWidth` prop or adjust the strokeWidth appearance using the `absoluteStrokeWidth` prop.
+---
+
+
+# Stroke width
+
+All icons are designed with SVG elements using strokes.
+These have a default stroke width of `2px`.
+
+The `strokeWidth` can be adjusted to create a different look of the icons.
+
+## Adjusting stroke width with `strokeWidth` prop
+
+::: sandpack {template=react showTabs=false editorHeight=300 editorWidthPercentage=60 dependencies="lucide-react"}
+
+```jsx App.js [active]
+import { FolderLock } from "lucide-react";
+
+function App() {
+ return (
+
+
+ );
+}
+
+export default App;
+```
+:::
+
+
+## Absolute stroke width
+
+When adjusting the `size` prop the size of the stroke width will be relative to the size of the icon, this is the default SVG behavior. The `absoluteStrokeWidth` prop is introduced to adjust this behavior to make the stroke width constant no matter the size of the icon.
+
+This means that when `absoluteStrokeWidth` is enabled and the `size` of the icons is set to `48px` the `strokeWidth` will still be `2px` on the screen.
+
+Note `2px` is the default stroke width for a Lucide icon, this can be adjusted to all sizes.
+
+
+
+### Adjusting stroke width with `absoluteStrokeWidth` prop
+
+Setting `absoluteStrokeWidth` to `true` will make the stroke width absolute.
+
+::: sandpack {template=react showTabs=false editorHeight=320 editorWidthPercentage=60 dependencies="lucide-react"}
+
+```jsx App.js [active]
+import { RollerCoaster } from "lucide-react";
+
+function App() {
+ return (
+
+
+ );
+}
+
+export default App;
+```
+:::
diff --git a/docs/guide/react/getting-started.md b/docs/guide/react/getting-started.md
new file mode 100644
index 000000000..30def5136
--- /dev/null
+++ b/docs/guide/react/getting-started.md
@@ -0,0 +1,77 @@
+---
+title: Getting started - React
+description: This guide will help you get started with Lucide in your React project.
+---
+
+
+# Getting started
+
+This guide will help you get started with Lucide in your React project.
+Make sure you have a React environment set up. If you don't have one yet, you can create a new React project using Create React App, Vite, or any other React boilerplate of your choice.
+
+## Installation
+
+::: code-group
+
+```sh [pnpm]
+pnpm add lucide-react
+```
+
+```sh [yarn]
+yarn add lucide-react
+```
+
+```sh [npm]
+npm install lucide-react
+```
+
+```sh [bun]
+bun add lucide-react
+```
+
+:::
+
+## Importing your first icon
+
+Lucide is built with ES Modules, so it's completely tree-shakable.
+
+Each icon can be imported as a React component, which renders an inline SVG element. This way, only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away.
+
+```jsx
+import { Camera } from 'lucide-react';
+// Usage
+const App = () => {
+ return
+
+
+
+ );
+}
+
+export default App;
+```
+
+:::
+
+This is valid, since [SVGs can be nested](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/svg#nested_svg_element), and all SVG properties are supported on the icons.
+The `x` and `y` coordinates can be adjusted to position the icons as you like.
+
+::: info Limitation
+When combining icons, you need to make sure that the `x` and `y` coordinates are within the `viewBox` of the outer icon (24x24).
+:::
+
+## With native SVG elements
+
+You can also combine Lucide icons with native SVG elements to build custom icon variations.
+
+### Example with notification badge
+
+For example, you can add a notification badge to an icon by using the `circle` SVG element.
+
+::: sandpack {template=vite-solid showTabs=false editorHeight=580 editorWidthPercentage=60 dependencies="lucide-solid"}
+
+```tsx App.tsx [active]
+import Mail from 'lucide-solid/icons/mail';
+
+function App() {
+ const hasUnreadMessages = true;
+
+ return (
+
+
+ {hasUnreadMessages && (
+
+
+ );
+}
+
+export default App;
+```
+
+:::
+
+### Example with text element
+
+You can also use the `text` SVG element to add text to your icon.
+
+::: sandpack {template=vite-solid showTabs=false editorHeight=400 editorWidthPercentage=60 dependencies="lucide-solid"}
+
+```tsx App.tsx [active]
+import File from 'lucide-solid/icons/file';
+
+function App() {
+ return (
+
+
+
+ JS
+
+
+
+ );
+}
+
+export default App;
+```
+
+:::
diff --git a/docs/guide/solid/advanced/filled-icons.md b/docs/guide/solid/advanced/filled-icons.md
new file mode 100644
index 000000000..4949d23db
--- /dev/null
+++ b/docs/guide/solid/advanced/filled-icons.md
@@ -0,0 +1,64 @@
+---
+title: Filled Icons - Solid
+description: Learn how to use fills with Lucide icons in your Solid application, and the limitations of using fills with Lucide icons.
+---
+
+
+# Filled Icons
+
+Fills are officially not supported.
+However, all SVG properties are available on all icons.
+Fill can still be used and will work fine on certain icons.
+
+Example with stars:
+
+::: sandpack {template=vite-solid editorHeight=580 editorWidthPercentage=60 dependencies="lucide-solid"}
+
+```tsx App.tsx [active]
+import Star from 'lucide-solid/icons/star';
+import StarHalf from 'lucide-solid/icons/star-half';
+
+import "./icon.css";
+
+function App() {
+ return (
+
+
+
+ );
+}
+
+export default App;
+```
+
+```css icon.css
+.star-rating {
+ position: relative;
+}
+
+.stars {
+ display: flex;
+ gap: 4px;
+}
+
+.rating {
+ position: absolute;
+ top: 0;
+}
+
+```
+
+:::
diff --git a/docs/guide/solid/advanced/global-styling.md b/docs/guide/solid/advanced/global-styling.md
new file mode 100644
index 000000000..6c55b55dd
--- /dev/null
+++ b/docs/guide/solid/advanced/global-styling.md
@@ -0,0 +1,157 @@
+---
+title: Global Styling - Solid
+description: Learn how to style all Lucide icons globally in your Solid application using CSS or the Lucide context provider.
+---
+
+
+# Global Styling
+
+Adjusting icons can be done by using [color](../basics/color.md), [size](../basics/sizing.md) and [stroke width](../basics/stroke-width.md).
+To style all icons globally, you can either use CSS, or use a context provider.
+
+We recommend using CSS for global styling, as it is the most straightforward way to achieve this.
+But using CSS prevents you from using props like `size`, `color` and `strokeWidth` on individual icons, since CSS specificity will override these props, to be able to use the props on individual ones you need to use the Lucide context provider.
+
+## Context Provider
+
+For global styling using a context provider, you can use the `LucideProvider` component that is provided by the `lucide-solid` package.
+
+
+
+```tsx
+import { LucideProvider, Home } from 'lucide-solid';
+
+const App = () => (
+
+
+ );
+}
+
+export default App;
+```
+:::
+
+### Absolute stroke width
+
+For global absolute stroke width styling the `vector-effect: non-scaling-stroke` CSS property can be applied to the children. This will keep the stroke-width the same size no matter the size of the icon. See [absolute-stroke-width](../basics/stroke-width.md#absolute-stroke-width) for more info.
+
+::: sandpack {template=vite-solid editorHeight=300 editorWidthPercentage=60 dependencies="lucide-solid"}
+
+```css icon.css [active]
+.lucide {
+ width: 48px;
+ height: 48px;
+ stroke-width: 1.5;
+}
+
+.lucide * {
+ vector-effect: non-scaling-stroke;
+}
+
+.grid {
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr;
+ grid-template-rows: 1fr 1fr 1fr;
+ gap: 6px;
+}
+
+```
+
+```tsx App.tsx
+import TentTree from 'lucide-solid/icons/tent-tree';
+import Caravan from 'lucide-solid/icons/caravan';
+import FlameKindling from 'lucide-solid/icons/flame-kindling';
+import MountainSnow from 'lucide-solid/icons/mountain-snow';
+import Trees from 'lucide-solid/icons/trees';
+import Axe from 'lucide-solid/icons/axe';
+import Map from 'lucide-solid/icons/map';
+import CloudMoon from 'lucide-solid/icons/cloud-moon';
+import Sparkles from 'lucide-solid/icons/sparkles';
+import "./icon.css";
+
+function App() {
+ return (
+
+
+ );
+}
+
+export default App;
+```
+
+:::
diff --git a/docs/guide/solid/advanced/typescript.md b/docs/guide/solid/advanced/typescript.md
new file mode 100644
index 000000000..1142e3b0f
--- /dev/null
+++ b/docs/guide/solid/advanced/typescript.md
@@ -0,0 +1,97 @@
+---
+title: Typescript - Solid
+description: Learn about the different types exported by the `lucide-solid` package and how to use them in your Solid application.
+---
+# TypeScript Support
+
+List of exported types from the `lucide-solid` package.
+These can be used to type your components when using Lucide icons in a TypeScript React project
+
+## `LucideProps`
+
+Exports all props that can be passed to an icon component and any other SVG attributes, see: [SVG Presentation Attributes on MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation).
+
+```ts
+interface LucideProps extends SVGAttributes {
+ size?: number | string;
+ color?: string;
+ strokeWidth?: number;
+ absoluteStrokeWidth?: boolean;
+ [key: string]: any; // Any other SVG attributes
+}
+```
+
+### Using `LucideProps`
+You can use the `LucideProps` interface to type your custom icon components or when you need to work with icon props.
+
+```tsx
+import { type LucideProps } from 'lucide-solid';
+import { Camera } from 'lucide-solid';
+
+const WrapIcon = (props: LucideProps) => {
+ return
+
+ );
+}
+
+export default App;
+```
+:::
+
+## Using parent elements text color value
+
+Because the color of lucide icons uses `currentColor`, the color of the icon depends on the computed `color` of the element, or it inherits it from its parent.
+
+For example, if a parent element's color value is `#fff` and one of the children is a lucide icon, the color of the icon will be rendered as `#fff`. This is browser native behavior.
+
+::: sandpack {template=vite-solid editorHeight=320 editorWidthPercentage=60 dependencies="lucide-solid"}
+
+```tsx ./Button.tsx [active]
+import ThumbsUp from 'lucide-solid/icons/thumbs-up';
+
+function LikeButton() {
+ return (
+
+ );
+}
+
+export default LikeButton;
+```
+
+```tsx ./App.tsx
+import Button from "./Button";
+
+export default function App() {
+ return ;
+}
+```
+:::
diff --git a/docs/guide/solid/basics/sizing.md b/docs/guide/solid/basics/sizing.md
new file mode 100644
index 000000000..3108378a7
--- /dev/null
+++ b/docs/guide/solid/basics/sizing.md
@@ -0,0 +1,125 @@
+---
+title: Sizing - Solid
+description: Learn how to adjust the size of icons in your Solid application using the `size` prop or by using CSS.
+---
+
+
+# Sizing
+
+By default, the size of all icons is `24px` by `24px`. The size is adjustable using the `size` prop and CSS.
+
+## Adjusting the icon size using the `size` prop
+
+::: sandpack {template=vite-solid showTabs=false editorHeight=300 editorWidthPercentage=60 dependencies="lucide-solid"}
+
+```tsx App.tsx [active]
+import Landmark from 'lucide-solid/icons/landmark';
+
+function App() {
+ return (
+
+
+ );
+}
+
+export default App;
+```
+:::
+
+## Adjusting the icon size via CSS
+
+The CSS properties `width` and `height` can be used to adjust the icon size.
+
+::: sandpack {template=vite-solid editorHeight=300 dependencies="lucide-solid"}
+
+```css icon.css [active]
+.my-beer-icon {
+ /* Change this! */
+ width: 64px;
+ height: 64px;
+}
+```
+
+```tsx App.tsx
+import Beer from 'lucide-solid/icons/beer';
+
+import "./icon.css";
+
+function App() {
+ return (
+
+
+ );
+}
+
+export default App;
+
+```
+:::
+
+### Dynamically change the icon size based on the font size
+
+It is possible to resize icons based on font size. This can be achieved using the `em` unit. See this [MDN article](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size#ems) for more information on the `em` unit.
+
+::: sandpack {template=vite-solid editorHeight=300 dependencies="lucide-solid"}
+
+```css icon.css [active]
+.my-icon {
+ /* Icon size will relative to font-size of .text-wrapper */
+ width: 1em;
+ height: 1em;
+}
+
+.text-wrapper {
+ /* Change this! */
+ font-size: 96px;
+
+ /* layout stuff */
+ display: flex;
+ gap: 0.25em;
+ align-items: center;
+}
+```
+
+```tsx App.tsx
+import Star from 'lucide-solid/icons/star';
+import "./icon.css";
+
+function App() {
+ return (
+
+
+ );
+}
+
+export default App;
+```
+
+:::
+
+### Resizing with Tailwind
+
+`size-*` utilities can be used to adjust the size of the icon. See the [Tailwind documentation](https://tailwindcss.com/docs/width#setting-both-width-and-height) for more information on the `size-*` utilities.
+
+::: sandpack {template=vite-solid editorHeight=300 editorWidthPercentage=60 dependencies="lucide-solid" externalResources="https://cdn.tailwindcss.com"}
+
+```tsx App.tsx [active]
+import PartyPopper from 'lucide-solid/icons/party-popper';
+
+function App() {
+ return (
+ Yes
+
+
+ );
+}
+
+export default App;
+```
+:::
diff --git a/docs/guide/solid/basics/stroke-width.md b/docs/guide/solid/basics/stroke-width.md
new file mode 100644
index 000000000..8e4e84f96
--- /dev/null
+++ b/docs/guide/solid/basics/stroke-width.md
@@ -0,0 +1,67 @@
+---
+title: Stroke width - Solid
+description: Learn how to adjust the stroke width of icons in your Solid application using the `strokeWidth` prop or adjust the strokeWidth appearance using the `absoluteStrokeWidth` prop.
+---
+
+
+# Stroke width
+
+All icons are designed with SVG elements using strokes.
+These have a default stroke width of `2px`.
+
+The `strokeWidth` can be adjusted to create a different look of the icons.
+
+## Adjusting stroke width with `strokeWidth` prop
+
+::: sandpack {template=vite-solid showTabs=false editorHeight=300 editorWidthPercentage=60 dependencies="lucide-solid"}
+
+```tsx App.tsx [active]
+import FolderLock from 'lucide-solid/icons/folder-lock';
+
+function App() {
+ return (
+
+
+ );
+}
+
+export default App;
+```
+:::
+
+## Absolute stroke width
+
+When adjusting the `size` prop the size of the stroke width will be relative to the size of the icon, this is the default SVG behavior. The `absoluteStrokeWidth` prop is introduced to adjust this behavior to make the stroke width constant no matter the size of the icon.
+
+This means that when `absoluteStrokeWidth` is enabled and the `size` of the icons is set to `48px` the `strokeWidth` will still be `2px` on the screen.
+
+Note `2px` is the default stroke width for a Lucide icon, this can be adjusted to all sizes.
+
+
+
+### Adjusting stroke width with `absoluteStrokeWidth` prop
+
+Setting `absoluteStrokeWidth` to `true` will make the stroke width absolute.
+
+::: sandpack {template=vite-solid showTabs=false editorHeight=320 editorWidthPercentage=60 dependencies="lucide-solid"}
+
+```tsx App.tsx [active]
+import RollerCoaster from 'lucide-solid/icons/roller-coaster';
+
+function App() {
+ return (
+
+
+ );
+}
+
+export default App;
+```
+:::
diff --git a/docs/guide/solid/getting-started.md b/docs/guide/solid/getting-started.md
new file mode 100644
index 000000000..b058ad4d5
--- /dev/null
+++ b/docs/guide/solid/getting-started.md
@@ -0,0 +1,80 @@
+---
+title: Getting started - Solid
+description: This guide will help you get started with Lucide in your Solid project.
+---
+
+
+
+# Getting started
+
+This guide will help you get started with Lucide in your Solid project.
+Make sure you have a Solid environment set up. If you don't have one yet, you can create a new Solid project using Create Solid App, Vite, or any other Solid boilerplate of your choice.
+
+## Installation
+
+::: code-group
+
+```sh [pnpm]
+pnpm add lucide-solid
+```
+
+```sh [yarn]
+yarn add lucide-solid
+```
+
+```sh [npm]
+npm install lucide-solid
+```
+
+```sh [bun]
+bun add lucide-solid
+```
+
+:::
+
+## Importing your first icon
+
+Lucide is built with ES Modules, so it's completely tree-shakable.
+
+Each icon can be imported as a Solid component, which renders an inline SVG element. This way, only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away.
+
+```jsx
+import { Camera } from 'lucide-solid';
+
+// Usage
+const App = () => {
+ return Lucide Icons
+This is a Lucide icon ${MessageSquare}
+ + + + `); +}); + +const hostname = '127.0.0.1'; +const port = 3000; + +server.listen(port, hostname, () => { + console.log(`Server running at http://${hostname}:${port}/`); +}); +``` + +::: diff --git a/docs/guide/static/js-modules/web.md b/docs/guide/static/js-modules/web.md new file mode 100644 index 000000000..c69672f74 --- /dev/null +++ b/docs/guide/static/js-modules/web.md @@ -0,0 +1,34 @@ + + +# Use Lucide in Web + +:::warning Not recommended for high traffic production use +This library exports each svg as basic strings. We have a more optimized library for web. Which is smaller in size and supports color, size and strokeWidth. See [Lucide](../../lucide/index.md). +::: + +You can also import SVG strings in your web projects, with the lucide-static package. Each icon is exported as a string containing the SVG markup, which can be used in client-side rendering. + +::: sandpack {template=vanilla showTabs=false editorHeight=295 editorWidthPercentage=60 dependencies="lucide-static"} + +```html /index.html [active] + + + + + + + + +``` + +```js /index.js +import "./styles.css"; +import { Smile } from 'lucide-static'; + +document.getElementById("app").innerHTML = Smile; +``` +::: + +> Note: Each icon name is in PascalCase. You can find the icon names in the [Lucide Icons page](https://lucide.dev/icons). diff --git a/docs/guide/static/link-as-image.md b/docs/guide/static/link-as-image.md new file mode 100644 index 000000000..251b3da2e --- /dev/null +++ b/docs/guide/static/link-as-image.md @@ -0,0 +1,89 @@ +--- +description: Learn how to use Lucide icons as images in your project. +--- + + + +# Link as Image + +In some cases, you might want to use Lucide icons as images instead of inline SVGs. This can be useful for performance reasons or when you want to use the icons in contexts where inline SVGs are not supported. + +## In HTML + +You can link to the SVG files directly in your HTML using the `
+
+
+```
+
+```html [Webpack]
+
+
+
+
+
+```
+
+```html [CDN]
+
+
+
+
+
+```
+
+:::
+
+::: warning For CDN users
+Names of icons can change in future releases. Make sure you set an explicit version in the URL to avoid breaking changes.\
+`https://cdn.jsdelivr.net/npm/lucide-static@{version}/icons/smile.svg`
+:::
+
+## In CSS
+
+You can also use the icons as background images in your CSS. This is useful for adding icons to buttons, links, or other elements.
+
+::: code-group
+
+```css [Vite]
+.button {
+ background-image: url('node_modules/lucide-static/icons/smile.svg');
+}
+```
+
+```css [Webpack]
+.button {
+ background-image: url('~/lucide-static/icons/smile.svg');
+}
+```
+
+```css [CDN]
+.button {
+ background-image: url('https://cdn.jsdelivr.net/npm/lucide-static@latest/icons/smile.svg');
+}
+```
+
+:::
+
+::: warning For CDN users
+Names of icons can change in future releases. Make sure you set an explicit version in the URL to avoid breaking changes.\
+`https://cdn.jsdelivr.net/npm/lucide-static@{version}/icons/smile.svg`
+:::
+
+
diff --git a/docs/guide/static/migration.md b/docs/guide/static/migration.md
new file mode 100644
index 000000000..72261e47e
--- /dev/null
+++ b/docs/guide/static/migration.md
@@ -0,0 +1,20 @@
+# Migration from v0
+
+Brand icons are removed in v1. If you are using any of the following icons, you will need to replace them with a custom SVG or an alternative icon:
+
+- Chromium
+- Codepen
+- Codesandbox
+- Dribbble
+- Facebook
+- Figma
+- Framer
+- Github
+- Gitlab
+- Instagram
+- LinkedIn
+- Pocket
+- RailSymbol (based on the British Rail logo)
+- Slack
+
+We recommend to use the official SVG icons provided by the respective brands, most of them can be found on their websites or in their brand guidelines. Alternatively, you can use the icons from [Simple Icons](https://simpleicons.org/), which provides a large collection of brand icons. Also with links to the official Brand Guidelines and SVG icons.
diff --git a/docs/guide/static/svg-sprite.md b/docs/guide/static/svg-sprite.md
new file mode 100644
index 000000000..09747187a
--- /dev/null
+++ b/docs/guide/static/svg-sprite.md
@@ -0,0 +1,108 @@
+---
+description: Learn how to use SVG sprites with Lucide icons in your project, including basic usage and inline options.
+---
+
+# Using the SVG sprite
+
+Learn how to use SVG sprites with Lucide icons in your project, including basic usage and inline options.
+
+:::warning Not recommended for high traffic production use
+The SVG sprite includes all icons, which can significantly increase your app's bundle size and load time. For production environments, we recommend using a bundler with tree-shaking support to include only the icons you actually use. Consider using one of the framework-specific [packages](../../packages.md).
+:::
+
+SVG sprites can be loaded as individual image, or used inline with the `