Refactor TablerIconComponent to use Angular's dependency injection for improved readability and maintainability, enhance error handling for icon input, and update README links for accuracy. Remove unnecessary paths from TypeScript configuration.

packages/icons-angular/README.md

@@ -201,7 +201,7 @@ export class AppModule {}
 
 For more info on how to contribute please see the [contribution guidelines](https://github.com/tabler/tabler-icons/blob/main/CONTRIBUTING.md).
 
-Caught a mistake or want to contribute to the documentation? [Edit this page on Github](https://github.com/tabler/tabler-icons/blob/main/packages/icons-react/README.md)
+Caught a mistake or want to contribute to the documentation? [Edit this page on Github](https://github.com/tabler/tabler-icons/blob/main/packages/icons-angular/README.md)
 
 ## License
 

packages/icons-angular/src/lib/tabler-icon.component.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, HostBinding, inject, Inject, Input, OnChanges, Renderer2 } from '@angular/core';
+import { Component, ElementRef, HostBinding, inject, Input, OnChanges, Renderer2 } from '@angular/core';
 import defaultAttributes from '../defaultAttributes';
 import { TablerIcon, TablerIconNode } from '../types';
 import { TablerIconConfig } from './tabler-icon.config';
@@ -20,24 +20,27 @@ export class TablerIconComponent implements OnChanges {
   @HostBinding('style.height.px')
   @HostBinding('style.width.px')
   size?: number;
-  config: TablerIconConfig;
 
-  constructor(
-    @Inject(Renderer2) private readonly renderer: Renderer2,
-    @Inject(TABLER_ICONS) private readonly iconProviders: ITablerIconProvider[],
-    @Inject(ElementRef) private readonly elementRef: ElementRef
-  ) {
-    this.config = {
+  private readonly renderer = inject(Renderer2);
+  private readonly iconProviders = inject<ITablerIconProvider[]>(TABLER_ICONS);
+  private readonly elementRef = inject(ElementRef);
+  private readonly iconConfig = inject(TablerIconConfig);
+
+  private get config(): TablerIconConfig {
+    return {
       size: defaultAttributes.outline.width,
       color: defaultAttributes.outline.stroke,
       stroke: defaultAttributes.outline['stroke-width'],
-      ...inject(TablerIconConfig)
+      ...this.iconConfig
     };
   }
 
   ngOnChanges() {
     this.size ??= this.config.size;
     if (typeof this.icon === 'string') {
+      if (!this.icon || this.icon.trim() === '') {
+        throw new Error('Icon name cannot be empty.');
+      }
       const icon = this.getIconFromProviders(this.toPascalCase(this.icon));
       if (icon) {
         this.replaceElement(icon);
@@ -47,7 +50,7 @@ export class TablerIconComponent implements OnChanges {
     } else if (this.icon != null && Array.isArray(this.icon.nodes)) {
       this.replaceElement(this.icon);
     } else {
-      throw new Error(`Icon has to be provided ! ! !.`);
+      throw new Error('Icon must be provided as a TablerIcon object or a string name.');
     }
   }
 
@@ -69,7 +72,15 @@ export class TablerIconComponent implements OnChanges {
     };
 
     const iconElement = this.createElement(['svg', attributes, icon.nodes]);
-    iconElement.classList.add('tabler-icon', `tabler-icon-${icon.name}`, this.class?.split(/ /).map(x => x.trim()));
+    iconElement.classList.add('tabler-icon', `tabler-icon-${icon.name}`);
+    if (this.class) {
+      this.class.split(/ /).forEach(cls => {
+        const trimmed = cls.trim();
+        if (trimmed) {
+          iconElement.classList.add(trimmed);
+        }
+      });
+    }
 
     const childElements = this.elementRef.nativeElement.childNodes;
     for (const childElement of childElements) {

packages/icons-angular/src/lib/tabler-icon.provider.ts

@@ -13,7 +13,7 @@ export class TablerIconProvider implements ITablerIconProvider {
     return this.iconExists(name) ? this.icons[name] : null;
   };
 
-  private iconExists = (name: string): boolean => typeof this.icons === 'object' && name in this.icons;
+  private iconExists = (name: string): boolean => name in this.icons;
 }
 
 export const TABLER_ICONS = new InjectionToken<ITablerIconProvider>('TablerIcons', {

packages/icons-angular/tsconfig.json

@@ -9,9 +9,6 @@
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
-    "paths": {
-      "lucide-angular": ["dist"],
-    },
     "noFallthroughCasesInSwitch": true,
     "sourceMap": true,
     "declaration": false,