Merge branch 'main' into package/angularv17

# Conflicts:
#	packages/lucide-angular/package.json
#	packages/lucide-angular/scripts/exportTemplate.mts
#	pnpm-lock.yaml
#	tools/build-icons/building/generateExportsFile.ts
#	tools/build-icons/building/generateIconFiles.ts

.github/ISSUE_TEMPLATE/02_bug_report.yml

@@ -13,16 +13,19 @@ body:
       description: Which Lucide packages are affected? You may select more than one.
       options:
         - label: lucide
-        - label: lucide-angular
+        - label: lucide-angular (old version)
+        - label: '@lucide/angular (new version)'
+        - label: '@lucide/astro'
         - label: lucide-flutter
         - label: lucide-preact
         - label: lucide-react
         - label: lucide-react-native
         - label: lucide-solid
-        - label: lucide-svelte
+        - label: lucide-static
+        - label: lucide-svelte (old version)
+        - label: `@lucide/svelte (new version)`
         - 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,19 +13,23 @@ 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
+        - label: lucide-angular (old version)
+        - label: '@lucide/angular (new version)'
+        - label: '@lucide/astro'
         - label: lucide-flutter
         - label: lucide-preact
         - label: lucide-react
         - label: lucide-react-native
         - label: lucide-solid
-        - label: lucide-svelte
+        - label: lucide-static
+        - label: lucide-svelte (old version)
+        - label: `@lucide/svelte (new version)`
         - 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,6 +59,7 @@
 🅰️ 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

@@ -0,0 +1,41 @@
+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,9 +11,6 @@ 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,9 +22,6 @@ 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)
@@ -61,6 +58,7 @@ jobs:
             'lucide-preact',
             'lucide-solid',
             'lucide-svelte',
+            '@lucide/angular',
             '@lucide/astro',
             '@lucide/svelte',
           ]
@@ -138,8 +136,11 @@ 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 --saveCodePoints
+        run: pnpm build:font
 
       - name: 'Upload to Artifacts'
         uses: actions/upload-artifact@v4

.gitignore

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

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 build-font start",
+    "build:font": "pnpm --filter docs prebuild:releaseJson && pnpm --filter build-font start",
     "optimize": "node ./scripts/optimizeSvgs.mts",
     "addjsons": "node ./scripts/addMissingIconJsonFiles.mts",
     "checkIcons": "node ./scripts/checkIconsAndCategories.mts",

packages/angular/.eslintrc.js

@@ -0,0 +1,38 @@
+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/README.md

@@ -0,0 +1,73 @@
+<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
+
+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/lucide-angular)
+
+## 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

@@ -0,0 +1,51 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "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"]
+          }
+        }
+      }
+    }
+  },
+  "cli": {
+    "packageManager": "pnpm"
+  }
+}

packages/angular/ng-package.json

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

packages/angular/package.json

@@ -0,0 +1,75 @@
+{
+  "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 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",
+    "build:ng": "ng build --configuration production",
+    "test": "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:*",
+    "@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": "13.x - 21.x",
+    "@angular/core": "13.x - 21.x"
+  }
+}

packages/angular/scripts/exportTemplate.mts

@@ -0,0 +1,68 @@
+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,
+  aliases = [],
+  toPascalCase,
+}) => {
+  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 iconName = '${iconName}';
+  static iconData: LucideIconData = ${JSON.stringify(children)};
+  override readonly iconName = signal(${angularComponentName}.iconName);
+  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

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,38 @@
+import { InjectionToken, Provider } from '@angular/core';
+
+/**
+ * A configuration service for Lucide icon components.
+ *
+ * You can inject this service, typically in AppComponent, and customize its property values in
+ * order to provide default values for all the icons used in the application.
+ */
+export interface LucideConfig {
+  color: string;
+  size: number;
+  strokeWidth: number;
+  absoluteStrokeWidth: boolean;
+}
+
+export const lucideDefaultConfig: LucideConfig = {
+  color: 'currentColor',
+  size: 24,
+  strokeWidth: 2,
+  absoluteStrokeWidth: false,
+};
+
+export const LUCIDE_CONFIG = new InjectionToken<LucideConfig>(
+  'Lucide icon config',
+  {
+    factory: () => lucideDefaultConfig,
+  },
+);
+
+export function provideLucideConfig(config: Partial<LucideConfig>): Provider {
+  return {
+    provide: LUCIDE_CONFIG,
+    useValue: {
+      ...lucideDefaultConfig,
+      ...config,
+    },
+  };
+}

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

@@ -0,0 +1,114 @@
+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 {
+  abstract iconName: Signal<Nullable<string>>;
+  abstract iconData: Signal<Nullable<LucideIconData>>;
+  protected readonly iconConfig = inject(LUCIDE_CONFIG);
+  protected readonly elRef = inject(ElementRef);
+  protected readonly renderer = inject(Renderer2);
+  readonly title = input<Nullable<string>>();
+  readonly ariaHidden = computed(() => {
+    return !this.title();
+  });
+  readonly size = input(this.iconConfig.size, {
+    transform: (value: Nullable<string | number>) =>
+      transformNumericStringInput(value, this.iconConfig.size),
+  });
+  readonly color = input(this.iconConfig.color, {
+    transform: (value: Nullable<string>) => value ?? this.iconConfig.color,
+  });
+  readonly strokeWidth = input(this.iconConfig.strokeWidth, {
+    transform: (value: Nullable<string | number>) =>
+      transformNumericStringInput(value, this.iconConfig.strokeWidth),
+  });
+  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');
+          for (const [name, value] of Object.entries(attrs)) {
+            this.renderer.setAttribute(
+              element,
+              name,
+              typeof value === 'number' ? value.toString(10) : value,
+            );
+          }
+          this.renderer.appendChild(this.elRef.nativeElement, element);
+          return element;
+        });
+        onCleanup(() => {
+          for (const element of elements) {
+            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

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

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

@@ -0,0 +1,243 @@
+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

@@ -0,0 +1,62 @@
+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;
+}
+
+@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());
+  });
+  override readonly iconName = computed(() => {
+    return this.resolvedIcon()?.name;
+  });
+  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

@@ -0,0 +1,44 @@
+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

@@ -0,0 +1,34 @@
+import { InjectionToken, Provider } from '@angular/core';
+import { LucideIconData, LucideIcons } from './types';
+import { isLucideIconComponent, LucideIconComponentType } from './types';
+import { toKebabCase } from './utils/to-kebab-case';
+
+export const LUCIDE_ICONS = new InjectionToken<LucideIcons>('Lucide icons', {
+  factory: () => ({}),
+});
+
+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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,34 @@
+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 };
+
+export interface LucideIconComponentInterface {
+  iconName: Signal<Nullable<string>>;
+  iconData: Signal<Nullable<LucideIconData>>;
+}
+
+export type LucideIconComponentType = Type<LucideIconComponentInterface> & {
+  iconName: string;
+  iconData: LucideIconData;
+};
+
+export function isLucideIconData(icon: unknown): icon is LucideIconData {
+  return Array.isArray(icon);
+}
+
+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;
+
+export type Nullable<T> = T | null | undefined;

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

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

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

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

packages/angular/tsconfig.json

@@ -0,0 +1,40 @@
+/* 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

@@ -0,0 +1,18 @@
+/* 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

@@ -0,0 +1,11 @@
+/* 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

@@ -0,0 +1,15 @@
+/* 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"
+  ]
+}

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

@@ -0,0 +1,101 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { formatFixed, LucideIcon } from './lucide-icon.component';
+import defaultAttributes from '../icons/constants/default-attributes';
+import { LucideIconData } from '../icons/types';
+
+describe('LucideAngularComponent', () => {
+  let testHostComponent: TestHostComponent;
+  let testHostFixture: ComponentFixture<TestHostComponent>;
+  const getSvgAttribute = (attr: string) =>
+    testHostFixture.nativeElement.querySelector('svg').getAttribute(attr);
+  const testIcon: LucideIconData = [['polyline', { points: '1 1 22 22' }]];
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [LucideIcon, TestHostComponent],
+      imports: [],
+    }).compileComponents();
+    testHostFixture = TestBed.createComponent(TestHostComponent);
+    testHostComponent = testHostFixture.componentInstance;
+  });
+
+  it('should create', () => {
+    testHostFixture.detectChanges();
+    expect(testHostComponent).toBeTruthy();
+  });
+
+  it('should add all classes', () => {
+    testHostFixture.detectChanges();
+
+    expect(getSvgAttribute('class')).toBe('lucide lucide-demo my-icon');
+  });
+
+  it('should set color', () => {
+    const color = 'red';
+    testHostComponent.setColor(color);
+    testHostFixture.detectChanges();
+    expect(getSvgAttribute('stroke')).toBe(color);
+  });
+
+  it('should set size', () => {
+    const size = 12;
+    testHostComponent.setSize(size);
+    testHostFixture.detectChanges();
+    expect(getSvgAttribute('width')).toBe(size.toString(10));
+  });
+
+  it('should set stroke width', () => {
+    const strokeWidth = 1.41;
+    testHostComponent.setStrokeWidth(strokeWidth);
+    testHostFixture.detectChanges();
+    expect(getSvgAttribute('stroke-width')).toBe(strokeWidth.toString(10));
+  });
+
+  it('should adjust stroke width', () => {
+    const strokeWidth = 2;
+    const size = 12;
+    testHostComponent.setStrokeWidth(strokeWidth);
+    testHostComponent.setSize(12);
+    testHostComponent.setAbsoluteStrokeWidth(true);
+    testHostFixture.detectChanges();
+    expect(getSvgAttribute('stroke-width')).toBe(
+      formatFixed(strokeWidth / (size / defaultAttributes.height))
+    );
+  });
+
+  @Component({
+    selector: 'lucide-spec-host-component',
+    template: ` <i-lucide
+      name="demo"
+      [img]="testIcon"
+      class="my-icon"
+      [color]="color"
+      [size]="size"
+      [strokeWidth]="strokeWidth"
+      [absoluteStrokeWidth]="absoluteStrokeWidth"
+    ></i-lucide>`,
+  })
+  class TestHostComponent {
+    color?: string;
+    size?: number;
+    strokeWidth?: number;
+    absoluteStrokeWidth = true;
+    readonly testIcon = testIcon;
+
+    setColor(color: string): void {
+      this.color = color;
+    }
+
+    setSize(size: number): void {
+      this.size = size;
+    }
+
+    setStrokeWidth(strokeWidth: number): void {
+      this.strokeWidth = strokeWidth;
+    }
+
+    setAbsoluteStrokeWidth(absoluteStrokeWidth: boolean): void {
+      this.absoluteStrokeWidth = absoluteStrokeWidth;
+    }
+  }
+});

packages/lucide-angular/src/lib/lucide-icon.component.ts

@@ -0,0 +1,213 @@
+import {
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  Inject,
+  Input,
+  OnChanges,
+  OnInit,
+  Renderer2,
+  SimpleChange,
+  Type,
+} from '@angular/core';
+import { LucideIconData } from '../icons/types';
+import defaultAttributes from '../icons/constants/default-attributes';
+import { LucideIconConfig } from './lucide-icon.config';
+
+interface TypedChange<T> extends SimpleChange {
+  previousValue: T;
+  currentValue: T;
+}
+
+type SvgAttributes = { [key: string]: string | number };
+
+type LucideAngularComponentChanges = {
+  name?: TypedChange<string | LucideIconData>;
+  icon?: TypedChange<LucideIconData | undefined>;
+  color?: TypedChange<string>;
+  size?: TypedChange<number>;
+  strokeWidth?: TypedChange<number>;
+  absoluteStrokeWidth?: TypedChange<boolean>;
+  class: TypedChange<string>;
+};
+
+export function formatFixed(number: number, decimals = 3): string {
+  return parseFloat(number.toFixed(decimals)).toString(10);
+}
+
+export type LucideIconComponentType = Type<LucideIcon> & { iconData: LucideIconData; name: string };
+
+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'
+  );
+}
+
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'svg[lucideIcon]',
+  template: '<ng-content></ng-content>',
+  standalone: true,
+})
+// eslint-disable-next-line @angular-eslint/component-class-suffix
+export class LucideIcon implements OnInit, OnChanges {
+  @Input() class?: string;
+  _name?: string;
+  @Input() set name(name: string | undefined) {
+    this._name = name;
+  }
+  get name() {
+    return this._name;
+  }
+  _icon?: LucideIconData | LucideIconComponentType | null;
+  @Input('lucideIcon') set icon(icon: LucideIconData | LucideIconComponentType | null | undefined) {
+    this._icon = icon;
+  }
+  get icon() {
+    return this._icon;
+  }
+  @Input() color?: string;
+  @Input() absoluteStrokeWidth = false;
+  defaultSize: number;
+
+  constructor(
+    @Inject(ElementRef) protected elem: ElementRef,
+    @Inject(Renderer2) protected renderer: Renderer2,
+    @Inject(ChangeDetectorRef) protected changeDetector: ChangeDetectorRef,
+    @Inject(LucideIconConfig) protected iconConfig: LucideIconConfig
+  ) {
+    this.defaultSize = defaultAttributes.height;
+  }
+
+  _size?: number;
+
+  get size(): number {
+    return this._size ?? this.iconConfig.size;
+  }
+
+  @Input() set size(value: string | number | undefined) {
+    if (value) {
+      this._size = this.parseNumber(value);
+    } else {
+      delete this._size;
+    }
+  }
+
+  _strokeWidth?: number;
+
+  get strokeWidth(): number {
+    return this._strokeWidth ?? this.iconConfig.strokeWidth;
+  }
+
+  @Input() set strokeWidth(value: string | number | undefined) {
+    if (value) {
+      this._strokeWidth = this.parseNumber(value);
+    } else {
+      delete this._strokeWidth;
+    }
+  }
+
+  ngOnInit() {
+    this.buildIcon();
+  }
+
+  ngOnChanges(changes: LucideAngularComponentChanges): void {
+    if (
+      changes.name ||
+      changes.icon ||
+      changes.color ||
+      changes.size ||
+      changes.absoluteStrokeWidth ||
+      changes.strokeWidth ||
+      changes.class
+    ) {
+      this.buildIcon();
+    }
+
+    this.changeDetector.markForCheck();
+  }
+
+  buildIcon(): void {
+    this.color = this.color ?? this.iconConfig.color;
+    this.size = this.parseNumber(this.size ?? this.iconConfig.size);
+    this.strokeWidth = this.parseNumber(this.strokeWidth ?? this.iconConfig.strokeWidth);
+    this.absoluteStrokeWidth = this.absoluteStrokeWidth ?? this.iconConfig.absoluteStrokeWidth;
+    console.log('Hello, my name is ', this.name, ' my icon is ', this.icon);
+    if (this.icon) {
+      this.replaceElement(isLucideIconComponent(this.icon) ? this.icon.iconData : this.icon);
+    }
+  }
+
+  replaceElement(img: LucideIconData): void {
+    const attributes = {
+      ...defaultAttributes,
+      width: this.size,
+      height: this.size,
+      stroke: this.color ?? this.iconConfig.color,
+      'stroke-width': this.absoluteStrokeWidth
+        ? formatFixed(this.strokeWidth / (this.size / this.defaultSize))
+        : this.strokeWidth.toString(10),
+    };
+    const icoElement = this.elem.nativeElement;
+    for (const [name, value] of Object.entries(attributes)) {
+      icoElement.setAttribute(name, value);
+    }
+    icoElement.classList.add('lucide');
+    if (typeof this.name === 'string') {
+      icoElement.classList.add(`lucide-${this.name.replace('_', '-')}`);
+    }
+    if (this.class) {
+      icoElement.classList.add(
+        ...this.class
+          .split(/ /)
+          .map((a) => a.trim())
+          .filter((a) => a.length > 0)
+      );
+    }
+    for (const child of icoElement.children) {
+      this.renderer.removeChild(this.elem.nativeElement, child);
+    }
+    for (const node of img) {
+      const childElement = this.createElement(node);
+      this.renderer.appendChild(icoElement, childElement);
+    }
+  }
+
+  protected parseNumber(value: string | number): number {
+    if (typeof value === 'string') {
+      const parsedValue = parseInt(value, 10);
+      if (isNaN(parsedValue)) {
+        throw new Error(`${value} is not numeric.`);
+      }
+      return parsedValue;
+    }
+    return value;
+  }
+
+  protected createElement([tag, attrs, children = []]: readonly [
+    string,
+    SvgAttributes,
+    LucideIconData?
+  ]) {
+    const element = this.renderer.createElement(tag, 'http://www.w3.org/2000/svg');
+
+    Object.keys(attrs).forEach((name) => {
+      const attrValue: string =
+        typeof attrs[name] === 'string' ? (attrs[name] as string) : attrs[name].toString(10);
+      this.renderer.setAttribute(element, name, attrValue);
+    });
+
+    if (children.length) {
+      children.forEach((child) => {
+        const childElement = this.createElement(child);
+        this.renderer.appendChild(element, childElement);
+      });
+    }
+
+    return element;
+  }
+}

tools/build-font/main.ts

@@ -0,0 +1,150 @@
+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 ./src/main.ts"
+    "start": "node ./main.ts"
   },
   "keywords": [],
   "author": "",
@@ -14,11 +14,9 @@
   "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

@@ -1,60 +0,0 @@
-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

@@ -1,86 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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

@@ -1,49 +0,0 @@
-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,7 +7,6 @@ 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

@@ -1,20 +0,0 @@
-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,7 +1,6 @@
 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
@@ -9,7 +8,7 @@ import { type IconMetadata } from '../../build-icons/types.ts';
  * @param {string} directory
  * @returns {object} A map of icon or category metadata
  */
-export const readAllMetadata = async (directory: string): Promise<Record<string, IconMetadata>> => {
+export const readAllMetadata = async (directory: string): Promise<Record<string, unknown>> => {
   const directoryContent = await fs.readdir(directory);
 
   const metaDataPromises = directoryContent
@@ -17,7 +16,6 @@ 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

@@ -25,7 +25,7 @@ export default async function generateExportFile(
     } else if (exportModuleNameCasing === 'pascal') {
       componentName = toPascalCase(iconName);
     }
-    const importString = `export { default as ${componentName} } from './${iconName}${iconFileExtension}';\n`;
+    const importString = `export * from './${iconName}${iconFileExtension}';\n`;
     return appendFile(importString, fileName, outputDirectory);
   });
 

tools/build-icons/building/generateIconFiles.ts

@@ -48,7 +48,11 @@ function generateIconFiles({
     ]);
 
     const getSvg = () => readSvg(`${iconName}.svg`, iconsDir);
-    const { deprecated = false, toBeRemovedInVersion = undefined } = iconMetaData[iconName];
+    const {
+      deprecated = false,
+      toBeRemovedInVersion = undefined,
+      aliases,
+    } = iconMetaData[iconName];
     const deprecationReason = deprecated
       ? deprecationReasonTemplate(iconMetaData[iconName]?.deprecationReason ?? '', {
           componentName,
@@ -64,6 +68,8 @@ function generateIconFiles({
       getSvg,
       deprecated,
       deprecationReason,
+      aliases,
+      toPascalCase,
     });
 
     const output = pretty
@@ -71,7 +77,7 @@ function generateIconFiles({
           singleQuote: true,
           trailingComma: 'all',
           printWidth: 100,
-          parser: 'babel',
+          parser: iconFileExtension.endsWith('.ts') ? 'babel-ts' : 'babel',
         })
       : elementTemplate;
 
@@ -81,7 +87,7 @@ function generateIconFiles({
       const output = `export { default } from "./${iconName}${iconFileExtension}";\n`;
       const location = path.join(
         iconsDistDirectory,
-        `${iconName}${separateIconFileExportExtension ?? iconFileExtension}`,
+        `${iconName}${separateIconFileExportExtension ?? iconFileExtension}`
       );
 
       await fs.promises.writeFile(location, output, 'utf-8');

tools/build-icons/types.ts

@@ -13,6 +13,8 @@ export type TemplateFunction = (params: {
   getSvg: () => Promise<string>;
   deprecated?: boolean;
   deprecationReason?: string;
+  aliases?: (string | AliasDeprecation)[];
+  toPascalCase: (value: string) => string;
 }) => Promise<string>;
 
 export type Path = string;

tools/build-icons/utils/defineExportTemplate.ts

@@ -7,6 +7,8 @@ export interface ExportTemplate {
   getSvg: () => Promise<string>;
   deprecated: boolean;
   deprecationReason: string;
+  aliases: Array<string | { name: string }>;
+  toPascalCase: (value: string) => string;
 }
 
 export type TemplateFunction = (params: ExportTemplate) => Promise<string>;

tools/outline-svg/README.md

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

tools/outline-svg/main.ts

@@ -0,0 +1,29 @@
+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

@@ -0,0 +1,18 @@
+{
+  "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

@@ -0,0 +1,18 @@
+{
+  "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",
+  },
+}