@ng-zen/cli 21.1.0 → 21.1.1-next.2

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+## [21.1.1-next.2](https://github.com/kstepien3/ng-zen/compare/v21.1.1-next.1...v21.1.1-next.2) (2026-02-24)
+
+### 🛠️ Code Refactor
+
+* **ng-add:** improve icon library installation ([#384](https://github.com/kstepien3/ng-zen/issues/384)) ([a0145de](https://github.com/kstepien3/ng-zen/commit/a0145deed42eb009a78f2dbef3873710a316215f))
+
+### 📚 Documentation
+
+* **icon:** update component description and usage guidance ([#385](https://github.com/kstepien3/ng-zen/issues/385)) ([eb329bd](https://github.com/kstepien3/ng-zen/commit/eb329bdcf7e383bf7a2a54a39f75be7257c4377f))
+
+## [21.1.1-next.1](https://github.com/kstepien3/ng-zen/compare/v21.1.0...v21.1.1-next.1) (2026-02-23)
+
+### 🐛 Bug Fixes
+
+* **icon:** support all SVG shapes and normalize attribute naming ([#380](https://github.com/kstepien3/ng-zen/issues/380)) ([56cf31f](https://github.com/kstepien3/ng-zen/commit/56cf31ffbd59ca427ddb2f284f264a110d63ad4e))
+
+### 📚 Documentation
+
+* **alert:** update example ([#382](https://github.com/kstepien3/ng-zen/issues/382)) ([3d29acb](https://github.com/kstepien3/ng-zen/commit/3d29acbd575d2a3eb3e5028f1abb9d0118918cc2))
+
 ## [21.1.0](https://github.com/kstepien3/ng-zen/compare/v21.0.0...v21.1.0) (2026-02-17)
 
 ### 🚀 New Features

package/README.md

@@ -60,7 +60,7 @@ Unlike traditional UI libraries that give you `<library-button>` black boxes, @n
 
 1. [Quick Start](#-quick-start)
 2. [Installation](#-installation)
-3. [Available Elements](#-available-elements)
+3. [Available Elements](#-available-uis)
 4. [Usage Examples](#-usage-examples)
 5. [Perfect For](#-perfect-for)
 6. [Advanced Features](#-advanced-features)
@@ -112,6 +112,32 @@ pnpm add -D @ng-zen/cli
 pnpm add -D @ng-zen/cli@next
 ```
 
+### Icon Library (Optional)
+
+To use the `zen-icon` component, install an icon library:
+
+```bash
+# Using HugeIcons (recommended)
+pnpm add @hugeicons/core-free-icons
+
+# Or use any other SVG icon library
+```
+
+Then import icons and pass them to the component:
+
+```typescript
+import { CheckmarkIcon } from '@hugeicons/core-free-icons';
+import { ZenIcon } from '@ng-zen/cli';
+
+@Component({
+  imports: [ZenIcon],
+  template: `
+    <zen-icon [icon]="CheckmarkIcon" />
+  `,
+})
+export class MyComponent {}
+```
+
 ## 🧩 Available UIs
 
 | Component        | Description                      | Features                                                                  |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-zen/cli",
-  "version": "21.1.0",
+  "version": "21.1.1-next.2",
   "description": "Angular UI components generator – Zen UI Kit CLI for schematics-based creation of customizable components like avatar, button, checkbox, divider, form-control, icon, input, skeleton, switch, textarea with Storybook demos.",
   "license": "BSD-2-Clause",
   "private": false,

package/schematics/collection.json

@@ -11,11 +11,6 @@
       "factory": "./ui/index#uiGenerator",
       "schema": "./ui/schema.json",
       "aliases": ["c", "component", "components"]
-    },
-    "dependency-manager": {
-      "description": "Manage dependencies for selected elements",
-      "factory": "./dependency-manager/index#dependencyManager",
-      "schema": "./dependency-manager/schema.json"
     }
   }
 }

package/schematics/ng-add/icon-library/icon-libraries.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HugeiconsCoreFree = void 0;
+const dependencies_1 = require("@schematics/angular/utility/dependencies");
+exports.HugeiconsCoreFree = {
+    name: '@hugeicons/core-free-icons',
+    version: 'latest',
+    type: dependencies_1.NodeDependencyType.Default,
+    overwrite: false,
+};
+//# sourceMappingURL=icon-libraries.js.map

package/schematics/ng-add/icon-library/icon-libraries.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-libraries.js","sourceRoot":"","sources":["../../../../../../src/schematics/ng-add/icon-library/icon-libraries.ts"],"names":[],"mappings":";;;AAAA,2EAA8F;AAEjF,QAAA,iBAAiB,GAAmB;IAC/C,IAAI,EAAE,4BAA4B;IAClC,OAAO,EAAE,QAAQ;IACjB,IAAI,EAAE,iCAAkB,CAAC,OAAO;IAChC,SAAS,EAAE,KAAK;CACjB,CAAC","sourcesContent":["import { NodeDependency, NodeDependencyType } from '@schematics/angular/utility/dependencies';\n\nexport const HugeiconsCoreFree: NodeDependency = {\n  name: '@hugeicons/core-free-icons',\n  version: 'latest',\n  type: NodeDependencyType.Default,\n  overwrite: false,\n};\n"]}

package/schematics/ng-add/icon-library/icon-libraries.ts

@@ -0,0 +1,8 @@
+import { NodeDependency, NodeDependencyType } from '@schematics/angular/utility/dependencies';
+
+export const HugeiconsCoreFree: NodeDependency = {
+  name: '@hugeicons/core-free-icons',
+  version: 'latest',
+  type: NodeDependencyType.Default,
+  overwrite: false,
+};

package/schematics/ng-add/icon-library/icon-library.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.installIconLibrary = installIconLibrary;
+exports.logIconLibraryManualInstructions = logIconLibraryManualInstructions;
+const tasks_1 = require("@angular-devkit/schematics/tasks");
+const dependencies_1 = require("@schematics/angular/utility/dependencies");
+const icon_libraries_1 = require("./icon-libraries");
+function installIconLibrary() {
+    return (tree, context) => {
+        context.logger.info('📦 Installing @hugeicons/core-free-icons...');
+        (0, dependencies_1.addPackageJsonDependency)(tree, icon_libraries_1.HugeiconsCoreFree);
+        context.addTask(new tasks_1.NodePackageInstallTask());
+        context.logger.info('✅ @hugeicons/core-free-icons has been added to your project.');
+        return tree;
+    };
+}
+function logIconLibraryManualInstructions() {
+    return (tree, context) => {
+        context.logger.info('To use <zen-icon>, install an SVG icon library (one-time setup):');
+        context.logger.info('  - Recommended: @hugeicons/core-free-icons');
+        context.logger.info('  - Or use any other SVG icon library and pass icons via the [icon] input.');
+        return tree;
+    };
+}
+//# sourceMappingURL=icon-library.js.map

package/schematics/ng-add/icon-library/icon-library.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-library.js","sourceRoot":"","sources":["../../../../../../src/schematics/ng-add/icon-library/icon-library.ts"],"names":[],"mappings":";;AAMA,gDAWC;AAED,4EAQC;AA1BD,4DAA0E;AAC1E,2EAAoF;AAEpF,qDAAqD;AAErD,SAAgB,kBAAkB;IAChC,OAAO,CAAC,IAAU,EAAE,OAAyB,EAAE,EAAE;QAC/C,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,6CAA6C,CAAC,CAAC;QAEnE,IAAA,uCAAwB,EAAC,IAAI,EAAE,kCAAiB,CAAC,CAAC;QAClD,OAAO,CAAC,OAAO,CAAC,IAAI,8BAAsB,EAAE,CAAC,CAAC;QAE9C,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,8DAA8D,CAAC,CAAC;QAEpF,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;AACJ,CAAC;AAED,SAAgB,gCAAgC;IAC9C,OAAO,CAAC,IAAU,EAAE,OAAyB,EAAE,EAAE;QAC/C,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,kEAAkE,CAAC,CAAC;QACxF,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,6CAA6C,CAAC,CAAC;QACnE,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,4EAA4E,CAAC,CAAC;QAElG,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;AACJ,CAAC","sourcesContent":["import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';\nimport { NodePackageInstallTask } from '@angular-devkit/schematics/tasks';\nimport { addPackageJsonDependency } from '@schematics/angular/utility/dependencies';\n\nimport { HugeiconsCoreFree } from './icon-libraries';\n\nexport function installIconLibrary(): Rule {\n  return (tree: Tree, context: SchematicContext) => {\n    context.logger.info('📦 Installing @hugeicons/core-free-icons...');\n\n    addPackageJsonDependency(tree, HugeiconsCoreFree);\n    context.addTask(new NodePackageInstallTask());\n\n    context.logger.info('✅ @hugeicons/core-free-icons has been added to your project.');\n\n    return tree;\n  };\n}\n\nexport function logIconLibraryManualInstructions(): Rule {\n  return (tree: Tree, context: SchematicContext) => {\n    context.logger.info('To use <zen-icon>, install an SVG icon library (one-time setup):');\n    context.logger.info('  - Recommended: @hugeicons/core-free-icons');\n    context.logger.info('  - Or use any other SVG icon library and pass icons via the [icon] input.');\n\n    return tree;\n  };\n}\n"]}

package/schematics/ng-add/icon-library/icon-library.ts

@@ -0,0 +1,28 @@
+import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
+import { NodePackageInstallTask } from '@angular-devkit/schematics/tasks';
+import { addPackageJsonDependency } from '@schematics/angular/utility/dependencies';
+
+import { HugeiconsCoreFree } from './icon-libraries';
+
+export function installIconLibrary(): Rule {
+  return (tree: Tree, context: SchematicContext) => {
+    context.logger.info('📦 Installing @hugeicons/core-free-icons...');
+
+    addPackageJsonDependency(tree, HugeiconsCoreFree);
+    context.addTask(new NodePackageInstallTask());
+
+    context.logger.info('✅ @hugeicons/core-free-icons has been added to your project.');
+
+    return tree;
+  };
+}
+
+export function logIconLibraryManualInstructions(): Rule {
+  return (tree: Tree, context: SchematicContext) => {
+    context.logger.info('To use <zen-icon>, install an SVG icon library (one-time setup):');
+    context.logger.info('  - Recommended: @hugeicons/core-free-icons');
+    context.logger.info('  - Or use any other SVG icon library and pass icons via the [icon] input.');
+
+    return tree;
+  };
+}

package/schematics/ng-add/icon-library/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./icon-library"), exports);
+//# sourceMappingURL=index.js.map

package/schematics/ng-add/icon-library/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/schematics/ng-add/icon-library/index.ts"],"names":[],"mappings":";;;AAAA,yDAA+B","sourcesContent":["export * from './icon-library';\n"]}

package/schematics/ng-add/icon-library/index.ts

@@ -0,0 +1 @@
+export * from './icon-library';

package/schematics/ng-add/index.js

@@ -1,10 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ngAdd = ngAdd;
-function ngAdd() {
-    return async (tree, context) => {
+const icon_library_1 = require("./icon-library");
+function ngAdd(options) {
+    return (tree, context) => {
         context.logger.info('🔧 Setting up ng-zen...');
-        return tree;
+        if (options.installIconLibrary) {
+            return (0, icon_library_1.installIconLibrary)()(tree, context);
+        }
+        return (0, icon_library_1.logIconLibraryManualInstructions)()(tree, context);
     };
 }
 //# sourceMappingURL=index.js.map

package/schematics/ng-add/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/schematics/ng-add/index.ts"],"names":[],"mappings":";;AAEA,sBAMC;AAND,SAAgB,KAAK;IACnB,OAAO,KAAK,EAAE,IAAU,EAAE,OAAyB,EAAE,EAAE;QACrD,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAC;QAE/C,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;AACJ,CAAC","sourcesContent":["import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';\n\nexport function ngAdd(): Rule {\n  return async (tree: Tree, context: SchematicContext) => {\n    context.logger.info('🔧 Setting up ng-zen...');\n\n    return tree;\n  };\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/schematics/ng-add/index.ts"],"names":[],"mappings":";;AAKA,sBAUC;AAbD,iDAAsF;AAGtF,SAAgB,KAAK,CAAC,OAAe;IACnC,OAAO,CAAC,IAAI,EAAE,OAAO,EAAE,EAAE;QACvB,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAC;QAE/C,IAAI,OAAO,CAAC,kBAAkB,EAAE,CAAC;YAC/B,OAAO,IAAA,iCAAkB,GAAE,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QAC7C,CAAC;QAED,OAAO,IAAA,+CAAgC,GAAE,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IAC3D,CAAC,CAAC;AACJ,CAAC","sourcesContent":["import { Rule } from '@angular-devkit/schematics';\n\nimport { installIconLibrary, logIconLibraryManualInstructions } from './icon-library';\nimport { Schema } from './schema';\n\nexport function ngAdd(options: Schema): Rule {\n  return (tree, context) => {\n    context.logger.info('🔧 Setting up ng-zen...');\n\n    if (options.installIconLibrary) {\n      return installIconLibrary()(tree, context);\n    }\n\n    return logIconLibraryManualInstructions()(tree, context);\n  };\n}\n"]}

package/schematics/ng-add/index.ts

@@ -1,9 +1,16 @@
-import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
+import { Rule } from '@angular-devkit/schematics';
 
-export function ngAdd(): Rule {
-  return async (tree: Tree, context: SchematicContext) => {
+import { installIconLibrary, logIconLibraryManualInstructions } from './icon-library';
+import { Schema } from './schema';
+
+export function ngAdd(options: Schema): Rule {
+  return (tree, context) => {
     context.logger.info('🔧 Setting up ng-zen...');
 
-    return tree;
+    if (options.installIconLibrary) {
+      return installIconLibrary()(tree, context);
+    }
+
+    return logIconLibraryManualInstructions()(tree, context);
   };
 }

package/schematics/ng-add/schema.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=schema.js.map

package/schematics/ng-add/schema.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema.js","sourceRoot":"","sources":["../../../../../src/schematics/ng-add/schema.ts"],"names":[],"mappings":"","sourcesContent":["export interface Schema {\n  installIconLibrary?: boolean;\n}\n"]}

package/schematics/ng-add/schema.json

@@ -3,5 +3,11 @@
   "$id": "NgZenCliComponents",
   "title": "Schema to create Zen UI library",
   "type": "object",
-  "description": "Adds Zen CLI library and configure project 📦"
+  "description": "Adds Zen CLI library and configure project 📦",
+  "properties": {
+    "installIconLibrary": {
+      "type": "boolean",
+      "x-prompt": "Would you like to install @hugeicons/core-free-icons? This package provides the icon set for zen-icon component. You can also install it manually later."
+    }
+  }
 }

package/schematics/ng-add/schema.ts

@@ -0,0 +1,3 @@
+export interface Schema {
+  installIconLibrary?: boolean;
+}

package/schematics/ui/files/alert/alert.stories.ts

@@ -1,4 +1,4 @@
-import * as icons from '@hugeicons/core-free-icons';
+import { Notification02Icon } from '@hugeicons/core-free-icons';
 import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 
 import { ZenIcon } from '../icon';
@@ -6,7 +6,6 @@ import { ZenAlert } from './alert';
 
 interface StoryParams {
   content: string;
-  icon: string;
   title: string;
 }
 
@@ -17,7 +16,6 @@ export default {
   component: ZenAlert,
   decorators: [moduleMetadata({ imports: [ZenIcon] })],
   args: {
-    icon: 'Notification02Icon',
     title: 'Alert Title',
     content: 'This is an alert message',
   },
@@ -31,16 +29,6 @@ export default {
         },
       },
     },
-    icon: {
-      control: 'select',
-      options: Object.keys(icons),
-      table: {
-        category: 'story parameters',
-        type: {
-          summary: 'string',
-        },
-      },
-    },
     title: {
       control: 'text',
       table: {
@@ -51,15 +39,17 @@ export default {
       },
     },
   },
-  render: ({ content, icon, title }) => ({
-    props: {},
-    template: `
-      <zen-alert>
-        ${icon ? '<zen-icon alert-icon icon="' + icon + '" />' : ''}
-        <h3 alert-title>${title}</h3>
-        ${content}
-      </zen-alert>`,
-  }),
+  render: ({ content, title }) => {
+    return {
+      props: { Notification02Icon },
+      template: `
+        <zen-alert>
+          <zen-icon alert-icon [icon]="Notification02Icon" />
+          <h3 alert-title>${title}</h3>
+          ${content}
+        </zen-alert>`,
+    };
+  },
 } satisfies Meta<Options>;
 
 type Story = StoryObj<Options>;

package/schematics/ui/files/alert/alert.ts

@@ -9,7 +9,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
  *
  * ```html
  * <zen-alert>
- *   <zen-icon alert-icon icon="Notification02Icon" />
+ *   <zen-icon alert-icon [icon]="Notification02Icon" />
  *   <h3 alert-title>Title</h3>
  *   content
  * </zen-alert>

package/schematics/ui/files/icon/icon.spec.ts

@@ -1,5 +1,6 @@
 import { provideZonelessChangeDetection } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
+import { HomeIcon } from '@hugeicons/core-free-icons';
 import { beforeEach, describe, expect, it } from 'vitest';
 
 import { ZenIcon } from './icon';
@@ -15,7 +16,7 @@ describe('ZenIcon', () => {
   it('should create', () => {
     const fixture = TestBed.createComponent(ZenIcon);
     const component = fixture.componentInstance;
-    fixture.componentRef.setInput('icon', 'Tree02Icon');
+    fixture.componentRef.setInput('icon', HomeIcon);
     expect(component).toBeTruthy();
   });
 });

package/schematics/ui/files/icon/icon.stories.ts

@@ -4,19 +4,30 @@ import { Meta, StoryObj } from '@storybook/angular';
 import { ZenIcon } from './icon';
 
 type Options = ZenIcon;
+const iconKeys = Object.keys(icons) as (keyof typeof icons)[];
+const iconMapping = icons as Record<string, unknown>;
+const iconLabels = Object.fromEntries(iconKeys.map(k => [k as string, String(k).replace(/Icon$/, '')])) as Record<
+  string,
+  string
+>;
+
+console.log(iconKeys);
 
 export default {
   title: 'Ui/Icon',
   component: ZenIcon,
   argTypes: {
     icon: {
-      control: 'select',
-      options: Object.keys(icons),
+      control: {
+        type: 'select',
+        labels: iconLabels,
+      },
+      options: iconKeys,
+      mapping: iconMapping,
       table: {
-        type: { summary: 'string' },
+        type: { summary: 'IconSvgObject' },
         category: 'inputs',
         subcategory: 'required',
-        defaultValue: { summary: '' },
       },
     },
     size: {
@@ -40,7 +51,7 @@ export default {
     size: 24,
     strokeWidth: 1.5,
     absoluteStrokeWidth: false,
-    icon: 'Tree02Icon',
+    icon: 'Tree02Icon' as never,
   },
 } satisfies Meta<Options>;
 

package/schematics/ui/files/icon/icon.ts

@@ -1,55 +1,53 @@
-import { booleanAttribute, ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
-import * as icons from '@hugeicons/core-free-icons';
+import { booleanAttribute, ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 
-type Icon = keyof typeof icons;
-interface Path {
-  d: string | number;
-  fill: string | number;
-  opacity: string | number;
-  fillRule: string | number;
-  strokeWidth?: number;
-}
+/** SVG icon data structure from HugeIcons library - an array of [tagName, attributes] tuples. */
+export type IconSvgObject = readonly (readonly [string, Record<string, string | number>])[];
 
 /**
- * A reusable Angular component for rendering icons from the Hugeicons library.
+ * Reusable Angular component for rendering SVG icons from icon libraries.
+ *
+ * The component renders an icon by accepting an SVG definition object via the `[icon]` input.
+ * Size, stroke width, and color are configurable.
  *
- * This component renders an SVG icon from the `@hugeicons/core-free-icons` collection by name.
- * The size, stroke width, and color are configurable through inputs. It dynamically generates the SVG
- * and its paths, providing a flexible and efficient way to use Hugeicons in an Angular application.
+ * Security note: the icon data is converted to HTML and trusted via `DomSanitizer.bypassSecurityTrustHtml`,
+ * so the provided icon object must come from a trusted source.
  *
  * @example
- * <zen-icon icon="Tree02Icon" />
+ * ```html
+ * <zen-icon [icon]="SvgObject" />
+ * ```
+ *
+ * Compatible with libraries that export icons as `[tagName, attributes]` tuples.
+ * Tested with `@hugeicons/core-free-icons`.
  *
- * @see [Hugeicons](https://hugeicons.com)
+ * @author Konrad Stępień
+ * @license {@link https://github.com/kstepien3/ng-zen/blob/master/LICENSE|BSD-2-Clause}
+ * @see [GitHub](https://github.com/kstepien3/ng-zen)
  */
 @Component({
   selector: 'zen-icon',
   template: `
     <svg
-      [attr.color]="color()"
       [attr.height]="size()"
+      [attr.stroke-width]="calculatedStrokeWidth()"
       [attr.viewBox]="'0 0 ' + BASE_SIZE + ' ' + BASE_SIZE"
       [attr.width]="size()"
+      [innerHTML]="safeSvgContent()"
+      [style.color]="color()"
       fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
       xmlns="http://www.w3.org/2000/svg"
-    >
-      @for (path of paths(); track path) {
-        <path
-          [attr.d]="path.d"
-          [attr.fill-rule]="path.fillRule"
-          [attr.fill]="path.fill"
-          [attr.opacity]="path.opacity"
-          [attr.stroke-width]="path.strokeWidth"
-          stroke="currentColor"
-        />
-      }
-    </svg>
+    ></svg>
   `,
+  styles: [':host { display: inline-flex; }'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ZenIcon {
-  /** Icon file names from HugeIcons */
-  readonly icon = input.required({ transform: (icon: Icon) => icons[icon] });
+  /** SVG object imported from HugeIcons library. */
+  readonly icon = input.required<IconSvgObject>();
   /** Size of the icon in pixels. */
   readonly size = input<number>(24);
   /** Determines if stroke width scales with icon size. */
@@ -60,22 +58,35 @@ export class ZenIcon {
   readonly color = input<string>('currentColor');
 
   protected readonly BASE_SIZE = 24;
-  protected readonly paths = computed<Path[]>(() => this.updatePaths());
-  private readonly calculatedStrokeWidth = computed(() => this.calculateStrokeWidth());
 
-  private updatePaths(): Path[] {
-    return this.icon().map(([, attrs]) => ({
-      d: attrs['d'],
-      fill: attrs['fill'] ?? 'none',
-      opacity: attrs['opacity'],
-      fillRule: attrs['fillRule'],
-      strokeWidth: this.calculatedStrokeWidth(),
-    }));
-  }
+  private readonly sanitizer = inject(DomSanitizer);
 
-  private calculateStrokeWidth(): number {
+  protected readonly calculatedStrokeWidth = computed(() => {
     if (!this.absoluteStrokeWidth()) return this.strokeWidth();
-
     return (this.strokeWidth() * this.BASE_SIZE) / this.size();
+  });
+
+  /** Converts icon data into a sanitized HTML string of SVG elements. */
+  protected readonly safeSvgContent = computed<SafeHtml>(() => {
+    const htmlString = this.icon()
+      .map(([tag, attrs]) => this.buildTag(tag, attrs))
+      .join('');
+
+    return this.sanitizer.bypassSecurityTrustHtml(htmlString);
+  });
+
+  /** Generates a single SVG element string (e.g., <path ...>) with its mapped attributes. */
+  private buildTag(tag: string, attrs: Record<string, string | number>): string {
+    const attributes = Object.entries(attrs)
+      .filter(([key]) => !['strokeWidth', 'stroke-width'].includes(key))
+      .map(([key, value]) => `${this.toKebabCase(key)}="${value}"`)
+      .join(' ');
+
+    return `<${tag} ${attributes} stroke-width="${this.calculatedStrokeWidth()}"></${tag}>`;
+  }
+
+  /** Formats attribute names from camelCase (used in JS library) to a kebab-case for SVG compatibility. */
+  private toKebabCase(str: string): string {
+    return str.replaceAll(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
   }
 }

package/schematics/ui/index.js

@@ -18,10 +18,7 @@ function uiGenerator({ ui, project, ...options }) {
             options.path = ((0, workspace_1.buildDefaultPath)(projectObj) + '/' + DEFAULT_GENERATION_PATH);
         }
         const workingDirectory = (0, core_1.normalize)((0, core_1.join)(options.currentDirectory, options.path));
-        return (0, schematics_1.chain)([
-            ...(0, utils_1.applyFileTemplateUtil)(ui, { ...options, path: workingDirectory }),
-            (0, schematics_1.schematic)('dependency-manager', {}),
-        ]);
+        return (0, schematics_1.chain)([...(0, utils_1.applyFileTemplateUtil)(ui, { ...options, path: workingDirectory })]);
     };
 }
 //# sourceMappingURL=index.js.map

package/schematics/ui/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/schematics/ui/index.ts"],"names":[],"mappings":";;AASA,kCAqBC;AA9BD,+CAA6D;AAC7D,2DAA0E;AAC1E,qEAAuF;AAEvF,uCAAoD;AAGpD,MAAM,uBAAuB,GAAG,IAAI,CAAC,CAAC,aAAa;AAEnD,SAAgB,WAAW,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,GAAG,OAAO,EAAa;IAChE,OAAO,KAAK,EAAE,IAAU,EAAE,EAAE;QAC1B,MAAM,SAAS,GAAG,MAAM,IAAA,wBAAY,EAAC,IAAI,CAAC,CAAC;QAC3C,MAAM,WAAW,GAAG,OAAO,IAAK,SAAS,CAAC,UAAU,CAAC,gBAAgB,CAAY,CAAC;QAClF,MAAM,UAAU,GAAG,SAAS,CAAC,QAAQ,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;QAEvD,IAAI,CAAC,UAAU,EAAE,CAAC;YAChB,MAAM,IAAI,KAAK,CAAC,YAAY,WAAW,2BAA2B,CAAC,CAAC;QACtE,CAAC;QAED,IAAI,OAAO,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;YAC/B,OAAO,CAAC,IAAI,GAAG,CAAC,IAAA,4BAAgB,EAAC,UAAU,CAAC,GAAG,GAAG,GAAG,uBAAuB,CAAS,CAAC;QACxF,CAAC;QAED,MAAM,gBAAgB,GAAG,IAAA,gBAAS,EAAC,IAAA,WAAI,EAAC,OAAO,CAAC,gBAAgB,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;QAEjF,OAAO,IAAA,kBAAK,EAAC;YACX,GAAG,IAAA,6BAAqB,EAAC,EAAE,EAAE,EAAE,GAAG,OAAO,EAAE,IAAI,EAAE,gBAAgB,EAAE,CAAC;YACpE,IAAA,sBAAS,EAAC,oBAAoB,EAAE,EAAE,CAAC;SACpC,CAAC,CAAC;IACL,CAAC,CAAC;AACJ,CAAC","sourcesContent":["import { join, normalize, Path } from '@angular-devkit/core';\nimport { chain, Rule, schematic, Tree } from '@angular-devkit/schematics';\nimport { buildDefaultPath, getWorkspace } from '@schematics/angular/utility/workspace';\n\nimport { applyFileTemplateUtil } from '../../utils';\nimport { Schema as UiOptions } from './schema';\n\nconst DEFAULT_GENERATION_PATH = 'ui'; // src/app/ui\n\nexport function uiGenerator({ ui, project, ...options }: UiOptions): Rule {\n  return async (tree: Tree) => {\n    const workspace = await getWorkspace(tree);\n    const projectName = project || (workspace.extensions['defaultProject'] as string);\n    const projectObj = workspace.projects.get(projectName);\n\n    if (!projectObj) {\n      throw new Error(`Project \"${projectName}\" not found in workspace.`);\n    }\n\n    if (options.path === undefined) {\n      options.path = (buildDefaultPath(projectObj) + '/' + DEFAULT_GENERATION_PATH) as Path;\n    }\n\n    const workingDirectory = normalize(join(options.currentDirectory, options.path));\n\n    return chain([\n      ...applyFileTemplateUtil(ui, { ...options, path: workingDirectory }),\n      schematic('dependency-manager', {}),\n    ]);\n  };\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/schematics/ui/index.ts"],"names":[],"mappings":";;AASA,kCAkBC;AA3BD,+CAA6D;AAC7D,2DAA+D;AAC/D,qEAAuF;AAEvF,uCAAoD;AAGpD,MAAM,uBAAuB,GAAG,IAAI,CAAC,CAAC,aAAa;AAEnD,SAAgB,WAAW,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,GAAG,OAAO,EAAa;IAChE,OAAO,KAAK,EAAE,IAAU,EAAE,EAAE;QAC1B,MAAM,SAAS,GAAG,MAAM,IAAA,wBAAY,EAAC,IAAI,CAAC,CAAC;QAC3C,MAAM,WAAW,GAAG,OAAO,IAAK,SAAS,CAAC,UAAU,CAAC,gBAAgB,CAAY,CAAC;QAClF,MAAM,UAAU,GAAG,SAAS,CAAC,QAAQ,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;QAEvD,IAAI,CAAC,UAAU,EAAE,CAAC;YAChB,MAAM,IAAI,KAAK,CAAC,YAAY,WAAW,2BAA2B,CAAC,CAAC;QACtE,CAAC;QAED,IAAI,OAAO,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;YAC/B,OAAO,CAAC,IAAI,GAAG,CAAC,IAAA,4BAAgB,EAAC,UAAU,CAAC,GAAG,GAAG,GAAG,uBAAuB,CAAS,CAAC;QACxF,CAAC;QAED,MAAM,gBAAgB,GAAG,IAAA,gBAAS,EAAC,IAAA,WAAI,EAAC,OAAO,CAAC,gBAAgB,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;QAEjF,OAAO,IAAA,kBAAK,EAAC,CAAC,GAAG,IAAA,6BAAqB,EAAC,EAAE,EAAE,EAAE,GAAG,OAAO,EAAE,IAAI,EAAE,gBAAgB,EAAE,CAAC,CAAC,CAAC,CAAC;IACvF,CAAC,CAAC;AACJ,CAAC","sourcesContent":["import { join, normalize, Path } from '@angular-devkit/core';\nimport { chain, Rule, Tree } from '@angular-devkit/schematics';\nimport { buildDefaultPath, getWorkspace } from '@schematics/angular/utility/workspace';\n\nimport { applyFileTemplateUtil } from '../../utils';\nimport { Schema as UiOptions } from './schema';\n\nconst DEFAULT_GENERATION_PATH = 'ui'; // src/app/ui\n\nexport function uiGenerator({ ui, project, ...options }: UiOptions): Rule {\n  return async (tree: Tree) => {\n    const workspace = await getWorkspace(tree);\n    const projectName = project || (workspace.extensions['defaultProject'] as string);\n    const projectObj = workspace.projects.get(projectName);\n\n    if (!projectObj) {\n      throw new Error(`Project \"${projectName}\" not found in workspace.`);\n    }\n\n    if (options.path === undefined) {\n      options.path = (buildDefaultPath(projectObj) + '/' + DEFAULT_GENERATION_PATH) as Path;\n    }\n\n    const workingDirectory = normalize(join(options.currentDirectory, options.path));\n\n    return chain([...applyFileTemplateUtil(ui, { ...options, path: workingDirectory })]);\n  };\n}\n"]}

package/schematics/ui/index.ts

@@ -1,5 +1,5 @@
 import { join, normalize, Path } from '@angular-devkit/core';
-import { chain, Rule, schematic, Tree } from '@angular-devkit/schematics';
+import { chain, Rule, Tree } from '@angular-devkit/schematics';
 import { buildDefaultPath, getWorkspace } from '@schematics/angular/utility/workspace';
 
 import { applyFileTemplateUtil } from '../../utils';
@@ -23,9 +23,6 @@ export function uiGenerator({ ui, project, ...options }: UiOptions): Rule {
 
     const workingDirectory = normalize(join(options.currentDirectory, options.path));
 
-    return chain([
-      ...applyFileTemplateUtil(ui, { ...options, path: workingDirectory }),
-      schematic('dependency-manager', {}),
-    ]);
+    return chain([...applyFileTemplateUtil(ui, { ...options, path: workingDirectory })]);
   };
 }

package/schematics/dependency-manager/dependencies.constant.js

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DEPENDENCIES_CONFIG = void 0;
-exports.DEPENDENCIES_CONFIG = {
-    icon: {
-        dependencies: {
-            '@hugeicons/core-free-icons': 'latest',
-        },
-    },
-};
-//# sourceMappingURL=dependencies.constant.js.map

package/schematics/dependency-manager/dependencies.constant.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"dependencies.constant.js","sourceRoot":"","sources":["../../../../../src/schematics/dependency-manager/dependencies.constant.ts"],"names":[],"mappings":";;;AAEa,QAAA,mBAAmB,GAAyB;IACvD,IAAI,EAAE;QACJ,YAAY,EAAE;YACZ,4BAA4B,EAAE,QAAQ;SACvC;KACF;CACF,CAAC","sourcesContent":["import { FilesConfig } from '../../types';\n\nexport const DEPENDENCIES_CONFIG: Partial<FilesConfig> = {\n  icon: {\n    dependencies: {\n      '@hugeicons/core-free-icons': 'latest',\n    },\n  },\n};\n"]}

package/schematics/dependency-manager/dependencies.constant.ts

@@ -1,9 +0,0 @@
-import { FilesConfig } from '../../types';
-
-export const DEPENDENCIES_CONFIG: Partial<FilesConfig> = {
-  icon: {
-    dependencies: {
-      '@hugeicons/core-free-icons': 'latest',
-    },
-  },
-};

package/schematics/dependency-manager/index.js

@@ -1,24 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.dependencyManager = dependencyManager;
-const tasks_1 = require("@angular-devkit/schematics/tasks");
-const dependencies_1 = require("@schematics/angular/utility/dependencies");
-const selected_elements_1 = require("../../services/selected-elements");
-const dependencies_constant_1 = require("./dependencies.constant");
-const get_dependencies_1 = require("./utils/get-dependencies");
-function dependencyManager() {
-    return (tree, context) => {
-        const dependenciesToInstall = (0, get_dependencies_1.getDependencies)(selected_elements_1.selectedElements, dependencies_constant_1.DEPENDENCIES_CONFIG);
-        if (!dependenciesToInstall.length) {
-            context.logger.info('✅ No dependencies to install for the selected elements.');
-            return tree;
-        }
-        context.logger.info(`📦 Installing ${dependenciesToInstall.length} dependencies...`);
-        for (const dependency of dependenciesToInstall) {
-            (0, dependencies_1.addPackageJsonDependency)(tree, dependency);
-        }
-        context.addTask(new tasks_1.NodePackageInstallTask());
-        return tree;
-    };
-}
-//# sourceMappingURL=index.js.map

package/schematics/dependency-manager/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/schematics/dependency-manager/index.ts"],"names":[],"mappings":";;AAQA,8CAkBC;AAzBD,4DAA0E;AAC1E,2EAAoG;AAEpG,wEAAoE;AACpE,mEAA8D;AAC9D,+DAA2D;AAE3D,SAAgB,iBAAiB;IAC/B,OAAO,CAAC,IAAU,EAAE,OAAO,EAAE,EAAE;QAC7B,MAAM,qBAAqB,GAAqB,IAAA,kCAAe,EAAC,oCAAgB,EAAE,2CAAmB,CAAC,CAAC;QAEvG,IAAI,CAAC,qBAAqB,CAAC,MAAM,EAAE,CAAC;YAClC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,yDAAyD,CAAC,CAAC;YAC/E,OAAO,IAAI,CAAC;QACd,CAAC;QAED,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,iBAAiB,qBAAqB,CAAC,MAAM,kBAAkB,CAAC,CAAC;QAErF,KAAK,MAAM,UAAU,IAAI,qBAAqB,EAAE,CAAC;YAC/C,IAAA,uCAAwB,EAAC,IAAI,EAAE,UAAU,CAAC,CAAC;QAC7C,CAAC;QAED,OAAO,CAAC,OAAO,CAAC,IAAI,8BAAsB,EAAE,CAAC,CAAC;QAC9C,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;AACJ,CAAC","sourcesContent":["import { Rule, Tree } from '@angular-devkit/schematics';\nimport { NodePackageInstallTask } from '@angular-devkit/schematics/tasks';\nimport { addPackageJsonDependency, NodeDependency } from '@schematics/angular/utility/dependencies';\n\nimport { selectedElements } from '../../services/selected-elements';\nimport { DEPENDENCIES_CONFIG } from './dependencies.constant';\nimport { getDependencies } from './utils/get-dependencies';\n\nexport function dependencyManager(): Rule {\n  return (tree: Tree, context) => {\n    const dependenciesToInstall: NodeDependency[] = getDependencies(selectedElements, DEPENDENCIES_CONFIG);\n\n    if (!dependenciesToInstall.length) {\n      context.logger.info('✅ No dependencies to install for the selected elements.');\n      return tree;\n    }\n\n    context.logger.info(`📦 Installing ${dependenciesToInstall.length} dependencies...`);\n\n    for (const dependency of dependenciesToInstall) {\n      addPackageJsonDependency(tree, dependency);\n    }\n\n    context.addTask(new NodePackageInstallTask());\n    return tree;\n  };\n}\n"]}

package/schematics/dependency-manager/index.ts

@@ -1,27 +0,0 @@
-import { Rule, Tree } from '@angular-devkit/schematics';
-import { NodePackageInstallTask } from '@angular-devkit/schematics/tasks';
-import { addPackageJsonDependency, NodeDependency } from '@schematics/angular/utility/dependencies';
-
-import { selectedElements } from '../../services/selected-elements';
-import { DEPENDENCIES_CONFIG } from './dependencies.constant';
-import { getDependencies } from './utils/get-dependencies';
-
-export function dependencyManager(): Rule {
-  return (tree: Tree, context) => {
-    const dependenciesToInstall: NodeDependency[] = getDependencies(selectedElements, DEPENDENCIES_CONFIG);
-
-    if (!dependenciesToInstall.length) {
-      context.logger.info('✅ No dependencies to install for the selected elements.');
-      return tree;
-    }
-
-    context.logger.info(`📦 Installing ${dependenciesToInstall.length} dependencies...`);
-
-    for (const dependency of dependenciesToInstall) {
-      addPackageJsonDependency(tree, dependency);
-    }
-
-    context.addTask(new NodePackageInstallTask());
-    return tree;
-  };
-}

package/schematics/dependency-manager/schema.json

@@ -1,12 +0,0 @@
-{
-  "$schema": "http://json-schema.org/schema",
-  "$id": "NgZenDependencyManager",
-  "title": "NgZen Dependency Manager",
-  "properties": {
-    "installation": {
-      "type": "boolean",
-      "x-prompt": "Some elements require additional packages. Would you like to install them?",
-      "description": "Determines whether the required additional npm packages for the selected elements should be installed automatically."
-    }
-  }
-}

package/schematics/dependency-manager/utils/get-dependencies.js

@@ -1,26 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getDependencies = getDependencies;
-const dependencies_1 = require("@schematics/angular/utility/dependencies");
-function getDependencies(selectedElements, dependenciesConfig) {
-    const dependencies = [];
-    for (const component of selectedElements) {
-        if (!dependenciesConfig[component])
-            continue;
-        for (const type of Object.values(dependencies_1.NodeDependencyType)) {
-            const typeDeps = dependenciesConfig[component][type];
-            if (!typeDeps)
-                continue;
-            for (const [name, version] of Object.entries(typeDeps)) {
-                dependencies.push({
-                    type,
-                    name,
-                    version,
-                    overwrite: false,
-                });
-            }
-        }
-    }
-    return dependencies;
-}
-//# sourceMappingURL=get-dependencies.js.map

package/schematics/dependency-manager/utils/get-dependencies.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"get-dependencies.js","sourceRoot":"","sources":["../../../../../../src/schematics/dependency-manager/utils/get-dependencies.ts"],"names":[],"mappings":";;AAKA,0CAyBC;AA9BD,2EAA8F;AAK9F,SAAgB,eAAe,CAC7B,gBAA0B,EAC1B,kBAAwC;IAExC,MAAM,YAAY,GAAqB,EAAE,CAAC;IAE1C,KAAK,MAAM,SAAS,IAAI,gBAAgB,EAAE,CAAC;QACzC,IAAI,CAAC,kBAAkB,CAAC,SAAS,CAAC;YAAE,SAAS;QAE7C,KAAK,MAAM,IAAI,IAAI,MAAM,CAAC,MAAM,CAAC,iCAAkB,CAAC,EAAE,CAAC;YACrD,MAAM,QAAQ,GAAG,kBAAkB,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,CAAC;YACrD,IAAI,CAAC,QAAQ;gBAAE,SAAS;YAExB,KAAK,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC;gBACvD,YAAY,CAAC,IAAI,CAAC;oBAChB,IAAI;oBACJ,IAAI;oBACJ,OAAO;oBACP,SAAS,EAAE,KAAK;iBACjB,CAAC,CAAC;YACL,CAAC;QACH,CAAC;IACH,CAAC;IAED,OAAO,YAAY,CAAC;AACtB,CAAC","sourcesContent":["import { NodeDependency, NodeDependencyType } from '@schematics/angular/utility/dependencies';\n\nimport { FilesConfig } from '../../../types';\nimport { UiType } from '../../ui/schema';\n\nexport function getDependencies(\n  selectedElements: UiType[],\n  dependenciesConfig: Partial<FilesConfig>\n): NodeDependency[] {\n  const dependencies: NodeDependency[] = [];\n\n  for (const component of selectedElements) {\n    if (!dependenciesConfig[component]) continue;\n\n    for (const type of Object.values(NodeDependencyType)) {\n      const typeDeps = dependenciesConfig[component][type];\n      if (!typeDeps) continue;\n\n      for (const [name, version] of Object.entries(typeDeps)) {\n        dependencies.push({\n          type,\n          name,\n          version,\n          overwrite: false,\n        });\n      }\n    }\n  }\n\n  return dependencies;\n}\n"]}

package/schematics/dependency-manager/utils/get-dependencies.ts

@@ -1,31 +0,0 @@
-import { NodeDependency, NodeDependencyType } from '@schematics/angular/utility/dependencies';
-
-import { FilesConfig } from '../../../types';
-import { UiType } from '../../ui/schema';
-
-export function getDependencies(
-  selectedElements: UiType[],
-  dependenciesConfig: Partial<FilesConfig>
-): NodeDependency[] {
-  const dependencies: NodeDependency[] = [];
-
-  for (const component of selectedElements) {
-    if (!dependenciesConfig[component]) continue;
-
-    for (const type of Object.values(NodeDependencyType)) {
-      const typeDeps = dependenciesConfig[component][type];
-      if (!typeDeps) continue;
-
-      for (const [name, version] of Object.entries(typeDeps)) {
-        dependencies.push({
-          type,
-          name,
-          version,
-          overwrite: false,
-        });
-      }
-    }
-  }
-
-  return dependencies;
-}