fix(packages/icons): finalize exportTemplate before migration to input signals & effect to build component data

# 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

icons/paint-bucket.svg

@@ -9,8 +9,8 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M19 12H2" />
+  <path d="M11 7 6 2" />
+  <path d="M18.992 12H2.041" />
   <path d="M21.145 18.38A3.34 3.34 0 0 1 20 16.5a3.3 3.3 0 0 1-1.145 1.88c-.575.46-.855 1.02-.855 1.595A2 2 0 0 0 20 22a2 2 0 0 0 2-2.025c0-.58-.285-1.13-.855-1.595" />
-  <path d="m6 2 5 5" />
   <path d="m8.5 4.5 2.148-2.148a1.205 1.205 0 0 1 1.704 0l7.296 7.296a1.205 1.205 0 0 1 0 1.704l-7.592 7.592a3.615 3.615 0 0 1-5.112 0l-3.888-3.888a3.615 3.615 0 0 1 0-5.112L5.67 7.33" />
 </svg>

packages/lucide-angular/package.json

@@ -1,6 +1,6 @@
 {
-  "name": "lucide-angular",
+  "name": "@lucide/angular",
-  "description": "A Lucide icon library package for Angular applications.",
+  "description": "A Lucide icon library package for Angular applications",
   "version": "0.0.1",
   "author": "SMAH1",
   "license": "ISC",
@@ -38,19 +38,19 @@
     "version": "pnpm version --git-tag-version=false"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~13.3.11",
+    "@angular-devkit/build-angular": "~17.3.14",
-    "@angular-eslint/builder": "~13.0.0",
+    "@angular-eslint/builder": "~17.5.3",
-    "@angular-eslint/eslint-plugin": "~13.0.0",
+    "@angular-eslint/eslint-plugin": "~17.5.3",
-    "@angular-eslint/eslint-plugin-template": "~13.0.0",
+    "@angular-eslint/eslint-plugin-template": "~17.5.3",
-    "@angular-eslint/schematics": "~13.0.0",
+    "@angular-eslint/schematics": "~17.5.3",
-    "@angular-eslint/template-parser": "~13.0.0",
+    "@angular-eslint/template-parser": "~17.5.3",
-    "@angular/cli": "~13.3.11",
+    "@angular/cli": "~17.3.14",
-    "@angular/common": "~13.3.0",
+    "@angular/common": "~17.3.12",
-    "@angular/compiler": "~13.3.0",
+    "@angular/compiler": "~17.3.12",
-    "@angular/compiler-cli": "~13.3.0",
+    "@angular/compiler-cli": "~17.3.12",
-    "@angular/core": "~13.3.0",
+    "@angular/core": "~17.3.12",
-    "@angular/platform-browser": "~13.3.0",
+    "@angular/platform-browser": "~17.3.12",
-    "@angular/platform-browser-dynamic": "~13.3.0",
+    "@angular/platform-browser-dynamic": "~17.3.12",
     "@lucide/build-icons": "workspace:*",
     "@types/jasmine": "~3.10.0",
     "@types/node": "^12.11.1",
@@ -65,12 +65,12 @@
     "karma-coverage": "~2.1.0",
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "~1.7.0",
-    "ng-packagr": "^13.3.0",
+    "ng-packagr": "^17.3.0",
     "prettier": "^2.8.4",
-    "rxjs": "~7.5.0",
+    "rxjs": "~6.5.3",
     "ts-node": "~10.9.1",
     "tslib": "^2.3.0",
-    "typescript": "~4.6.2",
+    "typescript": "~5.4.5",
     "zone.js": "~0.11.4"
   },
   "peerDependencies": {

packages/lucide-angular/scripts/exportTemplate.mts

@@ -8,26 +8,65 @@ export default defineExportTemplate(async ({
   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 { LucideIcon } from '../lib/lucide-icon.component';
+import { Component } 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-vue-next - Documentation
+ * @see https://lucide.dev/guide/packages/lucide-angular - Documentation
  *
  * @param {Object} props - Lucide icons props and any valid SVG attribute
- * @returns {FunctionalComponent} Vue component
  * ${deprecated ? `@deprecated ${deprecationReason}` : ''}
 */
-const ${componentName}: LucideIconData = ${JSON.stringify(children)}; //eslint-disable-line no-shadow-restricted-names
+@Component({
+  selector: '${selectors.join(', ')}',
+  template: '',
+  standalone: true,
+})
+export class ${angularComponentName} extends LucideIcon {
+  static iconData: LucideIconData = ${JSON.stringify(children)};
+  static iconName = '${iconName}';
+  override get icon() {
+    return ${angularComponentName}.iconData;
+  }
+  override get name() {
+    return ${angularComponentName}.iconName;
+  }
+}
 
-export default ${componentName};
+${aliasComponentNames.map(([aliasComponentName]) => {
+    return `
+/**
+ * @deprecated
+ * @see ${angularComponentName}
+ */
+export const ${aliasComponentName} = ${angularComponentName};
+`;
+  }).join(`\n\n`)}
 `;
 });

packages/lucide-angular/src/aliases/index.ts

@@ -1,3 +0,0 @@
-export * from './aliases';
-export * from './prefixed';
-export * from './suffixed';

packages/lucide-angular/src/icons/package.json

@@ -1,8 +0,0 @@
-{
-  "ngPackage": {
-    "dest": "dist",
-    "lib": {
-      "entryFile": "../public-api.ts"
-    }
-  }
-}

packages/lucide-angular/src/lib/icons.provider.ts

@@ -1,4 +0,0 @@
-/** @deprecated Use the injection token LUCIDE_ICONS instead. Will be removed in v1.0. */
-export class Icons {
-  constructor(private icons: object) {}
-}

packages/lucide-angular/src/lib/lucide-angular.module.ts

@@ -1,31 +0,0 @@
-import { ModuleWithProviders, NgModule, Optional } from '@angular/core';
-import { LucideAngularComponent } from './lucide-angular.component';
-import { LucideIcons } from '../icons/types';
-import { LUCIDE_ICONS, LucideIconProvider } from './lucide-icon.provider';
-import { Icons } from './icons.provider';
-
-const legacyIconProviderFactory = (icons?: LucideIcons) => {
-  return new LucideIconProvider(icons ?? {});
-};
-
-@NgModule({
-  declarations: [LucideAngularComponent],
-  imports: [],
-  exports: [LucideAngularComponent],
-})
-export class LucideAngularModule {
-  static pick(icons: LucideIcons): ModuleWithProviders<LucideAngularModule> {
-    return {
-      ngModule: LucideAngularModule,
-      providers: [
-        { provide: LUCIDE_ICONS, multi: true, useValue: new LucideIconProvider(icons) },
-        {
-          provide: LUCIDE_ICONS,
-          multi: true,
-          useFactory: legacyIconProviderFactory,
-          deps: [[new Optional(), Icons]],
-        },
-      ],
-    };
-  }
-}

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

@@ -1,23 +1,19 @@
 import { Component } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { LucideAngularModule } from './lucide-angular.module';
+import { formatFixed, LucideIcon } from './lucide-icon.component';
-import { formatFixed, LucideAngularComponent } from './lucide-angular.component';
 import defaultAttributes from '../icons/constants/default-attributes';
-import { LucideIcons } from '../icons/types';
+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 testIcons: LucideIcons = {
+  const testIcon: LucideIconData = [['polyline', { points: '1 1 22 22' }]];
-    Demo: [['polyline', { points: '1 1 22 22' }]],
-  };
-
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [LucideAngularComponent, TestHostComponent],
+      declarations: [LucideIcon, TestHostComponent],
-      imports: [LucideAngularModule.pick(testIcons)],
+      imports: [],
     }).compileComponents();
     testHostFixture = TestBed.createComponent(TestHostComponent);
     testHostComponent = testHostFixture.componentInstance;
@@ -63,7 +59,7 @@ describe('LucideAngularComponent', () => {
     testHostComponent.setAbsoluteStrokeWidth(true);
     testHostFixture.detectChanges();
     expect(getSvgAttribute('stroke-width')).toBe(
-      formatFixed(strokeWidth / (size / defaultAttributes.height)),
+      formatFixed(strokeWidth / (size / defaultAttributes.height))
     );
   });
 
@@ -71,6 +67,7 @@ describe('LucideAngularComponent', () => {
     selector: 'lucide-spec-host-component',
     template: ` <i-lucide
       name="demo"
+      [img]="testIcon"
       class="my-icon"
       [color]="color"
       [size]="size"
@@ -83,6 +80,7 @@ describe('LucideAngularComponent', () => {
     size?: number;
     strokeWidth?: number;
     absoluteStrokeWidth = true;
+    readonly testIcon = testIcon;
 
     setColor(color: string): void {
       this.color = color;

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

@@ -5,12 +5,13 @@ import {
   Inject,
   Input,
   OnChanges,
+  OnInit,
   Renderer2,
   SimpleChange,
+  Type,
 } from '@angular/core';
 import { LucideIconData } from '../icons/types';
 import defaultAttributes from '../icons/constants/default-attributes';
-import { LUCIDE_ICONS, LucideIconProviderInterface } from './lucide-icon.provider';
 import { LucideIconConfig } from './lucide-icon.config';
 
 interface TypedChange<T> extends SimpleChange {
@@ -22,7 +23,7 @@ type SvgAttributes = { [key: string]: string | number };
 
 type LucideAngularComponentChanges = {
   name?: TypedChange<string | LucideIconData>;
-  img?: TypedChange<LucideIconData | undefined>;
+  icon?: TypedChange<LucideIconData | undefined>;
   color?: TypedChange<string>;
   size?: TypedChange<number>;
   strokeWidth?: TypedChange<number>;
@@ -34,24 +35,50 @@ 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({
-  selector: 'lucide-angular, lucide-icon, i-lucide, span-lucide',
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'svg[lucideIcon]',
   template: '<ng-content></ng-content>',
+  standalone: true,
 })
-export class LucideAngularComponent implements OnChanges {
+// eslint-disable-next-line @angular-eslint/component-class-suffix
+export class LucideIcon implements OnInit, OnChanges {
   @Input() class?: string;
-  @Input() name?: string | LucideIconData;
+  _name?: string;
-  @Input() img?: LucideIconData;
+  @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) private elem: ElementRef,
+    @Inject(ElementRef) protected elem: ElementRef,
-    @Inject(Renderer2) private renderer: Renderer2,
+    @Inject(Renderer2) protected renderer: Renderer2,
-    @Inject(ChangeDetectorRef) private changeDetector: ChangeDetectorRef,
+    @Inject(ChangeDetectorRef) protected changeDetector: ChangeDetectorRef,
-    @Inject(LUCIDE_ICONS) private iconProviders: LucideIconProviderInterface[],
+    @Inject(LucideIconConfig) protected iconConfig: LucideIconConfig
-    @Inject(LucideIconConfig) private iconConfig: LucideIconConfig,
   ) {
     this.defaultSize = defaultAttributes.height;
   }
@@ -84,40 +111,37 @@ export class LucideAngularComponent implements OnChanges {
     }
   }
 
+  ngOnInit() {
+    this.buildIcon();
+  }
+
   ngOnChanges(changes: LucideAngularComponentChanges): void {
     if (
       changes.name ||
-      changes.img ||
+      changes.icon ||
       changes.color ||
       changes.size ||
       changes.absoluteStrokeWidth ||
       changes.strokeWidth ||
       changes.class
     ) {
-      this.color = this.color ?? this.iconConfig.color;
+      this.buildIcon();
-      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;
-      const nameOrIcon = this.img ?? this.name;
-      if (typeof nameOrIcon === 'string') {
-        const icoOfName = this.getIcon(this.toPascalCase(nameOrIcon));
-        if (icoOfName) {
-          this.replaceElement(icoOfName);
-        } else {
-          throw new Error(
-            `The "${nameOrIcon}" icon has not been provided by any available icon providers.`,
-          );
-        }
-      } else if (Array.isArray(nameOrIcon)) {
-        this.replaceElement(nameOrIcon);
-      } else {
-        throw new Error(`No icon name or image has been provided.`);
-      }
     }
 
     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,
@@ -128,7 +152,10 @@ export class LucideAngularComponent implements OnChanges {
         ? formatFixed(this.strokeWidth / (this.size / this.defaultSize))
         : this.strokeWidth.toString(10),
     };
-    const icoElement = this.createElement(['svg', attributes, img]);
+    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('_', '-')}`);
@@ -138,24 +165,19 @@ export class LucideAngularComponent implements OnChanges {
         ...this.class
           .split(/ /)
           .map((a) => a.trim())
-          .filter((a) => a.length > 0),
+          .filter((a) => a.length > 0)
       );
     }
-    const childElements = this.elem.nativeElement.childNodes;
+    for (const child of icoElement.children) {
-    for (const child of childElements) {
       this.renderer.removeChild(this.elem.nativeElement, child);
     }
-    this.renderer.appendChild(this.elem.nativeElement, icoElement);
+    for (const node of img) {
+      const childElement = this.createElement(node);
+      this.renderer.appendChild(icoElement, childElement);
+    }
   }
 
-  toPascalCase(str: string): string {
+  protected parseNumber(value: string | number): number {
-    return str.replace(
-      /(\w)([a-z0-9]*)(_|-|\s*)/g,
-      (g0, g1, g2) => g1.toUpperCase() + g2.toLowerCase(),
-    );
-  }
-
-  private parseNumber(value: string | number): number {
     if (typeof value === 'string') {
       const parsedValue = parseInt(value, 10);
       if (isNaN(parsedValue)) {
@@ -166,21 +188,10 @@ export class LucideAngularComponent implements OnChanges {
     return value;
   }
 
-  private getIcon(name: string): LucideIconData | null {
+  protected createElement([tag, attrs, children = []]: readonly [
-    for (const iconProvider of Array.isArray(this.iconProviders)
-      ? this.iconProviders
-      : [this.iconProviders]) {
-      if (iconProvider.hasIcon(name)) {
-        return iconProvider.getIcon(name);
-      }
-    }
-    return null;
-  }
-
-  private createElement([tag, attrs, children = []]: readonly [
     string,
     SvgAttributes,
-    LucideIconData?,
+    LucideIconData?
   ]) {
     const element = this.renderer.createElement(tag, 'http://www.w3.org/2000/svg');
 

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

@@ -1,24 +0,0 @@
-import { LucideIconData, LucideIcons } from '../icons/types';
-import { InjectionToken } from '@angular/core';
-
-export interface LucideIconProviderInterface {
-  hasIcon(name: string): boolean;
-
-  getIcon(name: string): LucideIconData | null;
-}
-
-export const LUCIDE_ICONS = new InjectionToken<LucideIconProviderInterface>('LucideIcons', {
-  factory: () => new LucideIconProvider({}),
-});
-
-export class LucideIconProvider implements LucideIconProviderInterface {
-  constructor(private icons: LucideIcons) {}
-
-  getIcon(name: string): LucideIconData | null {
-    return this.hasIcon(name) ? this.icons[name] : null;
-  }
-
-  hasIcon(name: string): boolean {
-    return typeof this.icons === 'object' && name in this.icons;
-  }
-}

packages/lucide-angular/src/public-api.ts

@@ -1,10 +1,7 @@
 import * as icons from './icons/lucide-icons';
 
-export * from './lib/lucide-angular.component';
+export * from './lib/lucide-icon.component';
-export * from './lib/lucide-angular.module';
 export * from './lib/lucide-icon.config';
-export * from './lib/lucide-icon.provider';
 export * from './icons/lucide-icons';
 export * from './icons/types';
-export * from './aliases';
 export { icons };

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>;