From 1886d25403a017f22825055e091e07d2e9054675 Mon Sep 17 00:00:00 2001
From: codecalm <codecalm@gmail.com>
Date: Wed, 24 Dec 2025 00:57:52 +0100
Subject: [PATCH] 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              |  2 +-
 .../src/lib/tabler-icon.component.ts          | 33 ++++++++++++-------
 .../src/lib/tabler-icon.provider.ts           |  2 +-
 packages/icons-angular/tsconfig.json          |  3 --
 4 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/packages/icons-angular/README.md b/packages/icons-angular/README.md
index cf0d26609..6281e0704 100644
--- a/packages/icons-angular/README.md
+++ b/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
 
diff --git a/packages/icons-angular/src/lib/tabler-icon.component.ts b/packages/icons-angular/src/lib/tabler-icon.component.ts
index d9bbb4d3c..1be56faa7 100644
--- a/packages/icons-angular/src/lib/tabler-icon.component.ts
+++ b/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) {
diff --git a/packages/icons-angular/src/lib/tabler-icon.provider.ts b/packages/icons-angular/src/lib/tabler-icon.provider.ts
index 99875c7bf..2002e49b3 100644
--- a/packages/icons-angular/src/lib/tabler-icon.provider.ts
+++ b/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', {
diff --git a/packages/icons-angular/tsconfig.json b/packages/icons-angular/tsconfig.json
index be91bb5e2..c84dd2ad4 100644
--- a/packages/icons-angular/tsconfig.json
+++ b/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,