feat(packages): angular v17 dead end

packages/lucide-angular/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "lucide-angular",
+  "name": "@lucide/angular",
   "description": "A Lucide icon library package for Angular applications",
   "version": "0.0.1",
   "author": "SMAH1",
@@ -38,19 +38,19 @@
     "version": "pnpm version --git-tag-version=false"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~13.3.11",
-    "@angular-eslint/builder": "~13.0.0",
-    "@angular-eslint/eslint-plugin": "~13.0.0",
-    "@angular-eslint/eslint-plugin-template": "~13.0.0",
-    "@angular-eslint/schematics": "~13.0.0",
-    "@angular-eslint/template-parser": "~13.0.0",
-    "@angular/cli": "~13.3.11",
-    "@angular/common": "~13.3.0",
-    "@angular/compiler": "~13.3.0",
-    "@angular/compiler-cli": "~13.3.0",
-    "@angular/core": "~13.3.0",
-    "@angular/platform-browser": "~13.3.0",
-    "@angular/platform-browser-dynamic": "~13.3.0",
+    "@angular-devkit/build-angular": "~17.3.14",
+    "@angular-eslint/builder": "~17.5.3",
+    "@angular-eslint/eslint-plugin": "~17.5.3",
+    "@angular-eslint/eslint-plugin-template": "~17.5.3",
+    "@angular-eslint/schematics": "~17.5.3",
+    "@angular-eslint/template-parser": "~17.5.3",
+    "@angular/cli": "~17.3.14",
+    "@angular/common": "~17.3.12",
+    "@angular/compiler": "~17.3.12",
+    "@angular/compiler-cli": "~17.3.12",
+    "@angular/core": "~17.3.12",
+    "@angular/platform-browser": "~17.3.12",
+    "@angular/platform-browser-dynamic": "~17.3.12",
     "@lucide/build-icons": "workspace:*",
     "@types/jasmine": "~3.10.0",
     "@types/node": "^12.11.1",
@@ -65,16 +65,16 @@
     "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": {
-    "@angular/common": "13.x - 19.x",
-    "@angular/core": "13.x - 19.x"
+    "@angular/common": "14.x - 19.x",
+    "@angular/core": "14.x - 19.x"
   }
 }

packages/lucide-angular/scripts/exportTemplate.mjs

@@ -8,26 +8,58 @@ export default async ({
                         getSvg,
                         deprecated,
                         deprecationReason,
+                        aliases = [],
+                        toPascalCase,
                       }) => {
   const svgContents = await getSvg();
   const svgBase64 = base64SVG(svgContents);
+  const angularComponentName = `Lucide${componentName}Component`;
+  let names = {
+    [iconName]: componentName,
+  };
 
   return `\
 import { LucideIconData } from './types';
+import { LucideAngularComponent } from '../lib/lucide-angular.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: 'lucide-${iconName}',
+  template: '',
+  standalone: true,
+})
+export class ${angularComponentName} extends LucideAngularComponent {
+  override icon = ${JSON.stringify(children)} as LucideIconData;
+  override name = '${iconName}';
+}
 
-export default ${componentName};
+${aliases?.map(alias => {
+    const aliasName = typeof alias === 'string' ? alias : alias.name;
+    const aliasComponentName = toPascalCase(aliasName);
+
+    return `
+/**
+ * @deprecated
+ * @see ${angularComponentName}
+ */
+@Component({
+  selector: 'lucide-${alias}',
+  template: '',
+  standalone: true,
+})
+export class Lucide${aliasComponentName}Component extends ${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.component.ts

@@ -5,12 +5,12 @@ import {
   Inject,
   Input,
   OnChanges,
+  OnInit,
   Renderer2,
   SimpleChange,
 } 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 {
@@ -37,23 +37,24 @@ export function formatFixed(number: number, decimals = 3): string {
 @Component({
   selector: 'lucide-angular, lucide-icon, i-lucide, span-lucide',
   template: '<ng-content></ng-content>',
+  standalone: true,
 })
-export class LucideAngularComponent implements OnChanges {
+export class LucideAngularComponent implements OnInit, OnChanges {
   @Input() class?: string;
-  @Input() name?: string | LucideIconData;
-  @Input() img?: LucideIconData;
+  @Input() name?: string;
+  @Input() icon?: LucideIconData;
   @Input() color?: string;
   @Input() absoluteStrokeWidth = false;
   defaultSize: number;
 
   constructor(
-    @Inject(ElementRef) private elem: ElementRef,
-    @Inject(Renderer2) private renderer: Renderer2,
-    @Inject(ChangeDetectorRef) private changeDetector: ChangeDetectorRef,
-    @Inject(LUCIDE_ICONS) private iconProviders: LucideIconProviderInterface[],
-    @Inject(LucideIconConfig) private iconConfig: LucideIconConfig,
+    @Inject(ElementRef) protected elem: ElementRef,
+    @Inject(Renderer2) protected renderer: Renderer2,
+    @Inject(ChangeDetectorRef) protected changeDetector: ChangeDetectorRef,
+    @Inject(LucideIconConfig) protected iconConfig: LucideIconConfig,
   ) {
     this.defaultSize = defaultAttributes.height;
+    console.log(this.name, this.icon);
   }
 
   _size?: number;
@@ -84,6 +85,10 @@ export class LucideAngularComponent implements OnChanges {
     }
   }
 
+  ngOnInit() {
+    this.buildIcon();
+  }
+
   ngOnChanges(changes: LucideAngularComponentChanges): void {
     if (
       changes.name ||
@@ -94,28 +99,21 @@ export class LucideAngularComponent implements OnChanges {
       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;
-      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.`,
-          );
+    console.log('Hello, my name is ', this.name, ' my icon is ', this.icon);
+    if (this.icon) {
+      this.replaceElement(this.icon);
     }
-      } else if (Array.isArray(nameOrIcon)) {
-        this.replaceElement(nameOrIcon);
-      } else {
-        throw new Error(`No icon name or image has been provided.`);
-      }
-    }
-
-    this.changeDetector.markForCheck();
   }
 
   replaceElement(img: LucideIconData): void {
@@ -148,14 +146,7 @@ export class LucideAngularComponent implements OnChanges {
     this.renderer.appendChild(this.elem.nativeElement, icoElement);
   }
 
-  toPascalCase(str: string): string {
-    return str.replace(
-      /(\w)([a-z0-9]*)(_|-|\s*)/g,
-      (g0, g1, g2) => g1.toUpperCase() + g2.toLowerCase(),
-    );
-  }
-
-  private parseNumber(value: string | number): number {
+  protected parseNumber(value: string | number): number {
     if (typeof value === 'string') {
       const parsedValue = parseInt(value, 10);
       if (isNaN(parsedValue)) {
@@ -166,18 +157,7 @@ export class LucideAngularComponent implements OnChanges {
     return value;
   }
 
-  private getIcon(name: string): LucideIconData | null {
-    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 [
+  protected createElement([tag, attrs, children = []]: readonly [
     string,
     SvgAttributes,
     LucideIconData?,

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.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-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.mjs

@@ -1,7 +1,7 @@
 import path from 'path';
 
 // eslint-disable-next-line import/no-extraneous-dependencies
-import { toPascalCase, toCamelCase, resetFile, appendFile } from '@lucide/helpers';
+import {appendFile, resetFile, toCamelCase, toPascalCase} from '@lucide/helpers';
 
 export default async function generateExportFile(
   inputEntry,
@@ -26,7 +26,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.mjs

@@ -31,7 +31,7 @@ function generateIconFiles({
     children = children.map(({ name, attributes }) => [name, attributes]);
 
     const getSvg = () => readSvg(`${iconName}.svg`, iconsDir);
-    const { deprecated = false, toBeRemovedInVersion = null } = iconMetaData[iconName];
+    const { deprecated = false, toBeRemovedInVersion = null, aliases } = iconMetaData[iconName];
     const deprecationReason = deprecated
       ? deprecationReasonTemplate(iconMetaData[iconName].deprecationReason, {
           componentName,
@@ -47,6 +47,8 @@ function generateIconFiles({
       getSvg,
       deprecated,
       deprecationReason,
+      aliases,
+      toPascalCase,
     });
 
     const output = pretty
@@ -54,7 +56,7 @@ function generateIconFiles({
           singleQuote: true,
           trailingComma: 'all',
           printWidth: 100,
-          parser: 'babel',
+          parser: iconFileExtension.endsWith('.ts') ? 'babel-ts' : 'babel',
         })
       : elementTemplate;