-
-
-
-
-
-
-
-
-
-
`,
+
+
+
+
+
+
+
+
+
+ `,
styleUrls: ['./app.component.css', './icon.css'],
encapsulation: ViewEncapsulation.None,
})
-export class App {
-}
+export class App {}
```
:::
-### Absolute stroke width
+### Non-scaling strokes
-To keep the stroke width constant regardless of icon size, apply `vector-effect: non-scaling-stroke` to the icon's children. See [absolute-stroke-width](../basics/stroke-width.md#absolute-stroke-width) for more details.
+To keep the stroke width constant regardless of icon size, apply `vector-effect: non-scaling-stroke` to the icon's children. See [non-scaling strokes](../basics/stroke-width.md#non-scaling-strokes) for more details.
::: sandpack {template=angular editorHeight=300 dependencies="@lucide/angular"}
@@ -137,7 +137,7 @@ To keep the stroke width constant regardless of icon size, apply `vector-effect:
```
```ts /src/app/app.component.ts
-import { Component, ViewEncapsulation } from "@angular/core";
+import { Component, ViewEncapsulation } from '@angular/core';
import {
LucideTentTree,
LucideCaravan,
@@ -148,7 +148,7 @@ import {
LucideMap,
LucideCloudMoon,
LucideSparkles,
-} from "@lucide/angular";
+} from '@lucide/angular';
@Component({
selector: 'app',
@@ -164,21 +164,20 @@ import {
LucideSparkles,
],
template: `
-
-
-
-
-
-
-
-
-
-
`,
+
+
+
+
+
+
+
+
+
+ `,
styleUrls: ['./app.component.css', './icon.css'],
encapsulation: ViewEncapsulation.None,
})
-export class App {
-}
+export class App {}
```
:::
diff --git a/docs/guide/angular/basics/stroke-width.md b/docs/guide/angular/basics/stroke-width.md
index fab0df7ab..77327c0cb 100644
--- a/docs/guide/angular/basics/stroke-width.md
+++ b/docs/guide/angular/basics/stroke-width.md
@@ -1,7 +1,8 @@
---
title: Stroke width - Angular
-description: Learn how to adjust the stroke width of icons in your Angular application using the `strokeWidth` input or adjust the strokeWidth appearance using the `absoluteStrokeWidth` input.
+description: Learn how to adjust the stroke width of icons in your Angular application using the `strokeWidth` input or adjust the strokeWidth appearance using the `nonScalingStroke` input.
---
+
@@ -18,55 +19,58 @@ The `strokeWidth` can be adjusted to create a different look of the icons.
::: sandpack {template=angular showTabs=false editorHeight=400 editorWidthPercentage=60 dependencies="@lucide/angular"}
```ts /src/app/app.component.ts [active]
-import { Component, ViewEncapsulation } from "@angular/core";
-import { LucideFolderLock } from "@lucide/angular";
+import { Component, ViewEncapsulation } from '@angular/core';
+import { LucideFolderLock } from '@lucide/angular';
@Component({
selector: 'app',
imports: [LucideFolderLock],
- template: ``,
+ template: ``,
styleUrls: ['./app.component.css'],
encapsulation: ViewEncapsulation.None,
})
-export class App {
-}
+export class App {}
```
+
:::
-## Absolute stroke width
+## Non-scaling strokes
-When binding the `size` input, the icon's stroke width will be relative to its size, this is the default SVG behavior. The `absoluteStrokeWidth` input is introduced to adjust this behavior to make the stroke width constant no matter the size of the icon.
+When binding the `size` input, the icon's stroke width will be relative to its size, this is the default SVG behavior. The `nonScalingStroke` input 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.
+This means that when `nonScalingStroke` 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` input
+### Adjusting stroke width with `nonScalingStroke` input
-Setting `absoluteStrokeWidth` to `true` will make the stroke width absolute.
+Setting `nonScalingStroke` to `true` will make the stroke width non-scaling.
::: sandpack {template=angular showTabs=false editorHeight=400 editorWidthPercentage=60 dependencies="@lucide/angular"}
```ts /src/app/app.component.ts [active]
-import { Component, ViewEncapsulation } from "@angular/core";
-import { LucideRollerCoaster } from "@lucide/angular";
+import { Component, ViewEncapsulation } from '@angular/core';
+import { LucideRollerCoaster } from '@lucide/angular';
@Component({
selector: 'app',
imports: [LucideRollerCoaster],
template: `
-
-`,
+ `,
styleUrls: ['./app.component.css'],
encapsulation: ViewEncapsulation.None,
})
-export class App {
-}
+export class App {}
```
+
:::
diff --git a/docs/guide/angular/getting-started.md b/docs/guide/angular/getting-started.md
index bf45cb80e..805a5f841 100644
--- a/docs/guide/angular/getting-started.md
+++ b/docs/guide/angular/getting-started.md
@@ -2,6 +2,7 @@
title: Getting started - Angular
description: This guide will help you get started with Lucide in your Angular project.
---
+
@@ -18,10 +19,13 @@ The `strokeWidth` can be adjusted to create a different look of the icons.
::: sandpack {template=vanilla showTabs=false editorHeight=250 editorWidthPercentage=70 dependencies="lucide"}
```html /index.html [active]
-
+
-
+
@@ -29,34 +33,32 @@ The `strokeWidth` can be adjusted to create a different look of the icons.
```
```js /index.js
-import "./styles.css";
+import './styles.css';
import { createIcons, FolderLock } from 'lucide/dist/cjs/lucide';
createIcons({
icons: {
FolderLock,
- }
+ },
});
-
```
:::
+
-
-```
-
-## Props
-
-You can pass additional props to adjust the icon appearance.
-
-| name | type | default |
-|-----------------------|-----------|--------------|
-| `size` | *number* | 24 |
-| `color` | *string* | currentColor |
-| `strokeWidth` | *number* | 2 |
-| `absoluteStrokeWidth` | *boolean* | false |
-
-```html
-
-```
-
-## Global configuration
-
-You can use `provideLucideConfig` to configure the default property values as defined above:
-
-```ts{2,7-9}
-import { ApplicationConfig } from '@angular/core';
-import { provideLucideConfig } from '@lucide/angular';
-
-export const appConfig: ApplicationConfig = {
- providers: [
- // ...
- provideLucideConfig({
- strokeWidth: 1.5
- }),
- ]
-};
-```
-
-## Styling via CSS
-
-Icons can also be styled by using custom CSS classes:
-
-```html
-
-```
-
-```css
-svg.my-icon {
- width: 12px;
- height: 12px;
- stroke-width: 3;
-}
-```
-
-## With Lucide lab or custom icons
-
-[Lucide lab](https://github.com/lucide-icons/lucide-lab) is a collection of icons that are not part of the Lucide main library.
-
-While they aren't provided as standalone components, they can be still be passed to the `LucideIcon` component the same way as official icons:
-
-```html
-
-
-
-
-
-```
-
-```ts{2,6-7,11-12}
-import { provideLucideIcons } from '@lucide/angular';
-import { coconut } from '@lucide/lab';
-
-@Component({
- templateUrl: './foobar.html',
- // For using by name via provider:
- providers: [provideLucideIcons({ coconut })],
- imports: [LucideIcon]
-})
-export class Foobar {
- // For passing directly as LucideIconData:
- readonly CoconutIcon = coconut;
-}
-```
-
-## Troubleshooting
-
-### The icon is not being displayed
-
-If using per-icon-components:
-
-1. Ensure that the icon component is being imported, if using per-icon-components
-2. Check that the icon name matches exactly (case-sensitive)
-
-If using the dynamic component:
-
-1. Ensure the icon is provided via `provideLucideIcons()` if using string names
-2. Verify the icon is imported from `@lucide/angular` and not the legacy package
-
-### TypeScript errors?
-
-Make sure you're importing from `@lucide/angular` and not `lucide-angular`.
-
-### Icons render with wrong defaults
-
-Ensure `provideLucideConfig()` is used at the right level.
-
-## Migration guide
-
-Migrating from `lucide-angular`? Read our [comprehensive migration guide](https://github.com/lucide-icons/lucide/blob/main/packages/angular/MIGRATION.md).
diff --git a/docs/guide/packages/lucide-astro.md b/docs/guide/packages/lucide-astro.md
deleted file mode 100644
index 830f4f43a..000000000
--- a/docs/guide/packages/lucide-astro.md
+++ /dev/null
@@ -1,210 +0,0 @@
-# Lucide Astro
-
-Astro components for Lucide icons that work perfectly with Astro's island architecture and multi-framework support. Each icon is an Astro component that renders as an inline SVG, providing excellent performance for static sites and server-side rendering scenarios.
-
-**What you can accomplish:**
-- Use icons as Astro components with zero JavaScript runtime overhead
-- Build fast, static websites with optimized SVG icons
-- Integrate seamlessly with Astro's component islands and partial hydration
-- Create multi-framework applications where icons work across different UI libraries
-- Optimize performance with direct icon imports and build-time rendering
-
-## Installation
-
-::: code-group
-
-```sh [pnpm]
-pnpm add @lucide/astro
-```
-
-```sh [yarn]
-yarn add @lucide/astro
-```
-
-```sh [npm]
-npm install @lucide/astro
-```
-
-```sh [bun]
-bun add @lucide/astro
-```
-
-:::
-
-## How to use
-
-Lucide is built with ES Modules, so it's completely tree-shakable.
-
-Each icon can be imported as an Astro 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.
-
-### Example
-
-Default usage:
-
-```astro
----
-import { Skull } from '@lucide/astro';
----
-
-
-```
-
-```html [CDN]
-
-
-```
-
-:::
-
-#### In CSS:
-
-::: code-group
-
-```css [Webpack]
-.house-icon {
- background-image: url(~lucide-static/icons/house.svg);
-}
-```
-
-```css [CDN]
-.house-icon {
- background-image: url(https://unpkg.com/lucide-static@latest/icons/house.svg);
-}
-```
-
-:::
-
-Make sure you have the correct Webpack loader configured, such as [`url-loader`](https://v4.webpack.js.org/loaders/url-loader/).
-
-### SVG file as string
-
-To import an SVG as a string (e.g., for templating):
-
-::: code-group
-
-```js [Webpack]
-import arrowRightIcon from 'lucide-static/icons/arrow-right';
-```
-
-```js [Vite]
-import arrowRightIcon from 'lucide-static/icons/arrow-right.svg?raw';
-```
-
-:::
-
-You'll need an SVG loader like [`svg-inline-loader`](https://v4.webpack.js.org/loaders/svg-inline-loader/).
-
-
-### Using the SVG sprite
-
-:::danger
-[Not intended for production use.](#production-warning)
-:::
-
-You may also need an additional SVG loader to handle this.
-
-#### Basic sprite usage (not production-optimized):
-
-```html
-
-```
-
-#### Inline usage:
-
-```html
-
-
-
-
-```
-
-#### Inline with CSS helper class
-
-If you'd prefer, you can use CSS to hold your base SVG properties:
-
-```css
-.lucide-icon {
- width: 24px;
- height: 24px;
- stroke: currentColor;
- fill: none;
- stroke-width: 2;
- stroke-linecap: round;
- stroke-linejoin: round;
-}
-```
-
-...and update the SVG as follows:
-
-```xml
-
-
-
-
-```
-
-## Icon font
-
-:::danger
-[Not intended for production use.](#production-warning)
-:::
-
-Lucide icons are also available as a web font. To use them, you first need to include the corresponding stylesheet:
-
-::: code-group
-
-```css [Vite]
-@import 'lucide-static/font/lucide.css';
-```
-
-```css [Webpack]
-@import ('~lucide-static/font/lucide.css');
-```
-
-```html [CDN]
-
-```
-
-```html [Static asset]
-
-```
-
-:::
-
-Once included, use the format `icon-{kebab-case-name}`. You can copy icon names from the [Lucide Icons page](https://lucide.dev/icons).
-
-```html
-
-```
-
-If you're not using a package manager, you can download the font files directly from the [latest release](https://github.com/lucide-icons/lucide/releases/latest).
-
-## Node.js
-
-You can also import Lucide icons in Node.js projects:
-
-::: code-group
-
-```js [ESM]
-import {MessageSquare} from 'lucide-static';
-```
-
-```js [CommonJs]
-const {MessageSquare} = require('lucide-static');
-```
-
-:::
-
-> Note: Each icon name is in PascalCase.
-
-#### Express app example in Node.js
-
-```js
-import express from 'express';
-import {MessageSquare} from 'lucide-static';
-const app = express();
-const port = 3000;
-
-app.get('/', (req, res) => {
- res.send(`
-
-
-
- Lucide Icons
-This is a Lucide icon ${MessageSquare}
- - - - `); -}); - -app.listen(port, () => { - console.log(`Example app listening at http://localhost:${port}`); -}); -``` diff --git a/docs/guide/packages/lucide-svelte.md b/docs/guide/packages/lucide-svelte.md deleted file mode 100644 index d46582825..000000000 --- a/docs/guide/packages/lucide-svelte.md +++ /dev/null @@ -1,349 +0,0 @@ -# Lucide Svelte - -Svelte components for Lucide icons that work seamlessly with both Svelte 4 and Svelte 5. Each icon is a reactive Svelte component that renders as an inline SVG, providing excellent performance and integration with Svelte's reactive system and modern features. - -**What you can accomplish:** -- Use icons as Svelte components with full reactivity and TypeScript support -- Bind icon properties to reactive variables and stores -- Create dynamic icon systems that respond to application state -- Build type-safe interfaces with comprehensive TypeScript definitions -- Optimize bundle sizes with direct icon imports and tree-shaking - -## Installation - -::: code-group - -```sh [pnpm] -pnpm add @lucide/svelte -``` - -```sh [yarn] -yarn add @lucide/svelte -``` - -```sh [npm] -npm install @lucide/svelte -``` - -```sh [bun] -bun add @lucide/svelte -``` -::: -> `@lucide/svelte` is only for Svelte 5, for Svelte 4 use the `lucide-svelte` package. - -## How to use - -Lucide is built with ES Modules, so it's completely tree-shakable. - -Each icon can be imported as a Svelte 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. - -### Example - -Default usage: - -```svelte - - -
-
-
-```
-
-## Accessibility
-
-By default, we hide icons from screen readers using `aria-hidden="true"`.
-
-You can add accessibility attributes using aria-labels.
-
-```vue
-
-
-
-
-
+
@@ -33,8 +37,8 @@ function App() {
}
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.
@@ -55,8 +59,8 @@ For example, you can add a notification badge to an icon by using the `circle` S
::: sandpack {showTabs=false editorHeight=580 editorWidthPercentage=60 dependencies="lucide-preact"}
```jsx App.js [active]
-import { Mail } from "lucide-preact";
-import { h } from "preact";
+import { Mail } from 'lucide-preact';
+import { h } from 'preact';
function App() {
const hasUnreadMessages = true;
@@ -79,8 +83,8 @@ function App() {
}
export default App;
-
```
+
:::
### Example with text element
@@ -90,8 +94,8 @@ 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";
+import { File } from 'lucide-preact';
+import { h } from 'preact';
function App() {
return (
@@ -112,6 +116,6 @@ function App() {
}
export default App;
-
```
+
:::
diff --git a/docs/guide/preact/advanced/global-styling.md b/docs/guide/preact/advanced/global-styling.md
index c8e77feb7..47b24d7fd 100644
--- a/docs/guide/preact/advanced/global-styling.md
+++ b/docs/guide/preact/advanced/global-styling.md
@@ -2,6 +2,7 @@
title: Global Styling - Preact
description: Learn how to style all Lucide icons globally in your Preact application using CSS or the Lucide context provider.
---
+
@@ -34,8 +35,8 @@ const App = () => (
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.
@@ -74,9 +75,9 @@ import {
Sandwich,
Wine,
Dessert,
-} from "lucide-preact";
-import { h } from "preact";
-import "./icon.css";
+} from 'lucide-preact';
+import { h } from 'preact';
+import './icon.css';
function App() {
return (
@@ -99,10 +100,9 @@ export default App;
:::
+### Non-scaling strokes
-### 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.
+For global non-scaling 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 [non-scaling strokes](../basics/stroke-width.md#non-scaling-strokes) for more info.
::: sandpack {editorHeight=480 editorWidthPercentage=60 dependencies="lucide-preact"}
@@ -136,9 +136,9 @@ import {
Map,
CloudMoon,
Sparkles,
-} from "lucide-preact";
-import { h } from "preact";
-import "./icon.css";
+} from 'lucide-preact';
+import { h } from 'preact';
+import './icon.css';
function App() {
return (
diff --git a/docs/guide/preact/advanced/typescript.md b/docs/guide/preact/advanced/typescript.md
index b55c7c720..2d8dd926d 100644
--- a/docs/guide/preact/advanced/typescript.md
+++ b/docs/guide/preact/advanced/typescript.md
@@ -2,6 +2,7 @@
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.
@@ -16,12 +17,17 @@ interface LucideProps {
size?: number | string;
color?: string;
strokeWidth?: number;
+ nonScalingStroke?: boolean;
+ /**
+ * @deprecated
+ */
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
@@ -76,6 +82,7 @@ type IconNode = [elementName: string, attrs: Record
-
+
diff --git a/docs/guide/svelte/advanced/global-styling.md b/docs/guide/svelte/advanced/global-styling.md
index 42f1ea061..d96cc302f 100644
--- a/docs/guide/svelte/advanced/global-styling.md
+++ b/docs/guide/svelte/advanced/global-styling.md
@@ -2,6 +2,7 @@
title: Global Styling - Svelte
description: Learn how to style all Lucide icons globally in your Svelte application using CSS or the Lucide context provider.
---
+
@@ -89,11 +90,12 @@ import "./icon.css";
-
+
-
```
:::
@@ -54,7 +57,7 @@ For example, you can add a notification badge to an icon by using the `circle` S
```vue src/App.vue [active]
@@ -73,7 +76,6 @@ const hasUnreadMessages = true;
-
```
:::
@@ -86,7 +88,7 @@ You can also use the `text` SVG element to add text to your icon.
```vue src/App.vue [active]
@@ -104,7 +106,6 @@ import { File } from "@lucide/vue";
-
```
:::
diff --git a/docs/guide/vue/advanced/global-styling.md b/docs/guide/vue/advanced/global-styling.md
index eb7ce6ed5..25070059f 100644
--- a/docs/guide/vue/advanced/global-styling.md
+++ b/docs/guide/vue/advanced/global-styling.md
@@ -2,6 +2,7 @@
title: Global Styling - Vue
description: Learn how to style all Lucide icons globally in your Vue application using CSS or the Lucide context provider.
---
+
@@ -74,9 +75,9 @@ import {
Sandwich,
Wine,
Dessert,
-} from "@lucide/vue";
+} from '@lucide/vue';
-import "./icon.css";
+import './icon.css';
@@ -93,11 +94,12 @@ import "./icon.css";
```
+
:::
-### Absolute stroke width
+### Non-scaling strokes
-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.
+For global non-scaling 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 [non-scaling strokes](../basics/stroke-width.md#non-scaling-strokes) for more info.
::: sandpack {template=vue editorHeight=300 editorWidthPercentage=55 dependencies="@lucide/vue"}
@@ -132,9 +134,9 @@ import {
Map,
CloudMoon,
Sparkles,
-} from "@lucide/vue";
+} from '@lucide/vue';
-import "./icon.css";
+import './icon.css';
@@ -150,6 +152,6 @@ import "./icon.css";
diff --git a/docs/showcase.md b/docs/showcase.md
index c8884e6ff..3a7c2ea15 100644
--- a/docs/showcase.md
+++ b/docs/showcase.md
@@ -5,8 +5,8 @@ outline: 2
outlineTitle: Showcase
---
diff --git a/docs/vercel.json b/docs/vercel.json
index 623d457e6..b67281451 100644
--- a/docs/vercel.json
+++ b/docs/vercel.json
@@ -13,7 +13,7 @@
},
{
"source": "/docs/:slug(lucide-?.*)",
- "destination": "/guide/packages/:slug",
+ "destination": "/guide/:slug",
"permanent": true
},
{
@@ -58,48 +58,13 @@
"permanent": true
},
{
- "source": "/guide/packages/lucide-react",
- "destination": "/guide/react",
+ "source": "/guide/packages/lucide-:package",
+ "destination": "/guide/:package",
"permanent": true
},
{
- "source": "/guide/packages/lucide-vue-next",
- "destination": "/guide/vue",
- "permanent": true
- },
- {
- "source": "/guide/packages/lucide-vue",
- "destination": "/guide/vue",
- "permanent": true
- },
- {
- "source": "/guide/packages/lucide-svelte",
- "destination": "/guide/svelte",
- "permanent": true
- },
- {
- "source": "/guide/packages/lucide-solid",
- "destination": "/guide/solid",
- "permanent": true
- },
- {
- "source": "/guide/packages/lucide-angular",
- "destination": "/guide/angular",
- "permanent": true
- },
- {
- "source": "/guide/packages/lucide-preact",
- "destination": "/guide/preact",
- "permanent": true
- },
- {
- "source": "/guide/packages/lucide-astro",
- "destination": "/guide/astro",
- "permanent": true
- },
- {
- "source": "/guide/packages/lucide-static",
- "destination": "/guide/static",
+ "source": "/guide/packages/:package",
+ "destination": "/guide/:package",
"permanent": true
},
{
diff --git a/package.json b/package.json
index 0c1a28710..5604d3a27 100644
--- a/package.json
+++ b/package.json
@@ -60,6 +60,7 @@
"@vitest/coverage-v8": "4.1.10",
"@vitest/ui": "4.1.10",
"ajv-cli": "^5.0.0",
+ "cpy-cli": "^7.0.0",
"cspell": "^10.0.1",
"dotenv": "^17.4.2",
"eslint": "^10.8.0",
diff --git a/packages/angular/package.json b/packages/angular/package.json
index 05688d51c..e4a6de9eb 100644
--- a/packages/angular/package.json
+++ b/packages/angular/package.json
@@ -17,14 +17,15 @@
"scripts": {
"ng": "ng",
"watch": "ng build --watch --configuration development",
- "prebuild": "pnpm clean && pnpm copy:license && pnpm build:icons",
+ "prebuild": "pnpm clean && pnpm copy:license && pnpm copy:utils && pnpm build:icons",
"build": "pnpm prebuild && pnpm build:ng",
"copy:license": "cp ../../LICENSE ./LICENSE",
+ "copy:utils": "cpy ../../packages/shared/src/build/{buildLucideIconNode.ts,defaultAttributes.ts,types.ts} ../../packages/shared/src/utils/mergeClasses.ts ./src/utils/",
"clean": "rm -rf dist && rm -rf ./src/icons/*.ts",
"build:icons": "build-icons --output=./src --templateSrc=./scripts/exportTemplate.mts --renderUniqueKey --iconFileExtension=.ts --exportFileName=lucide-angular.ts --useDefaultExports=0",
"build:ng": "ng build --configuration production",
- "test": "pnpm build:icons && ng test --no-watch",
- "test:watch": "ng test",
+ "test": "pnpm copy:utils && pnpm build:icons && ng test --no-watch",
+ "test:watch": "pnpm copy:utils && ng test",
"lint": "eslint 'src/**/*.{js,jsx,ts,tsx,html,css,scss}' --quiet --fix",
"e2e": "ng e2e"
},
diff --git a/packages/angular/src/lucide-config.ts b/packages/angular/src/lucide-config.ts
index 8a4953127..3944638f1 100644
--- a/packages/angular/src/lucide-config.ts
+++ b/packages/angular/src/lucide-config.ts
@@ -19,6 +19,11 @@ export interface LucideConfig {
* @default 2
*/
strokeWidth: number;
+ /**
+ * Whether to use absolute stroke width.
+ * @deprecated Use `nonScalingStroke` instead.
+ */
+ absoluteStrokeWidth: boolean;
/**
* Whether stroke width should be scaled to appear uniform regardless of icon size.
* @default false
@@ -31,7 +36,7 @@ export interface LucideConfig {
* }
* ```
*/
- absoluteStrokeWidth: boolean;
+ nonScalingStroke: boolean;
}
/**
@@ -42,6 +47,7 @@ export const lucideDefaultConfig: LucideConfig = {
size: 24,
strokeWidth: 2,
absoluteStrokeWidth: false,
+ nonScalingStroke: false,
};
/**
diff --git a/packages/angular/src/lucide-hydration.spec.ts b/packages/angular/src/lucide-hydration.spec.ts
index 8521fa8e0..9b4757c85 100644
--- a/packages/angular/src/lucide-hydration.spec.ts
+++ b/packages/angular/src/lucide-hydration.spec.ts
@@ -8,7 +8,7 @@ import { LucideBadgeAlert } from './icons/badge-alert';
@Component({
// eslint-disable-next-line @angular-eslint/component-selector
selector: 'lucide-static-hydration-root',
- template: ``,
+ template: ``,
imports: [LucideBadgeAlert],
})
class StaticHydrationRootComponent {}
diff --git a/packages/angular/src/lucide-icon-base.spec.ts b/packages/angular/src/lucide-icon-base.spec.ts
index f90f91596..f5df57065 100644
--- a/packages/angular/src/lucide-icon-base.spec.ts
+++ b/packages/angular/src/lucide-icon-base.spec.ts
@@ -47,6 +47,7 @@ describe('LucideIconBase', () => {
let size: WritableSignal;
let strokeWidth: WritableSignal;
let absoluteStrokeWidth: WritableSignal;
+ let nonScalingStroke: WritableSignal;
const getSvgAttribute = (attr: string) => fixture.nativeElement.getAttribute(attr);
const expectSvgClasses = (classes: string[], svg: SVGElement = fixture.nativeElement) => {
for (const cssClass of classes) {
@@ -63,6 +64,7 @@ describe('LucideIconBase', () => {
inputBinding('size', size),
inputBinding('strokeWidth', strokeWidth),
inputBinding('absoluteStrokeWidth', absoluteStrokeWidth),
+ inputBinding('nonScalingStroke', nonScalingStroke),
],
});
}
@@ -72,6 +74,7 @@ describe('LucideIconBase', () => {
size = signal(undefined);
strokeWidth = signal(undefined);
absoluteStrokeWidth = signal(undefined);
+ nonScalingStroke = signal(undefined);
fixture = createComponent();
component = fixture.componentInstance;
});
@@ -135,6 +138,11 @@ describe('LucideIconBase', () => {
expect(getSvgAttribute('width')).toBe('18');
expect(getSvgAttribute('height')).toBe('18');
});
+ it('should set viewBox', () => {
+ size.set('18');
+ fixture.detectChanges();
+ expect(getSvgAttribute('viewBox')).toBe('0 0 24 24');
+ });
});
describe('strokeWidth', () => {
@@ -155,22 +163,38 @@ describe('LucideIconBase', () => {
});
describe('absoluteStrokeWidth', () => {
+ it('should adjust stroke width', () => {
+ strokeWidth.set(2);
+ size.set(32);
+ absoluteStrokeWidth.set(true);
+ fixture.detectChanges();
+ expect(getSvgAttribute('stroke-width')).toBe('1.5');
+ });
+ it('should not set vector-effect on children', () => {
+ absoluteStrokeWidth.set(true);
+ for (const child of fixture.nativeElement.children) {
+ expect(child.getAttribute('vector-effect')).toBeNull();
+ }
+ });
+ });
+
+ describe('nonScalingStroke', () => {
it('should not adjust stroke width', () => {
strokeWidth.set(2);
size.set(12);
- absoluteStrokeWidth.set(true);
+ nonScalingStroke.set(false);
fixture.detectChanges();
expect(getSvgAttribute('stroke-width')).toBe('2');
});
it('should not set vector-effect on children', () => {
- absoluteStrokeWidth.set(false);
+ nonScalingStroke.set(false);
fixture.detectChanges();
for (const child of getRenderedChildren()) {
expect(child.getAttribute('vector-effect')).toBeNull();
}
});
it('should set vector-effect on children', () => {
- absoluteStrokeWidth.set(true);
+ nonScalingStroke.set(true);
fixture.detectChanges();
for (const child of getRenderedChildren()) {
expect(child.getAttribute('vector-effect')).toBe('non-scaling-stroke');
@@ -207,6 +231,7 @@ describe('LucideIconBase', () => {
color: 'red',
strokeWidth: 1,
size: 12,
+ nonScalingStroke: true,
absoluteStrokeWidth: true,
}),
],
@@ -229,12 +254,12 @@ describe('LucideIconBase', () => {
describe('strokeWidth', () => {
it('should use stroke width from config', () => {
fixture.detectChanges();
- expect(getSvgAttribute('stroke-width')).toBe('1');
+ expect(getSvgAttribute('stroke-width')).toBe('2');
});
it('should use override stroke width from config', () => {
strokeWidth.set(3);
fixture.detectChanges();
- expect(getSvgAttribute('stroke-width')).toBe('3');
+ expect(getSvgAttribute('stroke-width')).toBe('6');
});
});
describe('size', () => {
@@ -253,14 +278,23 @@ describe('LucideIconBase', () => {
describe('absoluteStrokeWidth', () => {
it('should use absoluteStrokeWidth from config', () => {
fixture.detectChanges();
- for (const child of getRenderedChildren()) {
- expect(child.getAttribute('vector-effect')).toBe('non-scaling-stroke');
- }
+ expect(getSvgAttribute('stroke-width')).toBe('2');
});
it('should override absoluteStrokeWidth', () => {
absoluteStrokeWidth.set(false);
fixture.detectChanges();
- for (const child of getRenderedChildren()) {
+ expect(getSvgAttribute('stroke-width')).toBe('1');
+ });
+ });
+ describe('nonScalingStroke', () => {
+ it('should use nonScalingStroke from config', () => {
+ for (const child of fixture.nativeElement.children) {
+ expect(child.getAttribute('vector-effect')).toBe('non-scaling-stroke');
+ }
+ });
+ it('should override nonScalingStroke', () => {
+ nonScalingStroke.set(false);
+ for (const child of fixture.nativeElement.children) {
expect(child.getAttribute('vector-effect')).toBeNull();
}
});
diff --git a/packages/angular/src/lucide-icon-base.ts b/packages/angular/src/lucide-icon-base.ts
index 5708baab6..624307076 100644
--- a/packages/angular/src/lucide-icon-base.ts
+++ b/packages/angular/src/lucide-icon-base.ts
@@ -1,8 +1,9 @@
import { Component, computed, inject, input, Signal } from '@angular/core';
import { LUCIDE_CONFIG } from './lucide-config';
-import { LucideIconData, Nullable } from './types';
+import { LucideIconData, LucideIconNode, Nullable } from './types';
import defaultAttributes from './default-attributes';
import { lucideIconTemplate } from './lucide-icon-template';
+import buildLucideIconNode from './utils/buildLucideIconNode';
/**
* @internal
@@ -12,38 +13,17 @@ import { lucideIconTemplate } from './lucide-icon-template';
template: lucideIconTemplate,
host: {
...defaultAttributes,
- class: 'lucide',
- '[class]': 'iconClasses()',
- '[attr.width]': 'size()',
- '[attr.height]': 'size()',
- '[attr.stroke]': 'color()',
- '[attr.stroke-width]': 'strokeWidth()',
- '[attr.aria-hidden]': '!title()',
+ '[attr.class]': 'computedClass()',
+ '[attr.width]': 'computedWidth()',
+ '[attr.height]': 'computedHeight()',
+ '[attr.viewBox]': 'computedViewbox()',
+ '[attr.stroke]': 'computedStroke()',
+ '[attr.stroke-width]': 'computedStrokeWidth()',
+ '[attr.aria-hidden]': 'computedAriaHidden()',
},
})
export abstract class LucideIconBase {
protected abstract readonly icon: Signal>;
- protected readonly iconNodes = computed(() => {
- const node = this.icon()?.node ?? [];
- if (!this.absoluteStrokeWidth()) {
- return node;
- }
- return node.map(([name, attrs]) => [
- name,
- {
- 'vector-effect': 'non-scaling-stroke',
- ...attrs,
- },
- ]);
- });
- protected readonly iconClasses = computed(() => {
- const icon = this.icon();
- if (!icon) {
- return '';
- }
- const { name, aliases = [] } = icon;
- return [name, ...aliases].map((item) => `lucide-${item}`).join(' ');
- });
protected readonly iconConfig = inject(LUCIDE_CONFIG);
/**
* An optional accessible label for the icon.
@@ -58,6 +38,10 @@ export abstract class LucideIconBase {
* - If your icon is functional (e.g. used in place of a label), feel free to use this property.
*/
readonly title = input>();
+ /**
+ * Optional CSS classes for the icon.
+ */
+ readonly class = input>();
/**
* Width and height.
* @default 24
@@ -65,6 +49,16 @@ export abstract class LucideIconBase {
readonly size = input(this.iconConfig.size, {
transform: (value: Nullable) => value ?? this.iconConfig.size,
});
+ /**
+ * Icon width.
+ * @default 24
+ */
+ readonly width = input(null);
+ /**
+ * Icon height.
+ * @default 24
+ */
+ readonly height = input(null);
/**
* Stroke color.
* @default currentColor
@@ -80,9 +74,95 @@ export abstract class LucideIconBase {
transform: (value: Nullable) => value ?? this.iconConfig.strokeWidth,
});
/**
- * 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.
+ * Whether to use absolute stroke width.
*/
readonly absoluteStrokeWidth = input(this.iconConfig.absoluteStrokeWidth, {
transform: (value: Nullable) => value ?? this.iconConfig.absoluteStrokeWidth,
});
+ /**
+ * 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.
+ */
+ readonly nonScalingStroke = input(this.iconConfig.nonScalingStroke, {
+ transform: (value: Nullable) => value ?? this.iconConfig.nonScalingStroke,
+ });
+
+ /**
+ * @internal
+ */
+ protected readonly computedIcon = computed(() => {
+ const icon = this.icon();
+ return icon
+ ? buildLucideIconNode(icon, {
+ width: this.width() ?? this.size(),
+ height: this.height() ?? this.size(),
+ color: this.color(),
+ strokeWidth: this.strokeWidth(),
+ absoluteStrokeWidth: this.absoluteStrokeWidth(),
+ nonScalingStroke: this.nonScalingStroke(),
+ className: this.class() ?? undefined,
+ hasA11yProp: this.title() != null,
+ })
+ : null;
+ });
+
+ /**
+ * @internal
+ */
+ protected readonly computedAttributes = computed(
+ () => this.computedIcon()?.[1],
+ );
+
+ /**
+ * @internal
+ */
+ protected readonly computedIconNode = computed(() => this.computedIcon()?.[2] ?? []);
+
+ /**
+ * @internal
+ */
+ protected readonly computedWidth = computed(
+ () => this.computedAttributes()?.['width'] ?? this.iconConfig.size,
+ );
+
+ /**
+ * @internal
+ */
+ protected readonly computedHeight = computed(
+ () => this.computedAttributes()?.['height'] ?? this.iconConfig.size,
+ );
+
+ /**
+ * @internal
+ */
+ protected readonly computedStroke = computed(
+ () => this.computedAttributes()?.['stroke'] ?? this.iconConfig.color,
+ );
+
+ /**
+ * @internal
+ */
+ protected readonly computedStrokeWidth = computed(
+ () => this.computedAttributes()?.['stroke-width'] ?? this.iconConfig.strokeWidth,
+ );
+
+ /**
+ * @internal
+ */
+ protected readonly computedAriaHidden = computed(
+ () => this.computedAttributes()?.['aria-hidden'] === 'true',
+ );
+
+ /**
+ * @internal
+ */
+ protected readonly computedViewbox = computed(
+ () => this.computedAttributes()?.['viewBox'] ?? '0 0 24 24',
+ );
+
+ /**
+ * @internal
+ */
+ protected readonly computedClass = computed(
+ () => this.computedAttributes()?.['class'] ?? 'lucide',
+ );
}
diff --git a/packages/angular/src/lucide-icon-template.ts b/packages/angular/src/lucide-icon-template.ts
index ec95dc55f..5a6cde461 100644
--- a/packages/angular/src/lucide-icon-template.ts
+++ b/packages/angular/src/lucide-icon-template.ts
@@ -6,7 +6,7 @@ export const lucideIconTemplate = `@if (title(); as titleValue) {
{{ titleValue }}
}
>;
color: Signal>;
strokeWidth: Signal>;
+ /**
+ * @deprecated Use `nonScalingStroke` instead.
+ */
absoluteStrokeWidth: Signal>;
+ nonScalingStroke: Signal>;
}
/**
diff --git a/packages/astro/package.json b/packages/astro/package.json
index f55794442..24bed5562 100644
--- a/packages/astro/package.json
+++ b/packages/astro/package.json
@@ -43,7 +43,7 @@
"build:icons": "build-icons --output=./src --templateSrc=./scripts/exportTemplate.mts --renderUniqueKey --withAliases --aliasesFileExtension=.ts --iconFileExtension=.ts --exportFileName=index.ts --pretty=false",
"clean": "rm -rf dist && rm -rf stats && rm -rf ./src/icons/*.ts",
"copy:license": "cp ../../LICENSE ./LICENSE",
- "copy:utils": "mkdir -p ./src/utils && for f in hasA11yProp toKebabCase mergeClasses; do cp -f ../../packages/shared/src/utils/$f.ts ./src/utils/; done",
+ "copy:utils": "cpy ../../packages/shared/src/build/{buildLucideIconNode.ts,defaultAttributes.ts,types.ts} ../../packages/shared/src/utils/{hasA11yProp.ts,toKebabCase.ts,mergeClasses.ts} ./src/utils/",
"test": "pnpm copy:utils && pnpm build:icons && vitest run",
"test:watch": "pnpm build:icons && vitest run --watch"
},
diff --git a/packages/astro/scripts/exportTemplate.mts b/packages/astro/scripts/exportTemplate.mts
index c8a41ed3a..1c43db3e4 100644
--- a/packages/astro/scripts/exportTemplate.mts
+++ b/packages/astro/scripts/exportTemplate.mts
@@ -1,28 +1,27 @@
import base64SVG from '@lucide/build-icons/utils/base64SVG';
import defineExportTemplate from '@lucide/build-icons/utils/defineExportTemplate';
-export default defineExportTemplate(async ({
- componentName,
- iconName,
- children,
- getSvg,
- deprecated,
- deprecationReason,
-}) => {
- const svgContents = await getSvg();
- const svgBase64 = base64SVG(svgContents);
+export default defineExportTemplate(
+ async ({ componentName, iconName, iconData, getSvg, deprecated, deprecationReason }) => {
+ const svgContents = await getSvg();
+ const svgBase64 = base64SVG(svgContents);
- // Astro doesn't need keyed children in loops
- const keylessChildren = children.map((c) => {
- const [element, { key, ...otherAttrs }] = c;
- return [element, otherAttrs];
- });
+ // Astro doesn't need keyed children in loops
+ const keylessIconData = {
+ ...iconData,
+ node: iconData.node.map((child) => {
+ const [element, { key, ...otherAttrs }] = child;
+ return [element, otherAttrs];
+ }),
+ };
- // TODO: build-icons' `pretty` is set to false as the prettier
- // formatter uses babel which I'm not sure it supports typescript
- return `
+ // TODO: build-icons' `pretty` is set to false as the prettier
+ // formatter uses babel which I'm not sure it supports typescript
+ return `
import createLucideIcon from '../createLucideIcon';
-import type { AstroComponent } from '../types'
+import type { AstroComponent, LucideIconData } from '../types'
+
+const iconData: LucideIconData = ${JSON.stringify(keylessIconData)};
/**
* @component @name ${componentName}
@@ -35,8 +34,9 @@ import type { AstroComponent } from '../types'
* @returns {any} Astro Component
* ${deprecated ? `@deprecated ${deprecationReason}` : ''}
*/
-const ${componentName} = createLucideIcon('${iconName}', ${JSON.stringify(keylessChildren)}) as AstroComponent;
+const ${componentName} = createLucideIcon(iconData) as AstroComponent;
export default ${componentName};
`;
-});
+ },
+);
diff --git a/packages/astro/src/Icon.astro b/packages/astro/src/Icon.astro
index eb504dbad..7d54bedfa 100644
--- a/packages/astro/src/Icon.astro
+++ b/packages/astro/src/Icon.astro
@@ -1,32 +1,44 @@
---
-import defaultAttributes from './defaultAttributes';
+import buildLucideIconNode from './utils/buildLucideIconNode';
import type { IconProps as Props } from './types';
import { hasA11yProp } from './utils/hasA11yProp';
-
const {
color = 'currentColor',
size = 24,
+ width,
+ height,
'stroke-width': strokeWidth = 2,
absoluteStrokeWidth = false,
- iconNode = [],
+ nonScalingStroke = false,
+ iconNode,
+ icon = {
+ node: iconNode,
+ aliases: [],
+ size: 24,
+ },
class: className,
...rest
} = Astro.props;
+
+const [, builtIconAttributes, builtIconNode = []] = buildLucideIconNode(icon, {
+ color,
+ width: width ?? size,
+ height: height ?? size,
+ strokeWidth,
+ absoluteStrokeWidth,
+ nonScalingStroke,
+ className,
+ hasA11yProp: hasA11yProp(rest),
+});
+
+const iconAttributes = {
+ ...builtIconAttributes,
+ ...rest,
+};
---
-
`;
-exports[`Using lucide icon components > should not scale the strokeWidth when absoluteStrokeWidth is set 1`] = `
+exports[`Using lucide icon components > should apply vector-effect when nonScalingStroke is set 1`] = `
`;
@@ -118,8 +127,8 @@ exports[`Using lucide icon components > should pass children to the icon slot 1`
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
+ class="lucide lucide-face-slightly-smiling lucide-smile"
aria-hidden="true"
- class="lucide lucide-face-slightly-smiling"
>
@@ -148,8 +157,8 @@ exports[`Using lucide icon components > should render a component 1`] = `
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
+ class="lucide lucide-grid-3x3 lucide-grid lucide-grid-3-x-3"
aria-hidden="true"
- class="lucide lucide-grid-3x3"
>
should render the icon with default attr
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
+ class="lucide lucide-grid-3x3 lucide-grid lucide-grid-3-x-3"
+ aria-hidden="true"
+>
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`Using lucide icon components > should scale the strokeWidth when absoluteStrokeWidth is set 1`] = `
+