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

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## [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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-zen/cli",
-  "version": "21.1.0",
+  "version": "21.1.1-next.1",
   "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/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,50 @@
-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.
  *
- * 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.
+ * This component renders an SVG icon by accepting an imported SVG object from Ui Libraries
+ * The size, stroke width, and color are configurable.
+
  *
  * @example
- * <zen-icon icon="Tree02Icon" />
+ * ```html
+ * <zen-icon [icon]="SvgObject" />
+ * ```
+ *
+ * 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 +55,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();
   }
 }