fix(packages/angular): move to packages/angular, update github actions and templates

.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/release.yml

@@ -58,6 +58,7 @@ jobs:
             'lucide-preact',
             'lucide-solid',
             'lucide-svelte',
+            '@lucide/angular',
             '@lucide/astro',
             '@lucide/svelte',
           ]

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/angular.json

@@ -1,9 +1,6 @@
 {
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "version": 1,
-  "cli": {
-    "packageManager": "npm"
-  },
   "newProjectRoot": "projects",
   "projects": {
     "@lucide/angular": {
@@ -38,8 +35,17 @@
               "lines": 80
             }
           }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
+          }
         }
       }
     }
+  },
+  "cli": {
+    "packageManager": "pnpm"
   }
 }

packages/angular/package.json

@@ -1,6 +1,19 @@
 {
   "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",
@@ -30,6 +43,11 @@
   },
   "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",
@@ -42,6 +60,7 @@
     "@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",

packages/angular/scripts/exportTemplate.mts

@@ -49,10 +49,10 @@ import { Component, signal } from '@angular/core';
   standalone: true,
 })
 export class ${angularComponentName} extends LucideIconBase {
-  static iconData: LucideIconData = ${JSON.stringify(children)};
   static iconName = '${iconName}';
-  override readonly icon = signal(${angularComponentName}.iconData);
-  override readonly name = signal(${angularComponentName}.iconName);
+  static iconData: LucideIconData = ${JSON.stringify(children)};
+  override readonly iconName = signal(${angularComponentName}.iconName);
+  override readonly iconData = signal(${angularComponentName}.iconData);
 }
 
 ${aliasComponentNames.map((aliasComponentName) => {

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

@@ -46,8 +46,8 @@ function transformNumericStringInput(
   },
 })
 export abstract class LucideIconBase {
-  abstract icon: Signal<Nullable<LucideIconData>>;
-  abstract name: Signal<Nullable<string>>;
+  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);
@@ -79,7 +79,7 @@ export abstract class LucideIconBase {
 
   constructor() {
     effect((onCleanup) => {
-      const icon = this.icon();
+      const icon = this.iconData();
       if (icon) {
         const elements = icon.map(([name, attrs]) => {
           const element = this.renderer.createElement(name, 'http://www.w3.org/2000/svg');
@@ -101,7 +101,7 @@ export abstract class LucideIconBase {
       }
     });
     effect((onCleanup) => {
-      const name = this.name();
+      const name = this.iconName();
       if (name) {
         const cssClass = `lucide-${toKebabCase(name)}`;
         this.renderer.addClass(this.elRef.nativeElement, cssClass);

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

@@ -85,8 +85,8 @@ describe('LucideIcon', () => {
       name.set('custom-name');
       fixture.detectChanges();
 
-      expect(component.icon()).toBe(testIcon);
-      expect(component.name()).toBe('custom-name');
+      expect(component.iconData()).toBe(testIcon);
+      expect(component.iconName()).toBe('custom-name');
       expect(fixture.nativeElement.innerHTML).toBe(
         '<!--container--><polyline points="1 1 22 22"></polyline>',
       );
@@ -95,15 +95,15 @@ describe('LucideIcon', () => {
       icon.set(LucideActivity);
       fixture.detectChanges();
 
-      expect(component.icon()).toBe(LucideActivity.iconData);
-      expect(component.name()).toBe(LucideActivity.iconName);
+      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.icon()).toBe(testIcon);
-      expect(component.name()).toBe('demo');
+      expect(component.iconData()).toBe(testIcon);
+      expect(component.iconName()).toBe('demo');
     });
     it('should throw error if no icon founds', () => {
       icon.set('invalid');

packages/angular/src/lucide-icon.ts

@@ -17,18 +17,18 @@ interface LucideResolvedIcon {
 })
 export class LucideIcon extends LucideIconBase {
   protected readonly icons = inject(LUCIDE_ICONS);
-  readonly nameInput = input<string | null>(null, { alias: 'name' });
+  readonly name = input<string | null>();
   readonly iconInput = input.required<LucideIconInput | null>({
     alias: 'lucideIcon',
   });
   readonly resolvedIcon = computed<LucideResolvedIcon | null>(() => {
-    return this.resolveIcon(this.nameInput(), this.iconInput());
+    return this.resolveIcon(this.name(), this.iconInput());
   });
-  override readonly name = computed<string | null>(() => {
-    return this.resolvedIcon()?.name ?? null;
+  override readonly iconName = computed(() => {
+    return this.resolvedIcon()?.name;
   });
-  override readonly icon = computed<LucideIconData | null>(() => {
-    return this.resolvedIcon()?.data ?? null;
+  override readonly iconData = computed(() => {
+    return this.resolvedIcon()?.data;
   });
 
   protected resolveIcon(

packages/angular/src/public-api.ts

@@ -4,4 +4,5 @@ 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,16 +1,16 @@
-import { InputSignal, Signal, Type } from '@angular/core';
+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 LucideIconComponent {
-  name: Signal<Nullable<string>>;
-  icon: Signal<Nullable<LucideIconData>>;
+export interface LucideIconComponentInterface {
+  iconName: Signal<Nullable<string>>;
+  iconData: Signal<Nullable<LucideIconData>>;
 }
 
-export type LucideIconComponentType = Type<LucideIconComponent> & {
+export type LucideIconComponentType = Type<LucideIconComponentInterface> & {
   iconName: string;
   iconData: LucideIconData;
 };

packages/angular/tsconfig.json

@@ -15,6 +15,8 @@
     "noFallthroughCasesInSwitch": true,
     "skipLibCheck": true,
     "isolatedModules": true,
+    "declaration": false,
+    "downlevelIteration": true,
     "experimentalDecorators": true,
     "importHelpers": true,
     "target": "ES2022",