Merge branch 'main' of https://github.com/lucide-icons/lucide into fix-stable-code-points

.github/ISSUE_TEMPLATE/02_bug_report.yml

@@ -13,19 +13,16 @@ body:
       description: Which Lucide packages are affected? You may select more than one.
       options:
         - label: lucide
-        - label: lucide-angular (old version)
-        - label: '@lucide/angular (new version)'
-        - label: '@lucide/astro'
+        - label: lucide-angular
         - label: lucide-flutter
         - label: lucide-preact
         - label: lucide-react
         - label: lucide-react-native
         - label: lucide-solid
-        - label: lucide-static
-        - label: lucide-svelte (old version)
-        - label: '@lucide/svelte (new version)'
+        - label: lucide-svelte
         - label: lucide-vue
         - label: lucide-vue-next
+        - label: lucide-astro
         - label: Figma plugin
         - label: source/main
         - label: other/not relevant

.github/ISSUE_TEMPLATE/04_feature_request.yml

@@ -13,23 +13,19 @@ body:
       description: Which Lucide project do you wish this feature were added to? You may select more than one.
       options:
         - label: lucide
-        - label: lucide-angular (old version)
-        - label: '@lucide/angular (new version)'
-        - label: '@lucide/astro'
+        - label: lucide-angular
         - label: lucide-flutter
         - label: lucide-preact
         - label: lucide-react
         - label: lucide-react-native
         - label: lucide-solid
-        - label: lucide-static
-        - label: lucide-svelte (old version)
-        - label: '@lucide/svelte (new version)'
+        - label: lucide-svelte
         - label: lucide-vue
         - label: lucide-vue-next
+        - label: lucide-astro
         - label: Figma plugin
         - label: all JS packages
         - label: site
-        - label: other/not relevant
     validations:
       required: true
   - type: textarea

.github/labeler.yml

@@ -59,7 +59,6 @@
 🅰️ angular package:
   - changed-files:
       - any-glob-to-any-file:
-          - 'packages/angular/*'
           - 'packages/lucide-angular/*'
 
 # For changes in the lucide preact package

.github/workflows/angular.yml

@@ -1,41 +0,0 @@
-name: Lucide Angular checks
-
-on:
-  pull_request:
-    paths:
-      - packages/angular/**
-      - tools/build-icons/**
-      - pnpm-lock.yaml
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v4
-      - uses: actions/setup-node@v6
-        with:
-          cache: 'pnpm'
-          node-version-file: 'package.json'
-
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
-
-      - name: Build
-        run: pnpm --filter @lucide/angular build
-
-  test:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v4
-      - uses: actions/setup-node@v6
-        with:
-          cache: 'pnpm'
-          node-version-file: 'package.json'
-
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
-
-      - name: Test
-        run: pnpm --filter @lucide/angular test

.github/workflows/ci.yml

@@ -11,6 +11,9 @@ permissions:
   id-token: write # Required for OIDC
   contents: write
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+
 jobs:
   create-release:
     if: github.repository == 'lucide-icons/lucide' && startsWith(github.event.head_commit.message, 'feat(icons)')

.github/workflows/release.yml

@@ -22,6 +22,9 @@ permissions:
   id-token: write # Required for OIDC
   contents: write
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+
 jobs:
   pre-release:
     if: github.repository == 'lucide-icons/lucide' && contains('["ericfennis", "karsa-mistmere", "jguddas"]', github.actor)
@@ -58,7 +61,6 @@ jobs:
             'lucide-preact',
             'lucide-solid',
             'lucide-svelte',
-            '@lucide/angular',
             '@lucide/astro',
             '@lucide/svelte',
           ]
@@ -136,11 +138,8 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
-      - name: Outline svg Icons
-        run: pnpm build:outline-icons
-
       - name: Create font in ./lucide-font
-        run: pnpm build:font
+        run: pnpm build:font --saveCodePoints
 
       - name: 'Upload to Artifacts'
         uses: actions/upload-artifact@v4

.gitignore

@@ -14,6 +14,7 @@ coverage
 stats
 *.log
 outlined
+lucide-font
 packages/**/src/icons/*.js
 packages/**/src/icons/*.ts
 packages/**/src/icons/*.tsx

docs/.vitepress/data/packageData.json

@@ -95,24 +95,8 @@
       }
     ]
   },
-  "@lucide/angular": {
-    "order": 6,
-    "icon": "angular",
-    "shields": [
-      {
-        "alt": "npm",
-        "src": "https://img.shields.io/npm/v/@lucide/angular",
-        "href": "https://www.npmjs.com/package/@lucide/angular"
-      },
-      {
-        "alt": "npm",
-        "src": "https://img.shields.io/npm/dw/@lucide/angular",
-        "href": "https://www.npmjs.com/package/@lucide/angular"
-      }
-    ]
-  },
   "lucide-angular": {
-    "order": 7,
+    "order": 6,
     "icon": "angular",
     "shields": [
       {
@@ -128,7 +112,7 @@
     ]
   },
   "lucide-preact": {
-    "order": 8,
+    "order": 7,
     "icon": "preact",
     "shields": [
       {
@@ -146,7 +130,7 @@
   "@lucide/astro": {
     "docsAlias": "lucide-astro",
     "packageDirname": "astro",
-    "order": 9,
+    "order": 8,
     "icon": "astro",
     "iconDark": "astro-dark",
     "shields": [
@@ -163,7 +147,7 @@
     ]
   },
   "lucide-static": {
-    "order": 10,
+    "order": 9,
     "icon": "svg",
     "shields": [
       {

docs/.vitepress/sidebar.ts

@@ -69,39 +69,39 @@ const sidebar: UserConfig<DefaultTheme.Config>['themeConfig']['sidebar'] = {
           link: '/guide/packages/lucide',
         },
         {
-          text: 'React',
+          text: 'Lucide React',
           link: '/guide/packages/lucide-react',
         },
         {
-          text: 'Vue',
+          text: 'Lucide Vue',
           link: '/guide/packages/lucide-vue-next',
         },
         {
-          text: 'Svelte',
+          text: 'Lucide Svelte',
           link: '/guide/packages/lucide-svelte',
         },
         {
-          text: 'Solid',
+          text: 'Lucide Solid',
           link: '/guide/packages/lucide-solid',
         },
         {
-          text: 'React Native',
+          text: 'Lucide React Native',
           link: '/guide/packages/lucide-react-native',
         },
         {
-          text: 'Angular',
-          link: '/guide/packages/angular',
+          text: 'Lucide Angular',
+          link: '/guide/packages/lucide-angular',
         },
         {
-          text: 'Preact',
+          text: 'Lucide Preact',
           link: '/guide/packages/lucide-preact',
         },
         {
-          text: 'Astro',
+          text: 'Lucide Astro',
           link: '/guide/packages/lucide-astro',
         },
         {
-          text: 'Static',
+          text: 'Lucide Static',
           link: '/guide/packages/lucide-static',
         },
       ],

docs/.vitepress/theme/components/home/HomePackagesSection.data.ts

@@ -33,7 +33,7 @@ export default {
           label: 'Lucide documentation for Preact',
         },
         {
-          name: 'angular',
+          name: 'lucide-angular',
           logo: '/framework-logos/angular.svg',
           label: 'Lucide documentation for Angular',
         },

docs/guide/index.md

@@ -29,7 +29,7 @@ However, not everyone can understand them easily. Read more about [how to use Lu
 
 ## Official Packages
 
-Lucide's official packages are designed to work on different platforms, making it easier for users to integrate icons into their projects. The packages are available for various technologies, including [Web (Vanilla)](https://lucide.dev/guide/packages/lucide), [React](https://lucide.dev/guide/packages/lucide-react), [React Native](https://lucide.dev/guide/packages/lucide-react-native), [Vue](https://lucide.dev/guide/packages/lucide-vue), [Vue 3](https://lucide.dev/guide/packages/lucide-vue-next), [Svelte](https://lucide.dev/guide/packages/lucide-svelte), [Preact](https://lucide.dev/guide/packages/lucide-preact), [Solid](https://lucide.dev/guide/packages/lucide-solid), [Angular](https://lucide.dev/guide/packages/angular), [Astro](https://lucide.dev/guide/packages/lucide-astro), and [NodeJS](https://lucide.dev/guide/packages/lucide-static#nodejs).
+Lucide's official packages are designed to work on different platforms, making it easier for users to integrate icons into their projects. The packages are available for various technologies, including [Web (Vanilla)](https://lucide.dev/guide/packages/lucide), [React](https://lucide.dev/guide/packages/lucide-react), [React Native](https://lucide.dev/guide/packages/lucide-react-native), [Vue](https://lucide.dev/guide/packages/lucide-vue), [Vue 3](https://lucide.dev/guide/packages/lucide-vue-next), [Svelte](https://lucide.dev/guide/packages/lucide-svelte), [Preact](https://lucide.dev/guide/packages/lucide-preact), [Solid](https://lucide.dev/guide/packages/lucide-solid), [Angular](https://lucide.dev/guide/packages/lucide-angular), [Astro](https://lucide.dev/guide/packages/lucide-astro), and [NodeJS](https://lucide.dev/guide/packages/lucide-static#nodejs).
 
 ## Community
 

docs/guide/packages/angular.md

@@ -1,277 +0,0 @@
-# `@lucide/angular`
-
-::: warning
-This documentation is for `@lucide/angular`.
-
-To learn about our legacy package for Angular, please refer to [`lucide-angular`](./lucide-angular).
-:::
-
-A standalone, signal-based, zoneless implementation of Lucide icons for Angular.
-
-**What you can accomplish:**
-- Use icons as standalone Angular components with full dependency injection support
-- Configure icons globally through modern Angular providers
-- Integrate with Angular's reactive forms and data binding
-- Build scalable applications with tree-shaken icons and lazy loading support
-
-## Prerequisites
-
-This package requires Angular 17+ and uses standalone components, signals, and zoneless change detection.
-
-## Installation
-
-::: code-group
-
-```sh [pnpm]
-pnpm add @lucide/angular
-```
-
-```sh [yarn]
-yarn add @lucide/angular
-```
-
-```sh [npm]
-npm install @lucide/angular
-```
-
-```sh [bun]
-bun add @lucide/angular
-```
-
-:::
-
-## How to use
-
-### Standalone icons
-
-Every icon can be imported as a ready-to-use standalone component:
-
-```html
-<svg lucideFileText></svg>
-```
-
-```ts{2,7}
-import { Component } from '@angular/core';
-import { LucideFileText } from '@lucide/angular';
-
-@Component({
-  selector: 'app-foobar',
-  templateUrl: './foobar.html',
-  imports: [LucideFileText],
-})
-export class Foobar { }
-```
-
-::: tip
-Standalone icon components use the selector `svg[lucide{PascalCaseIconName}]`.
-
-This ensures minimal bloating of the DOM and the ability to directly manipulate all attributes of the resulting SVG element.
-:::
-
-### Dynamic icon component
-
-You may also use the dynamic `LucideIcon` component to dynamically render icons.
-
-#### With tree-shaken imports
-
-You may pass imported icons directly to the component:
-
-```html{3}
-@for (item of items) {
-  <a navbarItem [routerLink]="item.routerLink">
-    <svg [lucideIcon]="item.icon"></svg>
-    {{ item.title }}
-  </a>
-}
-```
-
-```ts{2,8,14,19}
-import { Component } from '@angular/core';
-import { LucideIcon, LucideHouse, LucideUsersRound } from '@lucide/angular';
-import { NavbarItem, NavbarItemModel } from './navbar-item';
-
-@Component({
-  selector: 'app-navbar',
-  templateUrl: './navbar.html',
-  imports: [LucideIcon, NavbarItem],
-})
-export class Navbar {
-  readonly items: NavbarItemModel[] = [
-    {
-      title: 'Home',
-      icon: LucideHouse,
-      routerLink: [''],
-    },
-    {
-      title: 'Users',
-      icon: LucideUsersRound,
-      routerLink: ['admin/users'],
-    },
-  ];
-}
-```
-
-#### With icons provided via dependency injection
-
-Alternatively, the component also accepts string inputs.
-
-To use icons this way, first, you have to provide icons via `provideLucideIcons`:
-
-:::code-group
-```ts{7-10} [app.config.ts]
-import { ApplicationConfig } from '@angular/core';
-import { provideLucideIcons, LucideCircleCheck, LucideCircleX } from '@lucide/angular';
-
-export const appConfig: ApplicationConfig = {
-  providers: [
-    // ...
-    provideLucideIcons([
-      LucideCircleCheck,
-      LucideCircleX,
-    ]),
-  ]
-};
-```
-
-```html [foobar.html]
-<svg lucideIcon="circle-check"></svg>
-```
-
-```ts{7} [foobar.ts]
-import { Component } from '@angular/core';
-import { LucideIcon } from '@lucide/angular';
-
-@Component({
-  selector: 'app-foobar',
-  templateUrl: './template-url',
-  imports: [LucideIcon],
-})
-export class Foobar { }
-```
-:::
-
-::: tip
-For optimal bundle size, provide icons at the highest appropriate level in your application.
-
-Providing all icons at the root level may increase your initial bundle size, while providing them at feature module level enables better code splitting.
-:::
-
-::: warning
-While you may provide your icons at any level of the dependency injection tree, be aware that [Angular's DI system is hierarchical](https://angular.dev/guide/di/defining-dependency-providers#injector-hierarchy-in-angular): `LucideIcon` will only have access to the icons provided closest to it in the tree.
-:::
-
-## Accessible labels
-
-You can use the `title` input property to set the [accessible name element](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/title) on the SVG:
-
-```html
-<svg lucideIcon="house" title="Go to dashboard"></svg>
-```
-
-This will result in the following output:
-
-```html{2}
-<svg class="lucide lucide-house" ...>
-  <title>Go to dashboard</title>
-  <!-- SVG paths -->
-</svg>
-```
-
-## 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
-<svg lucideHouse size="48" color="red" strokeWidth="1"></svg>
-```
-
-## 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
-<svg lucideHousePlus class="my-icon"></svg>
-```
-
-```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
-<!-- Directly as LucideIconData: -->
-<svg [lucideIcon]="CoconutIcon"></svg>
-
-<!-- As a provided icon by name: -->
-<svg lucideIcon="coconut"></svg>
-```
-
-```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).

docs/guide/packages/lucide-angular.md

@@ -1,11 +1,5 @@
 # Lucide Angular
 
-::: warning
-This documentation if for our legacy package for Angular.
-
-For our modern, standalone-first implementation, please refer to [`@lucide/angular`](./angular).
-:::
-
 Angular components and services for Lucide icons that integrate with Angular's dependency injection and component system. Provides both traditional module-based and modern standalone component approaches for maximum flexibility in Angular applications.
 
 **What you can accomplish:**

package.json

@@ -16,7 +16,7 @@
     "lucide-svelte": "pnpm --filter lucide-svelte",
     "lucide-static": "pnpm --filter lucide-static",
     "build:outline-icons": "pnpm --filter outline-svg start",
-    "build:font": "pnpm --filter docs prebuild:releaseJson && pnpm --filter build-font start",
+    "build:font": "pnpm --filter build-font start",
     "optimize": "node ./scripts/optimizeSvgs.mts",
     "addjsons": "node ./scripts/addMissingIconJsonFiles.mts",
     "checkIcons": "node ./scripts/checkIconsAndCategories.mts",

packages/angular/.eslintrc.js

@@ -1,38 +0,0 @@
-module.exports = {
-  root: true,
-  overrides: [
-    {
-      files: ['*.ts'],
-      extends: [
-        'eslint:recommended',
-        'plugin:@typescript-eslint/recommended',
-        'plugin:@angular-eslint/recommended',
-        'plugin:@angular-eslint/template/process-inline-templates',
-        'prettier',
-      ],
-      rules: {
-        '@angular-eslint/directive-selector': [
-          'error',
-          {
-            type: 'attribute',
-            prefix: 'lucide',
-            style: 'camelCase',
-          },
-        ],
-        '@angular-eslint/component-selector': [
-          'error',
-          {
-            type: 'attribute',
-            prefix: ['lucide'],
-            style: 'camelCase',
-          },
-        ],
-      },
-    },
-    {
-      files: ['*.html'],
-      extends: ['plugin:@angular-eslint/template/recommended'],
-      rules: {},
-    },
-  ],
-};

packages/angular/.vscode/extensions.json

@@ -1,4 +0,0 @@
-{
-  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
-  "recommendations": ["angular.ng-template"]
-}

packages/angular/.vscode/launch.json

@@ -1,20 +0,0 @@
-{
-  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-  "version": "0.2.0",
-  "configurations": [
-    {
-      "name": "ng serve",
-      "type": "chrome",
-      "request": "launch",
-      "preLaunchTask": "npm: start",
-      "url": "http://localhost:4200/"
-    },
-    {
-      "name": "ng test",
-      "type": "chrome",
-      "request": "launch",
-      "preLaunchTask": "npm: test",
-      "url": "http://localhost:9876/debug.html"
-    }
-  ]
-}

packages/angular/.vscode/tasks.json

@@ -1,42 +0,0 @@
-{
-  // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
-  "version": "2.0.0",
-  "tasks": [
-    {
-      "type": "npm",
-      "script": "start",
-      "isBackground": true,
-      "problemMatcher": {
-        "owner": "typescript",
-        "pattern": "$tsc",
-        "background": {
-          "activeOnStart": true,
-          "beginsPattern": {
-            "regexp": "(.*?)"
-          },
-          "endsPattern": {
-            "regexp": "bundle generation complete"
-          }
-        }
-      }
-    },
-    {
-      "type": "npm",
-      "script": "test",
-      "isBackground": true,
-      "problemMatcher": {
-        "owner": "typescript",
-        "pattern": "$tsc",
-        "background": {
-          "activeOnStart": true,
-          "beginsPattern": {
-            "regexp": "(.*?)"
-          },
-          "endsPattern": {
-            "regexp": "bundle generation complete"
-          }
-        }
-      }
-    }
-  ]
-}

packages/angular/MIGRATION.md

@@ -1,184 +0,0 @@
-# Migrating from `lucide-angular` ⇒ `@lucide/angular`
-
-## What changed
-
-`@lucide/angular` moves from a module + single component based API to a more modern Angular approach:
-
-- The library defines modern signal-based, standalone components, without zone.js based change detection.
-- Icons are consumed as standalone imports (one component per icon).
-- Dynamic icon registration is done via `provideLucideIcon()`, not using `NgModule`.
-- Static icons use per-icon components for better tree-shaking.
-- Dynamic icons still use a single dynamic component (`svg[lucideIcon]`).
-- Global defaults are configured via `provideLucideConfig()`.
-
----
-
-## Step 1 – Update dependencies
-
-Remove `lucide-angular`, add `@lucide/angular`, see http://lucide.dev/guide/packages/angular#installation
-
----
-
-## Step 2 – Replace `LucideAngularModule.pick(...)` with `provideLucideIcons(...)`
-
-> Notes:
-> - Old imports like `AirVentIcon` / `AlarmClock` from `lucide-angular` should be replaced with the new per-icon exports `LucideAirVent` and `LucideAlarmClock`.
-> - If you mostly used static icons, you may not need to provide them **at all**, please refer to Step 3.
-
-### Before
-
-#### NgModule based
-```ts
-import { LucideAngularModule, AirVent, AlarmClock } from 'lucide-angular';
-
-@NgModule({
-  imports: [
-    BrowserModule,
-    LucideAngularModule.pick({ AirVent, AlarmClock }),
-  ],
-})
-export class AppModule {}
-```
-
-#### Standalone
-
-```ts
-import { ApplicationConfig } from '@angular/core';
-
-export const appConfig: ApplicationConfig = {
-  providers: [
-    importProvidersFrom(LucideAngularModule.pick({ AirVent, AlarmClock })),
-  ]
-};
-```
-
-### After
-```ts
-import { ApplicationConfig } from '@angular/core';
-import { provideLucideIcons, LucideAirVent, LucideAlarmClock } from '@lucide/angular';
-
-export const appConfig: ApplicationConfig = {
-  providers: [
-    // ...
-    provideLucideIcons([
-      LucideAirVent,
-      LucideAlarmClock,
-    ]),
-  ]
-};
-```
-
----
-
-## Step 3 – Replace `<lucide-angular>` / `<lucide-icon>` / `<i-lucide>` / `<span-lucide>`
-
-The legacy package rendered everything through a single component. All of these selectors must be migrated to `<svg>` usage.
-
-### A. Static icons by name
-
-If the icon is known at build time, just use a static import:
-
-#### Before
-```html
-<lucide-angular name="circle-check"></lucide-angular>
-```
-
-#### After
-```html
-<svg lucideCircleCheck></svg>
-```
-
-### B. Static icons with icon data binding
-
-#### Before
-```ts
-import { CircleCheck } from 'lucide-angular';
-```
-
-```html
-<lucide-icon [img]="CircleCheck"></lucide-icon>
-```
-
-#### After
-
-```ts
-import { LucideCircleCheck } from '@lucide/angular';
-```
-
-```html
-<svg lucideCircleCheck></svg>
-```
-
-...and import `LucideCircleCheck` from `@lucide/angular`.
-
----
-
-### C. Dynamic icons
-
-If the icon varies at runtime, use the dynamic component:
-
-#### Before
-```html
-<lucide-icon [name]="item.icon"></lucide-icon>
-```
-
-#### After
-```html
-<svg [lucideIcon]="item.icon"></svg>
-```
-
----
-
-## Step 4 – Replace `LucideIconConfig` with `provideLucideConfig()`
-
-### Before
-```ts
-import { inject } from '@angular/core';
-import { LucideIconConfig } from 'lucide-angular';
-
-inject(LucideIconConfig).size = 12;
-```
-
-### After
-```ts
-import { provideLucideConfig } from '@lucide/angular';
-
-providers: [
-  provideLucideConfig({ size: 12 }),
-]
-```
-
-### Where to place it
-
-- App-wide: `AppModule.providers` or `bootstrapApplication(...providers)`
-- Feature-level: feature module providers
-- Component-level (standalone): component `providers`
-
----
-
-## 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.
-
----
-
-## TL;DR
-- `LucideAngularModule` ⇒ static: removed; dynamic: `LucideIcon`
-- `LucideAngularModule.pick(...)` ⇒ `provideLucideIcons(...)`
-- `<lucide-angular name="foo-bar">` ⇒ `<svg lucideFooBar>`
-- `<lucide-icon [name]="expr">` ⇒ `<svg [lucideIcon]="expr">`
-- `<lucide-icon [img]="expr">` ⇒ `<svg [lucideIcon]="expr">`
-- `LucideIconConfig` ⇒ `provideLucideConfig(...)`

packages/angular/README.md

@@ -1,77 +0,0 @@
-<p align="center">
-  <a href="https://github.com/lucide-icons/lucide">
-    <img src="https://lucide.dev/package-logos/lucide-angular.svg" alt="Lucide icon library for Angular applications." width="540">
-  </a>
-</p>
-
-<p align="center">
-Lucide icon library for Angular applications.
-</p>
-
-<div align="center">
-
-  [![npm](https://img.shields.io/npm/v/lucide-angular?color=blue)](https://www.npmjs.com/package/lucide-angular)
-  ![NPM Downloads](https://img.shields.io/npm/dw/lucide-angular)
-  [![GitHub](https://img.shields.io/github/license/lucide-icons/lucide)](https://lucide.dev/license)
-</div>
-
-<p align="center">
-  <a href="https://lucide.dev/guide/">About</a>
-  ·
-  <a href="https://lucide.dev/icons/">Icons</a>
-  ·
-  <a href="https://lucide.dev/guide/packages/lucide-angular">Documentation</a>
-  ·
-  <a href="https://lucide.dev/license">License</a>
-</p>
-
-# Lucide Angular
-
-A standalone, signal based, zoneless implementation of the Lucide icon library for Angular applications.
-
-## Installation
-
-```sh
-pnpm add @lucide/angular
-```
-
-```sh
-npm install @lucide/angular
-```
-
-```sh
-yarn add @lucide/angular
-```
-
-```sh
-bun add @lucide/angular
-```
-
-## Documentation
-
-For full documentation, visit [lucide.dev](https://lucide.dev/guide/packages/angular)
-
-## Migration guide
-
-Migrating from `lucide-angular`? Read our [comprehensive migration guide](./MIGRATION.md).
-
-## Community
-
-Join the [Discord server](https://discord.gg/EH6nSts) to chat with the maintainers and other users.
-
-## License
-
-Lucide is licensed under the ISC license. See [LICENSE](https://lucide.dev/license).
-
-## Sponsors
-
-<a href="https://vercel.com?utm_source=lucide&utm_campaign=oss">
-  <img src="https://lucide.dev/vercel.svg" alt="Powered by Vercel" width="200" />
-</a>
-
-<a href="https://www.digitalocean.com/?refcode=b0877a2caebd&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=badge"><img src="https://lucide.dev/digitalocean.svg" width="200" alt="DigitalOcean Referral Badge" /></a>
-
-### Awesome backers 🍺
-
-<a href="https://www.scipress.io?utm_source=lucide"><img src="https://lucide.dev/sponsors/scipress.svg" width="180" alt="Scipress sponsor badge" /></a>
-<a href="https://github.com/pdfme/pdfme"><img src="https://lucide.dev/sponsors/pdfme.svg" width="180" alt="pdfme sponsor badge" /></a>

packages/angular/angular.json

@@ -1,51 +0,0 @@
-{
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "version": 1,
-  "cli": {
-    "packageManager": "pnpm"
-  },
-  "newProjectRoot": ".",
-  "projects": {
-    "@lucide/angular": {
-      "projectType": "library",
-      "root": ".",
-      "sourceRoot": "./src",
-      "prefix": "lib",
-      "architect": {
-        "build": {
-          "builder": "@angular/build:ng-packagr",
-          "configurations": {
-            "production": {
-              "tsConfig": "./tsconfig.lib.prod.json"
-            },
-            "development": {
-              "tsConfig": "./tsconfig.lib.json"
-            }
-          },
-          "defaultConfiguration": "production"
-        },
-        "test": {
-          "builder": "@angular/build:unit-test",
-          "options": {
-            "tsConfig": "./tsconfig.spec.json",
-            "coverage": true,
-            "coverageReporters": ["html", "lcov"],
-            "coverageExclude": ["src/icons/*"],
-            "coverageThresholds": {
-              "statements": 80,
-              "branches": 80,
-              "functions": 80,
-              "lines": 80
-            }
-          }
-        },
-        "lint": {
-          "builder": "@angular-eslint/builder:lint",
-          "options": {
-            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
-          }
-        }
-      }
-    }
-  }
-}

packages/angular/ng-package.json

@@ -1,7 +0,0 @@
-{
-  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "./dist",
-  "lib": {
-    "entryFile": "./src/public-api.ts"
-  }
-}

packages/angular/package.json

@@ -1,76 +0,0 @@
-{
-  "name": "@lucide/angular",
-  "description": "A Lucide icon library package for Angular applications.",
-  "version": "0.0.1",
-  "author": "SMAH1",
-  "license": "ISC",
-  "homepage": "https://lucide.dev",
-  "bugs": "https://github.com/lucide-icons/lucide/issues",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/lucide-icons/lucide.git",
-    "directory": "packages/lucide-angular"
-  },
-  "publishConfig": {
-    "directory": "dist"
-  },
-  "scripts": {
-    "ng": "ng",
-    "watch": "ng build --watch --configuration development",
-    "prebuild": "pnpm clean && pnpm copy:license && pnpm build:icons",
-    "build": "pnpm prebuild && pnpm build:ng",
-    "copy:license": "cp ../../LICENSE ./LICENSE",
-    "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 prebuild && ng test --no-watch",
-    "test:watch": "ng test",
-    "lint": "npx eslint 'src/**/*.{js,jsx,ts,tsx,html,css,scss}' --quiet --fix",
-    "e2e": "ng e2e",
-    "version": "pnpm version --git-tag-version=false"
-  },
-  "prettier": {
-    "printWidth": 100,
-    "singleQuote": true,
-    "overrides": [
-      {
-        "files": "*.html",
-        "options": {
-          "parser": "angular"
-        }
-      }
-    ]
-  },
-  "private": true,
-  "devDependencies": {
-    "@angular-eslint/builder": "~21.1.0",
-    "@angular-eslint/eslint-plugin": "~21.1.0",
-    "@angular-eslint/eslint-plugin-template": "~21.1.0",
-    "@angular-eslint/schematics": "~21.1.0",
-    "@angular-eslint/template-parser": "~21.1.0",
-    "@angular/build": "^21.0.3",
-    "@angular/cli": "^21.0.3",
-    "@angular/common": "^21.0.0",
-    "@angular/compiler": "^21.0.0",
-    "@angular/compiler-cli": "^21.0.0",
-    "@angular/core": "^21.0.0",
-    "@angular/forms": "^21.0.0",
-    "@angular/platform-browser": "^21.0.0",
-    "@angular/router": "^21.0.0",
-    "@lucide/build-icons": "workspace:*",
-    "@lucide/helpers": "workspace:*",
-    "@vitest/browser-playwright": "^4.0.16",
-    "@vitest/coverage-v8": "^4.0.16",
-    "angular-eslint": "21.1.0",
-    "jsdom": "^27.1.0",
-    "ng-packagr": "^21.0.0",
-    "rxjs": "~7.8.0",
-    "tslib": "^2.3.0",
-    "typescript": "~5.9.2",
-    "vitest": "^4.0.16"
-  },
-  "peerDependencies": {
-    "@angular/common": "17.x - 21.x",
-    "@angular/core": "17.x - 21.x"
-  }
-}

packages/angular/scripts/exportTemplate.mts

@@ -1,68 +0,0 @@
-import base64SVG from '@lucide/build-icons/utils/base64SVG';
-import defineExportTemplate from '@lucide/build-icons/utils/defineExportTemplate';
-import { toPascalCase } from '@lucide/helpers';
-
-export default defineExportTemplate(async ({
-  componentName,
-  iconName,
-  children,
-  getSvg,
-  deprecated,
-  deprecationReason,
-  aliases = [],
-}) => {
-  const svgContents = await getSvg();
-  const svgBase64 = base64SVG(svgContents);
-  const angularComponentName = `Lucide${componentName}`;
-  const selectors = [`svg[lucide${toPascalCase(iconName)}]`];
-  const aliasComponentNames: string[] = [];
-  for (const alias of aliases) {
-    const aliasName = typeof alias === 'string' ? alias : alias.name;
-    const aliasComponentName = `Lucide${toPascalCase(aliasName)}`;
-    const aliasSelector = `svg[lucide${toPascalCase(aliasName)}]`;
-    if (!selectors.includes(aliasSelector)) {
-      selectors.push(aliasSelector);
-    }
-    if (aliasComponentName !== angularComponentName && !aliasComponentNames.includes(aliasComponentName)) {
-      aliasComponentNames.push(aliasComponentName);
-    }
-  }
-
-  return `\
-import { LucideIconData } from '../types';
-import { LucideIconBase } from '../lucide-icon-base';
-import { Component, signal } from '@angular/core';
-
-/**
- * @component @name ${componentName}
- * @description Lucide SVG icon component, renders SVG Element with children.
- *
- * @preview ![img](data:image/svg+xml;base64,${svgBase64}) - https://lucide.dev/icons/${iconName}
- * @see https://lucide.dev/guide/packages/lucide-angular - Documentation
- *
- * @param {Object} props - Lucide icons props and any valid SVG attribute
- * ${deprecated ? `@deprecated ${deprecationReason}` : ''}
-*/
-@Component({
-  selector: '${selectors.join(', ')}',
-  templateUrl: '../lucide-icon.html',
-  standalone: true,
-})
-export class ${angularComponentName} extends LucideIconBase {
-  static readonly iconName = '${iconName}';
-  static readonly iconData: LucideIconData = ${JSON.stringify(children)};
-  protected override readonly iconName = signal(${angularComponentName}.iconName);
-  protected override readonly iconData = signal(${angularComponentName}.iconData);
-}
-
-${aliasComponentNames.map((aliasComponentName) => {
-    return `
-/**
- * @deprecated
- * @see ${angularComponentName}
- */
-export const ${aliasComponentName} = ${angularComponentName};
-`;
-  }).join(`\n\n`)}
-`;
-});

packages/angular/src/default-attributes.ts

@@ -1,11 +0,0 @@
-export default {
-  xmlns: 'http://www.w3.org/2000/svg',
-  width: '24',
-  height: '24',
-  viewBox: '0 0 24 24',
-  fill: 'none',
-  stroke: 'currentColor',
-  'stroke-width': '2',
-  'stroke-linecap': 'round',
-  'stroke-linejoin': 'round',
-};

packages/angular/src/lucide-config.spec.ts

@@ -1,25 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { LUCIDE_CONFIG, lucideDefaultConfig, provideLucideConfig } from './lucide-config';
-
-describe('Lucide config', () => {
-  describe('LUCIDE_CONFIG', () => {
-    it('should use default', () => {
-      expect(TestBed.inject(LUCIDE_CONFIG)).toBe(lucideDefaultConfig);
-    });
-  });
-  describe('provideLucideConfig', () => {
-    it('should use defaults', () => {
-      TestBed.configureTestingModule({
-        providers: [
-          provideLucideConfig({
-            size: 18,
-          }),
-        ],
-      });
-      expect(TestBed.inject(LUCIDE_CONFIG)).toEqual({
-        ...lucideDefaultConfig,
-        size: 18,
-      });
-    });
-  });
-});

packages/angular/src/lucide-config.ts

@@ -1,67 +0,0 @@
-import { InjectionToken, Provider } from '@angular/core';
-
-/**
- * Lucide icon configuration options.
- */
-export interface LucideConfig {
-  /**
-   * Stroke color.
-   * @default currentColor
-   */
-  color: string;
-  /**
-   * Width and height.
-   * @default 24
-   */
-  size: number;
-  /**
-   * Stroke width
-   * @default 2
-   */
-  strokeWidth: number;
-  /**
-   * Whether stroke width should be scaled to appear uniform regardless of icon size.
-   * @default false
-   *
-   * @remarks
-   * Use CSS to set on SVG paths instead:
-   * ```css
-   * .lucide * {
-   *   vector-effect: non-scaling-stroke;
-   * }`
-   * ```
-   */
-  absoluteStrokeWidth: boolean;
-}
-
-/**
- * Default icon configuration options.
- */
-export const lucideDefaultConfig: LucideConfig = {
-  color: 'currentColor',
-  size: 24,
-  strokeWidth: 2,
-  absoluteStrokeWidth: false,
-};
-
-/**
- * Injection token for providing default configuration options.
- *
- * @internal Use {@link provideLucideConfig}
- */
-export const LUCIDE_CONFIG = new InjectionToken<LucideConfig>('Lucide icon config', {
-  factory: () => lucideDefaultConfig,
-});
-
-/**
- * Provider for default icon configuration options.
- */
-export function provideLucideConfig(config: Partial<LucideConfig>): Provider {
-  return {
-    provide: LUCIDE_CONFIG,
-    useValue: {
-      ...lucideDefaultConfig,
-      ...config,
-    },
-  };
-}

packages/angular/src/lucide-icon-base.ts

@@ -1,149 +0,0 @@
-import {
-  Component,
-  computed,
-  effect,
-  ElementRef,
-  inject,
-  input,
-  Renderer2,
-  Signal,
-} from '@angular/core';
-import { LUCIDE_CONFIG } from './lucide-config';
-import { LucideIconData, Nullable } from './types';
-import defaultAttributes from './default-attributes';
-import { formatFixed } from './utils/format-fixed';
-import { toKebabCase } from './utils/to-kebab-case';
-
-function transformNumericStringInput(
-  value: Nullable<string | number>,
-  defaultValue: number,
-): number {
-  if (typeof value === 'string') {
-    const parsedValue = parseInt(value, 10);
-    if (isNaN(parsedValue)) {
-      return defaultValue;
-    }
-    return parsedValue;
-  }
-  return value ?? defaultValue;
-}
-
-/**
- * @internal
- */
-@Component({
-  // eslint-disable-next-line @angular-eslint/component-selector
-  selector: 'svg[lucideIcon]',
-  templateUrl: './lucide-icon.html',
-  host: {
-    ...defaultAttributes,
-    class: 'lucide',
-    '[attr.width]': 'size().toString(10)',
-    '[attr.height]': 'size().toString(10)',
-    '[attr.stroke]': 'color()',
-    '[attr.stroke-width]': 'computedStrokeWidth()',
-    '[attr.aria-hidden]': 'ariaHidden()',
-  },
-})
-export abstract class LucideIconBase {
-  protected abstract readonly iconName: Signal<Nullable<string>>;
-  protected abstract readonly iconData: Signal<Nullable<LucideIconData>>;
-  protected readonly iconConfig = inject(LUCIDE_CONFIG);
-  protected readonly elRef = inject(ElementRef);
-  protected readonly renderer = inject(Renderer2);
-  protected readonly ariaHidden = computed(() => {
-    return !this.title();
-  });
-  /**
-   * An optional accessible label for the icon.
-   * - If provided, it will add the title as an [`<svg:title>` element](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/title).
-   * - If not provided, the component will add an `aria-hidden="true"` attribute automatically.
-   *
-   * @remarks
-   * Please refer to our [Accessibility guide](https://lucide.dev/guide/advanced/accessibility) regarding this matter.
-   * Adding accessible labels to icons is normally not necessary:
-   * - If your icon is decorative (as most icons are) just leave it as hidden from screen readers.
-   * - 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.
-   * - If your icon is functional (e.g. used in place of a label), feel free to use this property.
-   */
-  readonly title = input<Nullable<string>>();
-  /**
-   * Width and height.
-   * @default 24
-   */
-  readonly size = input(this.iconConfig.size, {
-    transform: (value: Nullable<string | number>) =>
-      transformNumericStringInput(value, this.iconConfig.size),
-  });
-  /**
-   * Stroke color.
-   * @default currentColor
-   */
-  readonly color = input(this.iconConfig.color, {
-    transform: (value: Nullable<string>) => value ?? this.iconConfig.color,
-  });
-  /**
-   * Stroke width
-   * @default 2
-   */
-  readonly strokeWidth = input(this.iconConfig.strokeWidth, {
-    transform: (value: Nullable<string | number>) =>
-      transformNumericStringInput(value, this.iconConfig.strokeWidth),
-  });
-  /**
-   * Whether stroke width should be scaled to appear uniform regardless of icon size.
-   *
-   * @remarks
-   * Use CSS to set on SVG paths instead:
-   * ```css
-   * .lucide * {
-   *   vector-effect: non-scaling-stroke;
-   * }
-   * ```
-   */
-  readonly absoluteStrokeWidth = input(this.iconConfig.absoluteStrokeWidth, {
-    transform: (value: Nullable<boolean>) => value ?? this.iconConfig.absoluteStrokeWidth,
-  });
-  protected readonly computedStrokeWidth = computed(() => {
-    const strokeWidth = this.strokeWidth();
-    const size = this.size();
-    return this.absoluteStrokeWidth()
-      ? formatFixed(strokeWidth / (size / 24))
-      : strokeWidth.toString(10);
-  });
-
-  constructor() {
-    effect((onCleanup) => {
-      const icon = this.iconData();
-      if (icon) {
-        const elements = icon.map(([name, attrs]) => {
-          const element = this.renderer.createElement(name, 'http://www.w3.org/2000/svg');
-          Object.entries(attrs).forEach(([name, value]) =>
-            this.renderer.setAttribute(
-              element,
-              name,
-              typeof value === 'number' ? value.toString(10) : value,
-            ),
-          );
-          this.renderer.appendChild(this.elRef.nativeElement, element);
-          return element;
-        });
-        onCleanup(() => {
-          elements.forEach((element) =>
-            this.renderer.removeChild(this.elRef.nativeElement, element),
-          );
-        });
-      }
-    });
-    effect((onCleanup) => {
-      const name = this.iconName();
-      if (name) {
-        const cssClass = `lucide-${toKebabCase(name)}`;
-        this.renderer.addClass(this.elRef.nativeElement, cssClass);
-        onCleanup(() => {
-          this.renderer.removeClass(this.elRef.nativeElement, cssClass);
-        });
-      }
-    });
-  }
-}

packages/angular/src/lucide-icon.html

@@ -1,4 +0,0 @@
-@if (title(); as titleValue) {
-  <title>{{ titleValue }}</title>
-}
-<ng-content />

packages/angular/src/lucide-icon.spec.ts

@@ -1,243 +0,0 @@
-import { Component, input, inputBinding, signal, WritableSignal } from '@angular/core';
-import { LucideIcon } from './lucide-icon';
-import { LucideIconData, LucideIconInput } from './types';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { provideLucideIcons } from './lucide-icons';
-import { LucideActivity } from './icons/activity';
-import { By } from '@angular/platform-browser';
-
-@Component({
-  template: `@if (icon(); as iconData) {
-    <svg [lucideIcon]="iconData">
-      <rect x="1" y="1" width="22" height="22" />
-    </svg>
-  }`,
-  imports: [LucideIcon],
-})
-class TestHostComponent {
-  readonly icon = input<LucideIconData>();
-}
-
-describe('LucideIcon', () => {
-  let component: LucideIcon;
-  let fixture: ComponentFixture<LucideIcon>;
-  let icon: WritableSignal<LucideIconInput | null | undefined>;
-  let name: WritableSignal<string | undefined>;
-  let title: WritableSignal<string | undefined>;
-  let color: WritableSignal<string | undefined>;
-  let size: WritableSignal<string | number | undefined>;
-  let strokeWidth: WritableSignal<string | number | undefined>;
-  let absoluteStrokeWidth: WritableSignal<boolean | undefined>;
-  const getSvgAttribute = (attr: string) => fixture.nativeElement.getAttribute(attr);
-  const testIcon: LucideIconData = [['polyline', { points: '1 1 22 22' }]];
-  const testIcon2: LucideIconData = [
-    ['circle', { cx: 12, cy: 12, r: 8 }],
-    ['polyline', { points: '1 1 22 22' }],
-  ];
-  beforeEach(async () => {
-    TestBed.configureTestingModule({
-      providers: [provideLucideIcons({ demo: testIcon })],
-    });
-    icon = signal('demo');
-    name = signal(undefined);
-    title = signal(undefined);
-    color = signal(undefined);
-    size = signal(undefined);
-    strokeWidth = signal(undefined);
-    absoluteStrokeWidth = signal(undefined);
-    fixture = TestBed.createComponent(LucideIcon, {
-      inferTagName: true,
-      bindings: [
-        inputBinding('lucideIcon', icon),
-        inputBinding('name', name),
-        inputBinding('title', title),
-        inputBinding('color', color),
-        inputBinding('size', size),
-        inputBinding('strokeWidth', strokeWidth),
-        inputBinding('absoluteStrokeWidth', absoluteStrokeWidth),
-      ],
-    });
-    component = fixture.componentInstance;
-  });
-
-  it('should create', () => {
-    fixture.detectChanges();
-    expect(component).toBeTruthy();
-  });
-
-  it('should render children', () => {
-    icon.set(testIcon2);
-    fixture.detectChanges();
-    expect(fixture.nativeElement.innerHTML).toBe(
-      '<!--container--><circle cx="12" cy="12" r="8"></circle><polyline points="1 1 22 22"></polyline>',
-    );
-  });
-
-  it('should remove children on change', () => {
-    icon.set(null);
-    fixture.detectChanges();
-    expect(fixture.nativeElement.innerHTML).toBe('<!--container-->');
-  });
-
-  describe('iconInput', () => {
-    it('should support LucideIconData input', () => {
-      icon.set(testIcon);
-      name.set('custom-name');
-      fixture.detectChanges();
-
-      expect(component['iconData']()).toBe(testIcon);
-      expect(component['iconName']()).toBe('custom-name');
-      expect(fixture.nativeElement.innerHTML).toBe(
-        '<!--container--><polyline points="1 1 22 22"></polyline>',
-      );
-    });
-    it('should support LucideIconComponentType input', () => {
-      icon.set(LucideActivity);
-      fixture.detectChanges();
-
-      expect(component['iconData']()).toBe(LucideActivity.iconData);
-      expect(component['iconName']()).toBe(LucideActivity.iconName);
-    });
-    it('should support string icon name', () => {
-      icon.set('demo');
-      fixture.detectChanges();
-
-      expect(component['iconData']()).toBe(testIcon);
-      expect(component['iconName']()).toBe('demo');
-    });
-    it('should throw error if no icon founds', () => {
-      icon.set('invalid');
-      expect(() => fixture.detectChanges()).toThrowError(`Unable to resolve icon 'invalid'`);
-    });
-  });
-
-  describe('class', () => {
-    it('should add all classes', () => {
-      fixture.detectChanges();
-      expect(getSvgAttribute('class')).toBe('lucide lucide-demo');
-    });
-    it('should add class from name, even if icon has name', () => {
-      icon.set(LucideActivity);
-      name.set('custom-name');
-      fixture.detectChanges();
-
-      expect(getSvgAttribute('class')).toBe('lucide lucide-custom-name');
-    });
-    it('should add class icon if available', () => {
-      icon.set(LucideActivity);
-      fixture.detectChanges();
-
-      expect(getSvgAttribute('class')).toBe('lucide lucide-activity');
-    });
-    it('should remove class on change', () => {
-      icon.set(null);
-      fixture.detectChanges();
-      expect(getSvgAttribute('class')).toBe('lucide');
-    });
-  });
-
-  describe('color', () => {
-    it('should default to currentColor', () => {
-      fixture.detectChanges();
-      expect(getSvgAttribute('stroke')).toBe('currentColor');
-    });
-    it('should set color', () => {
-      color.set('red');
-      fixture.detectChanges();
-      expect(getSvgAttribute('stroke')).toBe('red');
-    });
-  });
-
-  describe('size', () => {
-    it('should default to 24', () => {
-      fixture.detectChanges();
-      expect(getSvgAttribute('width')).toBe('24');
-      expect(getSvgAttribute('height')).toBe('24');
-    });
-    it('should set size', () => {
-      size.set(12);
-      fixture.detectChanges();
-      expect(getSvgAttribute('width')).toBe('12');
-      expect(getSvgAttribute('height')).toBe('12');
-    });
-    it('should allow string size', () => {
-      size.set('18');
-      fixture.detectChanges();
-      expect(getSvgAttribute('width')).toBe('18');
-      expect(getSvgAttribute('height')).toBe('18');
-    });
-    it('should use default on invalid string', () => {
-      size.set('large');
-      fixture.detectChanges();
-      expect(getSvgAttribute('width')).toBe('24');
-      expect(getSvgAttribute('height')).toBe('24');
-    });
-  });
-
-  describe('strokeWidth', () => {
-    it('should default to 2', () => {
-      fixture.detectChanges();
-      expect(getSvgAttribute('stroke-width')).toBe('2');
-    });
-    it('should set stroke width', () => {
-      strokeWidth.set(1.41);
-      fixture.detectChanges();
-      expect(getSvgAttribute('stroke-width')).toBe('1.41');
-    });
-    it('should allow string stroke width', () => {
-      strokeWidth.set('1px');
-      fixture.detectChanges();
-      expect(getSvgAttribute('stroke-width')).toBe('1');
-    });
-  });
-
-  describe('absoluteStrokeWidth', () => {
-    it('should not adjust stroke width', () => {
-      strokeWidth.set(2);
-      size.set(12);
-      absoluteStrokeWidth.set(false);
-      fixture.detectChanges();
-      expect(getSvgAttribute('stroke-width')).toBe('2');
-    });
-    it('should adjust stroke width', () => {
-      strokeWidth.set(2);
-      size.set(12);
-      absoluteStrokeWidth.set(true);
-      fixture.detectChanges();
-      expect(getSvgAttribute('stroke-width')).toBe('4');
-    });
-  });
-
-  describe('title', () => {
-    it('should set title if provided', () => {
-      title.set('Foobar');
-      fixture.detectChanges();
-      const titleEl = fixture.debugElement.query(By.css('title')).nativeElement;
-      expect(titleEl).toBeDefined();
-      expect(titleEl.textContent).toBe('Foobar');
-    });
-    it('should not set aria-hidden when title is set', () => {
-      title.set('Foobar');
-      fixture.detectChanges();
-      expect(getSvgAttribute('aria-hidden')).toBeUndefined;
-    });
-    it('should set aria-hidden if no title is provided', () => {
-      title.set(undefined);
-      fixture.detectChanges();
-      expect(getSvgAttribute('aria-hidden')).toBeUndefined;
-    });
-  });
-
-  describe('content projection', () => {
-    it('should project content', () => {
-      const hostFixture = TestBed.createComponent(TestHostComponent);
-      hostFixture.componentRef.setInput('icon', testIcon);
-      hostFixture.detectChanges();
-      hostFixture.componentRef.setInput('icon', testIcon2);
-      hostFixture.detectChanges();
-      const rect = hostFixture.debugElement.query(By.css('rect')).nativeElement;
-      expect(rect).toBeInstanceOf(SVGElement);
-      expect(rect.outerHTML).toBe('<rect x="1" y="1" width="22" height="22"></rect>');
-    });
-  });
-});

packages/angular/src/lucide-icon.ts

@@ -1,65 +0,0 @@
-import { Component, computed, inject, input } from '@angular/core';
-import { isLucideIconComponent, isLucideIconData, LucideIconInput } from './types';
-import { LucideIconBase } from './lucide-icon-base';
-import { LUCIDE_ICONS } from './lucide-icons';
-import { LucideIconData } from './types';
-import { toKebabCase } from './utils/to-kebab-case';
-
-interface LucideResolvedIcon {
-  name?: string | null;
-  data: LucideIconData;
-}
-
-/**
- * Generic icon component for rendering LucideIconData.
- */
-@Component({
-  selector: 'svg[lucideIcon]',
-  templateUrl: './lucide-icon.html',
-  standalone: true,
-})
-export class LucideIcon extends LucideIconBase {
-  protected readonly icons = inject(LUCIDE_ICONS);
-  readonly name = input<string | null>();
-  readonly iconInput = input.required<LucideIconInput | null>({
-    alias: 'lucideIcon',
-  });
-  readonly resolvedIcon = computed<LucideResolvedIcon | null>(() => {
-    return this.resolveIcon(this.name(), this.iconInput());
-  });
-  protected override readonly iconName = computed(() => {
-    return this.resolvedIcon()?.name;
-  });
-  protected override readonly iconData = computed(() => {
-    return this.resolvedIcon()?.data;
-  });
-
-  protected resolveIcon(
-    name: string | null | undefined,
-    icon: LucideIconInput | null | undefined,
-  ): LucideResolvedIcon | null {
-    if (isLucideIconData(icon)) {
-      return {
-        name,
-        data: icon,
-      };
-    } else if (isLucideIconComponent(icon)) {
-      return {
-        name: name ?? icon.iconName,
-        data: icon.iconData,
-      };
-    } else if (typeof icon === 'string') {
-      const name = toKebabCase(icon);
-      if (name in this.icons) {
-        return {
-          name,
-          data: this.icons[name],
-        };
-      } else {
-        throw new Error(`Unable to resolve icon '${icon}'`);
-      }
-    }
-
-    return null;
-  }
-}

packages/angular/src/lucide-icons.spec.ts

@@ -1,44 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { LUCIDE_ICONS, provideLucideIcons } from './lucide-icons';
-import { LucideIconData } from './types';
-import { LucideActivity } from './icons/activity';
-import { LucideCircle } from './icons/circle';
-import { LucideSquareX } from './icons/square-x';
-
-describe('Lucide icons', () => {
-  describe('LUCIDE_ICONS', () => {
-    it('should default to empty map', () => {
-      expect(TestBed.inject(LUCIDE_ICONS)).toEqual({});
-    });
-  });
-  describe('provideLucideIcons', () => {
-    const mockIcon: LucideIconData = [['polyline', { points: '1 1 22 22' }]];
-    const mockIcon2: LucideIconData = [['circle', { cx: 12, cy: 12, r: 8 }]];
-    it('should accept dictionary of icons', () => {
-      TestBed.configureTestingModule({
-        providers: [
-          provideLucideIcons({
-            DemoIcon: mockIcon,
-            MockIcon: mockIcon2,
-            TestIcon: LucideActivity,
-          }),
-        ],
-      });
-      expect(TestBed.inject(LUCIDE_ICONS)).toEqual({
-        'demo-icon': mockIcon,
-        'mock-icon': mockIcon2,
-        [LucideActivity.iconName]: LucideActivity.iconData,
-      });
-    });
-    it('should accept list of icon components', () => {
-      TestBed.configureTestingModule({
-        providers: [provideLucideIcons([LucideActivity, LucideSquareX, LucideCircle])],
-      });
-      expect(TestBed.inject(LUCIDE_ICONS)).toEqual({
-        [LucideActivity.iconName]: LucideActivity.iconData,
-        [LucideSquareX.iconName]: LucideSquareX.iconData,
-        [LucideCircle.iconName]: LucideCircle.iconData,
-      });
-    });
-  });
-});

packages/angular/src/lucide-icons.ts

@@ -1,64 +0,0 @@
-import { InjectionToken, Provider } from '@angular/core';
-import { LucideIconData, LucideIcons } from './types';
-import { isLucideIconComponent, LucideIconComponentType } from './types';
-import { toKebabCase } from './utils/to-kebab-case';
-
-/**
- * Injection token for providing Lucide icons by name.
- *
- * @internal Use {@link provideLucideConfig}
- */
-export const LUCIDE_ICONS = new InjectionToken<LucideIcons>('Lucide icons', {
-  factory: () => ({}),
-});
-
-/**
- * Provide Lucide icons by name.
- *
- * @remarks
- * Warning! This provider will convert dictionary keys to lower-kebab-case.
- *
- * @param icons Either a dictionary of icons or a list of Angular icon components.
- *
- * @usage
- * ```ts
- * import { provideLucideIcons, SquareCheck } from '@lucide/angular';
- * import { MyCustomIcon } from './custom-icons/circle-check';
- *
- * providers: [
- *   provideLucideIcons({
- *     SquareCheck,
- *     MyCustomIcon, // LucideIconData
- *   }),
- * ]
- * ```
- *
- * ```html
- * <svg lucideIcon="my-custom-icon" />
- * ```
- */
-export function provideLucideIcons(
-  icons: Record<string, LucideIconData | LucideIconComponentType> | Array<LucideIconComponentType>,
-): Provider {
-  if (Array.isArray(icons)) {
-    return {
-      provide: LUCIDE_ICONS,
-      useValue: icons.reduce((acc, icon) => {
-        acc[toKebabCase(icon.iconName)] = icon.iconData;
-        return acc;
-      }, {} as LucideIcons),
-    };
-  } else {
-    return {
-      provide: LUCIDE_ICONS,
-      useValue: Object.entries(icons).reduce((acc, [name, icon]) => {
-        if (isLucideIconComponent(icon)) {
-          acc[icon.iconName] = icon.iconData;
-        } else {
-          acc[toKebabCase(name)] = icon;
-        }
-        return acc;
-      }, {} as LucideIcons),
-    };
-  }
-}

packages/angular/src/public-api.ts

@@ -1,8 +0,0 @@
-import * as icons from './icons/lucide-angular';
-
-export * from './lucide-config';
-export * from './lucide-icon';
-export * from './lucide-icons';
-export * from './types';
-export * from './icons/lucide-angular';
-export { icons };

packages/angular/src/types.ts

@@ -1,47 +0,0 @@
-import { Signal, Type } from '@angular/core';
-
-type HtmlAttributes = { [key: string]: string | number };
-export type LucideIconNode = readonly [string, HtmlAttributes];
-export type LucideIconData = readonly LucideIconNode[];
-export type LucideIcons = { [key: string]: LucideIconData };
-
-/**
- * Represents a Lucide icon component that has `iconName` and `iconData` signals inherited from `LucideIconBase` and respective static members accessible without instantiating the component.
- */
-export type LucideIconComponentType = Type<{
-  title: Signal<Nullable<string>>;
-  size: Signal<Nullable<number>>;
-  color: Signal<Nullable<string>>;
-  strokeWidth: Signal<Nullable<number>>;
-  absoluteStrokeWidth: Signal<Nullable<boolean>>;
-}> & {
-  iconName: string;
-  iconData: LucideIconData;
-};
-
-/**
- * Type guard for {@link LucideIconData}
- */
-export function isLucideIconData(icon: unknown): icon is LucideIconData {
-  return Array.isArray(icon);
-}
-
-/**
- * Type guard for {@link LucideIconComponentType}
- */
-export function isLucideIconComponent(icon: unknown): icon is LucideIconComponentType {
-  return (
-    icon instanceof Type &&
-    'iconData' in icon &&
-    Array.isArray(icon.iconData) &&
-    'iconName' in icon &&
-    typeof icon.iconName === 'string'
-  );
-}
-
-export type LucideIconInput = LucideIconComponentType | LucideIconData | string;
-
-/**
- * @internal
- */
-export type Nullable<T> = T | null | undefined;

packages/angular/src/utils/format-fixed.ts

@@ -1,3 +0,0 @@
-export function formatFixed(number: number, decimals = 3): string {
-  return parseFloat(number.toFixed(decimals)).toString(10);
-}

packages/angular/src/utils/to-kebab-case.ts

@@ -1,2 +0,0 @@
-export const toKebabCase = (name: string) =>
-  name.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();

packages/angular/tsconfig.json

@@ -1,38 +0,0 @@
-/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
-/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
-{
-  "compileOnSave": false,
-  "compilerOptions": {
-    "paths": {
-      "@lucide/angular": ["./dist"],
-    },
-    "strict": true,
-    "noImplicitOverride": true,
-    "noPropertyAccessFromIndexSignature": true,
-    "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true,
-    "skipLibCheck": true,
-    "isolatedModules": true,
-    "declaration": false,
-    "downlevelIteration": true,
-    "experimentalDecorators": true,
-    "importHelpers": true,
-    "target": "ES2022",
-    "module": "preserve",
-  },
-  "angularCompilerOptions": {
-    "enableI18nLegacyMessageIdFormat": false,
-    "strictInjectionParameters": true,
-    "strictInputAccessModifiers": true,
-    "strictTemplates": true,
-  },
-  "files": [],
-  "references": [
-    {
-      "path": "./tsconfig.lib.json",
-    },
-    {
-      "path": "./tsconfig.spec.json",
-    },
-  ],
-}

packages/angular/tsconfig.lib.json

@@ -1,14 +0,0 @@
-/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
-/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "./out-tsc/lib",
-    "declaration": true,
-    "declarationMap": true,
-    "inlineSources": true,
-    "types": []
-  },
-  "include": ["src/**/*.ts"],
-  "exclude": ["**/*.spec.ts"]
-}

packages/angular/tsconfig.lib.prod.json

@@ -1,11 +0,0 @@
-/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
-/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
-{
-  "extends": "./tsconfig.lib.json",
-  "compilerOptions": {
-    "declarationMap": false
-  },
-  "angularCompilerOptions": {
-    "compilationMode": "partial"
-  }
-}

packages/angular/tsconfig.spec.json

@@ -1,10 +0,0 @@
-/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
-/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "./out-tsc/spec",
-    "types": ["vitest/globals"]
-  },
-  "include": ["src/**/*.d.ts", "src/**/*.spec.ts"]
-}

tools/build-font/main.ts

@@ -1,150 +0,0 @@
-import { readJson } from 'fs-extra/esm';
-import svgtofont from 'svgtofont';
-import getArgumentOptions from 'minimist';
-import path from 'path';
-
-const fontName = 'lucide';
-const classNamePrefix = 'icon';
-const startUnicode = 57400;
-
-const inputDir = path.join(process.cwd(), '../../', 'outlined');
-const cliArguments = getArgumentOptions(process.argv.slice(2));
-const { outputDir = 'lucide-font' } = cliArguments;
-const targetDir = path.join(process.cwd(), '../../', outputDir);
-const releaseMetaDataDir = path.join(process.cwd(), '../../', 'docs/.vitepress/data');
-const releaseMetaDataPath = path.resolve(releaseMetaDataDir, 'releaseMetaData.json');
-
-const releaseMetaData = convertReleaseMetaData(await getReleaseMetaData());
-
-async function getReleaseMetaData() {
-  let releaseMetaData = {};
-  try {
-    releaseMetaData = await readJson(releaseMetaDataPath);
-  } catch (err) {
-    throw new Error('Execution stopped because no release information was found.');
-  }
-  return releaseMetaData;
-}
-
-type Releases = Record<string, ReleaseMetaData>;
-
-type ReleaseMetaData = {
-  createdRelease: {
-    version: string;
-    date: string;
-  };
-  changedRelease: {
-    version: string;
-    date: string;
-  };
-};
-
-type ReleaseMetaDataWithName = ReleaseMetaData & {
-  name: string;
-};
-
-function convertReleaseMetaData(releases: Releases) {
-  return Object.entries(releases)
-    .map(([key, data]) => ({
-      ...data,
-      name: key,
-    }))
-    .sort((a, b) => sortMultiple(a, b, [sortByCreatedReleaseDate, sortByName]))
-    .map((value, index) => ({ ...value, index }))
-    .map((value, index) => ({
-      ...value,
-      unicode: index + startUnicode,
-    }));
-}
-
-type CollatorFunction = (a: ReleaseMetaDataWithName, b: ReleaseMetaDataWithName) => number;
-
-function sortMultiple(
-  a: ReleaseMetaDataWithName,
-  b: ReleaseMetaDataWithName,
-  collators: CollatorFunction[] = [],
-) {
-  const comparison = collators?.shift?.()?.(a, b) ?? 0;
-  if (comparison === 0 && collators.length > 0) return sortMultiple(a, b, collators);
-  return comparison;
-}
-
-function sortByCreatedReleaseDate(a: ReleaseMetaDataWithName, b: ReleaseMetaDataWithName) {
-  const [dateA, dateB] = [a, b].map((value) => new Date(value.createdRelease.date).valueOf());
-  return Number(dateA > dateB) - Number(dateA < dateB);
-}
-
-function sortByName(a: ReleaseMetaDataWithName, b: ReleaseMetaDataWithName) {
-  return new Intl.Collator('en-US').compare(a.name, b.name);
-}
-
-function getIconUnicode(name: string): [string, number] {
-  const { unicode } = releaseMetaData.find(({ name: iconName }) => iconName === name) ?? {
-    unicode: startUnicode,
-  };
-  return [String.fromCharCode(unicode), startUnicode];
-}
-
-async function init() {
-  console.time('Font generation');
-  try {
-    await svgtofont({
-      src: path.resolve(process.cwd(), inputDir),
-      dist: path.resolve(process.cwd(), targetDir),
-      // styleTemplates: path.resolve(process.cwd(), 'styles'), // Add different templates if needed
-      fontName,
-      classNamePrefix,
-      css: {
-        fontSize: 'inherit',
-      },
-      emptyDist: true,
-      useCSSVars: false,
-      outSVGReact: false,
-      outSVGPath: false,
-      addLigatures: true,
-      svgicons2svgfont: {
-        fontHeight: 1000, // At least 1000 is recommended
-        normalize: false,
-      },
-      generateInfoData: true,
-      website: {
-        title: 'Lucide',
-        logo: undefined,
-        meta: {
-          description: 'Lucide icons as TTF/EOT/WOFF/WOFF2/SVG.',
-          keywords: 'Lucide,TTF,EOT,WOFF,WOFF2,SVG',
-        },
-        corners: {
-          url: 'https://github.com/lucide-icons/lucide',
-          width: 62, // default: 60
-          height: 62, // default: 60
-          bgColor: '#dc3545', // default: '#151513'
-        },
-        links: [
-          {
-            title: 'GitHub',
-            url: 'https://github.com/lucide-icons/lucide',
-          },
-          {
-            title: 'Feedback',
-            url: 'https://github.com/lucide-icons/lucide/issues',
-          },
-          {
-            title: 'Font Class',
-            url: 'index.html',
-          },
-          {
-            title: 'Unicode',
-            url: 'unicode.html',
-          },
-        ],
-      },
-      getIconUnicode,
-    });
-  } catch (err) {
-    console.log(err);
-  }
-  console.timeEnd('Font generation');
-}
-
-init();

tools/build-font/package.json

@@ -6,7 +6,7 @@
   "main": "main.ts",
   "type": "module",
   "scripts": {
-    "start": "node ./main.ts"
+    "start": "node ./src/main.ts"
   },
   "keywords": [],
   "author": "",
@@ -14,9 +14,11 @@
   "dependencies": {
     "fs-extra": "^11.2.0",
     "minimist": "^1.2.8",
+    "oslllo-svg-fixer": "^5.0.0",
     "svgtofont": "^6.5.0"
   },
   "devDependencies": {
+    "@lucide/helpers": "workspace:*",
     "@types/fs-extra": "^11.0.4",
     "@types/minimist": "^1.2.5",
     "@types/node": "^22"

tools/build-font/src/allocateCodepoints.ts

@@ -0,0 +1,60 @@
+import { type IconAliases } from "@lucide/helpers";
+import path from "path";
+import { promises as fs } from 'fs';
+import { cwd } from "process";
+
+export type CodePoints = Record<string, number>;
+
+async function getLatestCodePoints(): Promise<CodePoints> {
+  // This is for the first release where no codepoints.json exists yet
+  const codepointsContents = await fs.readFile(path.join(cwd(), 'codepoints.json'), 'utf-8')
+
+  return JSON.parse(codepointsContents) as CodePoints
+
+  // Next releases will use the codepoints.json from latest release in lucide-static.
+  // const codepointsContents = await fetch('https://unpkg.com/lucide-static@latest/font/codepoints.json')
+  // return codepointsContents.json() as Promise<CodePoints>
+}
+
+interface AllocateCodePointsOptions {
+  saveCodePoints?: boolean;
+  iconsWithAliases: IconAliases
+}
+
+export async function allocateCodePoints({
+  saveCodePoints = false,
+  iconsWithAliases
+}: AllocateCodePointsOptions): Promise<CodePoints> {
+  const baseCodePoints = await getLatestCodePoints()
+
+  const endCodePoint = Math.max(...Object.values(baseCodePoints))
+
+  await Promise.all(
+    iconsWithAliases.map(async ([iconName, aliases]) => {
+      if(!baseCodePoints[iconName]) {
+        console.log('Code point not found creating new one for', iconName);
+        baseCodePoints[iconName] = endCodePoint + 1;
+      }
+
+      aliases.forEach((alias, index) => {
+        if (baseCodePoints[alias]) {
+          return;
+        }
+
+        console.log('Code point not found creating new one for');
+
+        baseCodePoints[alias] = endCodePoint + index + 1;
+      });
+    })
+  )
+
+  if (saveCodePoints) {
+    await fs.writeFile(
+      path.join(cwd(), 'codepoints.json'),
+      JSON.stringify(baseCodePoints, null, 2),
+      'utf-8'
+    );
+  }
+
+  return baseCodePoints;
+}

tools/build-font/src/buildFont.ts

@@ -0,0 +1,86 @@
+import svgtofont from 'svgtofont';
+import { type CodePoints } from './allocateCodepoints.ts';
+
+interface BuildFontOptions {
+  inputDir: string;
+  targetDir: string;
+  fontName: string;
+  classNamePrefix: string;
+  codePoints: CodePoints
+  startUnicode: number;
+}
+
+export async function buildFont({
+  inputDir,
+  targetDir,
+  fontName,
+  classNamePrefix,
+  codePoints,
+  startUnicode
+}: BuildFontOptions) {
+  console.time('Font generation');
+  try {
+    await svgtofont({
+      src: inputDir,
+      dist: targetDir,
+      fontName,
+      classNamePrefix,
+      css: {
+        fontSize: 'inherit',
+      },
+      emptyDist: true,
+      useCSSVars: false,
+      outSVGReact: false,
+      outSVGPath: false,
+      addLigatures: true,
+      svgicons2svgfont: {
+        fontHeight: 1000, // At least 1000 is recommended
+        normalize: false,
+      },
+      generateInfoData: true,
+      website: {
+        title: 'Lucide',
+        logo: undefined,
+        meta: {
+          description: 'Lucide icons as TTF/EOT/WOFF/WOFF2/SVG.',
+          keywords: 'Lucide,TTF,EOT,WOFF,WOFF2,SVG',
+        },
+        corners: {
+          url: 'https://github.com/lucide-icons/lucide',
+          width: 62, // default: 60
+          height: 62, // default: 60
+          bgColor: '#dc3545', // default: '#151513'
+        },
+        links: [
+          {
+            title: 'GitHub',
+            url: 'https://github.com/lucide-icons/lucide',
+          },
+          {
+            title: 'Feedback',
+            url: 'https://github.com/lucide-icons/lucide/issues',
+          },
+          {
+            title: 'Font Class',
+            url: 'index.html',
+          },
+          {
+            title: 'Unicode',
+            url: 'unicode.html',
+          },
+        ],
+      },
+      getIconUnicode: (name: string) => {
+        if (!codePoints[name]) {
+          throw new Error(`No codepoint found for icon: ${name}`);
+        }
+
+        const unicode = codePoints[name];
+        return [String.fromCharCode(unicode), startUnicode];
+      },
+    });
+  } catch (err) {
+    console.log(err);
+  }
+  console.timeEnd('Font generation');
+}

tools/build-font/src/helpers.ts

@@ -0,0 +1,15 @@
+import { type IconAliases } from "@lucide/helpers";
+import { type CodePoints } from "./allocateCodepoints.ts";
+
+export function hasMissingCodePoints(iconsWithAliases: IconAliases, codePoints: CodePoints): boolean {
+  return  iconsWithAliases.map(([iconName, aliases]) => ([iconName, ...aliases]))
+    .flat()
+    .some(name => {
+      if (!codePoints?.[name]) {
+        console.log(`Missing code point for icon/alias: ${name}`);
+        return true;
+      }
+
+      return false;
+    });
+}

tools/build-font/src/main.ts

@@ -0,0 +1,52 @@
+import getArgumentOptions from 'minimist';
+import path from 'path';
+import { promises as fs } from 'fs';
+
+import { getAllIconAliases } from '@lucide/helpers';
+import { outlineSVG } from './outlineSVGs.ts';
+import { allocateCodePoints } from './allocateCodepoints.ts';
+import { buildFont } from './buildFont.ts';
+import { hasMissingCodePoints } from './helpers.ts';
+
+const fontName = 'lucide';
+const classNamePrefix = 'icon';
+const startUnicode = 57400;
+const outputDir = 'lucide-font';
+
+const {
+  saveCodePoints = false,
+} = getArgumentOptions(process.argv.slice(2)) ?? {}
+
+const repoRoot = path.join(process.cwd(), '../../')
+const iconsDir = path.join(repoRoot, 'icons');
+const outlinedDir = path.join(repoRoot, 'outlined');
+const targetDir = path.join(repoRoot, outputDir);
+
+const iconsWithAliases = await getAllIconAliases(iconsDir)
+
+await outlineSVG({
+  iconsDir,
+  outlinedDir,
+  iconsWithAliases
+});
+
+const codePoints = await allocateCodePoints({
+  saveCodePoints,
+  iconsWithAliases
+});
+
+
+if (hasMissingCodePoints(iconsWithAliases, codePoints)) {
+  throw new Error('Some icons or aliases are missing code points. See log for details.');
+}
+
+await buildFont({
+  inputDir: outlinedDir,
+  targetDir,
+  fontName,
+  classNamePrefix,
+  codePoints,
+  startUnicode,
+});
+
+await fs.copyFile(path.join(process.cwd(), 'codepoints.json'), path.join(targetDir, 'codepoints.json'));

tools/build-font/src/outlineSVGs.ts

@@ -0,0 +1,49 @@
+import { promises as fs } from 'fs';
+import SVGFixer from 'oslllo-svg-fixer';
+import { getAllIconAliases, type IconAliases } from '@lucide/helpers';
+import path from 'path';
+
+interface OutlineSVGOptions {
+  iconsDir: string;
+  outlinedDir: string;
+  iconsWithAliases: IconAliases
+}
+
+export async function outlineSVG({
+  iconsDir,
+  outlinedDir,
+  iconsWithAliases
+}: OutlineSVGOptions) {
+  console.time('icon outliner');
+  try {
+    try {
+      await fs.mkdir(outlinedDir);
+    } catch (error) { } // eslint-disable-line no-empty
+
+    await SVGFixer(iconsDir, outlinedDir, {
+      showProgressBar: true,
+      traceResolution: 800,
+    }).fix();
+
+    console.log('Duplicate icons with aliases..');
+
+    await Promise.all(iconsWithAliases.map(async ([iconName, aliases]) => {
+      const sourcePath = path.join(outlinedDir, `${iconName}.svg`);
+
+      await Promise.all(aliases.map(async (aliasName) => {
+        const destinationPath = path.join(outlinedDir, `${aliasName}.svg`);
+
+        try {
+          await fs.copyFile(sourcePath, destinationPath);
+          console.log(`Copied ${iconName}.svg to ${aliasName}.svg`);
+        } catch (err) {
+          console.log(`Failed to copy ${sourcePath} to ${destinationPath}:`, err);
+        }
+      }));
+    }));
+
+    console.timeEnd('icon outliner');
+  } catch (err) {
+    console.log(err);
+  }
+}

tools/build-helpers/helpers.ts

@@ -7,6 +7,7 @@ export * from './src/appendFile.ts';
 export * from './src/writeFile.ts';
 export * from './src/writeFileIfNotExists.ts';
 export * from './src/readAllMetadata.ts';
+export * from './src/getAllIconAliases.ts';
 export * from './src/readMetadata.ts';
 export * from './src/readSvgDirectory.ts';
 export * from './src/readSvg.ts';

tools/build-helpers/src/getAllIconAliases.ts

@@ -0,0 +1,20 @@
+import { readAllMetadata } from "./readAllMetadata.ts";
+
+export type IconAliases = [iconName: string, aliases: string[]][];
+
+export const getAllIconAliases = async (iconsDir: string): Promise<IconAliases> => {
+  const metaDataFiles = await readAllMetadata(iconsDir)
+
+  return Object.entries(metaDataFiles).map(([iconName, metadata]) => {
+    const { aliases } = metadata;
+
+    if (!aliases?.length) return [iconName, []];
+
+    const aliasesNames = aliases.map(alias =>
+      typeof alias === 'string' ? alias : alias.name,
+    );
+
+    return [iconName, aliasesNames]
+  })
+}
+

tools/build-helpers/src/readAllMetadata.ts

@@ -1,6 +1,7 @@
 import fs from 'fs/promises';
 import path from 'path';
 import { readMetadata } from './readMetadata.ts';
+import { type IconMetadata } from '../../build-icons/types.ts';
 
 /**
  * Reads metadata from the icons/categories directories
@@ -8,7 +9,7 @@ import { readMetadata } from './readMetadata.ts';
  * @param {string} directory
  * @returns {object} A map of icon or category metadata
  */
-export const readAllMetadata = async (directory: string): Promise<Record<string, unknown>> => {
+export const readAllMetadata = async (directory: string): Promise<Record<string, IconMetadata>> => {
   const directoryContent = await fs.readdir(directory);
 
   const metaDataPromises = directoryContent
@@ -16,6 +17,7 @@ export const readAllMetadata = async (directory: string): Promise<Record<string,
     .map(async (file) => [path.basename(file, '.json'), await readMetadata(file, directory)]);
 
   const metadata = await Promise.all(metaDataPromises);
+
   if (metadata.length === 0) {
     throw new Error(`No metadata files found in directory: ${directory}`);
   }

tools/build-icons/building/generateExportsFile.ts

@@ -8,7 +8,6 @@ export default async function generateExportFile(
   iconNodes: Record<string, INode>,
   exportModuleNameCasing: 'camel' | 'pascal',
   iconFileExtension = '',
-  useDefaultExports = true,
 ) {
   const fileName = path.basename(inputEntry);
 
@@ -26,9 +25,7 @@ export default async function generateExportFile(
     } else if (exportModuleNameCasing === 'pascal') {
       componentName = toPascalCase(iconName);
     }
-    const importString = `export ${
-      useDefaultExports ? `{ default as ${componentName} }` : `*`
-    } from './${iconName}${iconFileExtension}';\n`;
+    const importString = `export { default as ${componentName} } from './${iconName}${iconFileExtension}';\n`;
     return appendFile(importString, fileName, outputDirectory);
   });
 

tools/build-icons/building/generateIconFiles.ts

@@ -48,11 +48,7 @@ function generateIconFiles({
     ]);
 
     const getSvg = () => readSvg(`${iconName}.svg`, iconsDir);
-    const {
-      deprecated = false,
-      toBeRemovedInVersion = undefined,
-      aliases = [],
-    } = iconMetaData[iconName];
+    const { deprecated = false, toBeRemovedInVersion = undefined } = iconMetaData[iconName];
     const deprecationReason = deprecated
       ? deprecationReasonTemplate(iconMetaData[iconName]?.deprecationReason ?? '', {
           componentName,
@@ -68,7 +64,6 @@ function generateIconFiles({
       getSvg,
       deprecated,
       deprecationReason,
-      aliases,
     });
 
     const output = pretty
@@ -76,7 +71,7 @@ function generateIconFiles({
           singleQuote: true,
           trailingComma: 'all',
           printWidth: 100,
-          parser: iconFileExtension.endsWith('.ts') ? 'babel-ts' : 'babel',
+          parser: 'babel',
         })
       : elementTemplate;
 

tools/build-icons/cli.ts

@@ -31,7 +31,6 @@ interface CliArguments {
   separateIconFileExportExtension?: string;
   aliasesFileExtension?: string;
   aliasImportFileExtension?: string;
-  useDefaultExports?: boolean;
   pretty?: boolean;
   output: string | undefined;
 }
@@ -63,7 +62,6 @@ const {
   separateIconFileExportExtension = undefined,
   aliasesFileExtension = '.js',
   aliasImportFileExtension = '',
-  useDefaultExports = true,
   pretty = true,
 } = cliArguments;
 
@@ -127,7 +125,6 @@ async function buildIcons() {
     icons,
     exportModuleNameCasing,
     importImportFileExtension,
-    useDefaultExports,
   );
 }
 

tools/build-icons/types.ts

@@ -6,17 +6,14 @@ export type IconNode = [tag: string, attrs: SVGProps][];
 
 export type IconNodeWithChildren = [tag: string, attrs: SVGProps, children: IconNode];
 
-export interface ExportTemplate {
+export type TemplateFunction = (params: {
   componentName: string;
   iconName: string;
   children: IconNode;
   getSvg: () => Promise<string>;
-  deprecated: boolean;
-  deprecationReason: string;
-  aliases?: (string | AliasDeprecation)[];
-}
-
-export type TemplateFunction = (params: ExportTemplate) => Promise<string>;
+  deprecated?: boolean;
+  deprecationReason?: string;
+}) => Promise<string>;
 
 export type Path = string;
 

tools/build-icons/utils/defineExportTemplate.ts

@@ -1,4 +1,15 @@
-import type { TemplateFunction } from '../types.ts';
+import { type IconNode } from '../types.ts';
+
+export interface ExportTemplate {
+  componentName: string;
+  iconName: string;
+  children: IconNode;
+  getSvg: () => Promise<string>;
+  deprecated: boolean;
+  deprecationReason: string;
+}
+
+export type TemplateFunction = (params: ExportTemplate) => Promise<string>;
 
 const defineExportTemplate = (exportFunction: TemplateFunction) => exportFunction;
 

tools/outline-svg/README.md

@@ -1,3 +0,0 @@
-# @lucide/outline-svg
-
-A internal used package to outline SVGs.

tools/outline-svg/main.ts

@@ -1,29 +0,0 @@
-import { promises as fs } from 'fs';
-import SVGFixer from 'oslllo-svg-fixer';
-import getArgumentOptions from 'minimist';
-import path from 'path';
-
-const inputDir = path.join(process.cwd(), '../../icons');
-const cliArguments = getArgumentOptions(process.argv.slice(2));
-const { outputDir = 'outlined' } = cliArguments;
-const targetDir = path.join(process.cwd(), '../../', outputDir);
-
-async function init() {
-  console.time('icon outliner');
-  try {
-    try {
-      await fs.mkdir(targetDir);
-    } catch (error) {} // eslint-disable-line no-empty
-
-    await SVGFixer(inputDir, targetDir, {
-      showProgressBar: true,
-      traceResolution: 800,
-    }).fix();
-
-    console.timeEnd('icon outliner');
-  } catch (err) {
-    console.log(err);
-  }
-}
-
-init();

tools/outline-svg/package.json

@@ -1,18 +0,0 @@
-{
-  "name": "@lucide/outline-svg",
-  "description": "A internal used package to outline SVGs.",
-  "private": true,
-  "version": "2.0.0",
-  "main": "main.ts",
-  "type": "module",
-  "scripts": {
-    "start": "node ./main.ts"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "dependencies": {
-    "minimist": "^1.2.8",
-    "oslllo-svg-fixer": "^5.0.0"
-  }
-}

tools/outline-svg/tsconfig.json

@@ -1,18 +0,0 @@
-{
-  "compilerOptions": {
-    "strict": true,
-    "declaration": true,
-    "noEmitOnError": true,
-    "noFallthroughCasesInSwitch": true,
-    "moduleResolution": "node",
-    "module": "ESNext",
-    "target": "ESNext",
-    "esModuleInterop": true,
-    "lib": ["esnext"],
-    "resolveJsonModule": true,
-    "allowImportingTsExtensions": true,
-    "noEmit": true,
-    "sourceMap": true,
-    "outDir": "./dist",
-  },
-}