@ng-zen/cli 20.0.0-next.2 → 20.0.0

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+## [20.0.0](https://github.com/kstepien3/ng-zen/compare/v19.4.0...v20.0.0) (2025-07-22)
+
+### ⚠ BREAKING CHANGES
+
+* **angular:** upgrade to v20 (#241)
+
+### 🚀 New Features
+
+* **icon:** remove @hugeicons/angular package & improvements ([#248](https://github.com/kstepien3/ng-zen/issues/248)) ([cceabb0](https://github.com/kstepien3/ng-zen/commit/cceabb036f092170da66724d29ffca8ccd702983))
+
+### 🛠️ Code Refactor
+
+* remove suffix from files for Angular v20 compatibility ([#243](https://github.com/kstepien3/ng-zen/issues/243)) ([d26e2f2](https://github.com/kstepien3/ng-zen/commit/d26e2f2faeb052b8f984f82a59e7d95248b2964b))
+
+### 🏗️ Build Changes
+
+* **angular:** upgrade to v20 ([#241](https://github.com/kstepien3/ng-zen/issues/241)) ([a97126c](https://github.com/kstepien3/ng-zen/commit/a97126cbe780cb6fca9fe6c7944aa70cb86b5273))
+
+## [20.0.0-next.3](https://github.com/kstepien3/ng-zen/compare/v20.0.0-next.2...v20.0.0-next.3) (2025-07-21)
+
+### 🚀 New Features
+
+* **icon:** remove @hugeicons/angular package & improvements ([#248](https://github.com/kstepien3/ng-zen/issues/248)) ([cceabb0](https://github.com/kstepien3/ng-zen/commit/cceabb036f092170da66724d29ffca8ccd702983))
+
 ## [20.0.0-next.2](https://github.com/kstepien3/ng-zen/compare/v20.0.0-next.1...v20.0.0-next.2) (2025-07-16)
 
 ### 🛠️ Code Refactor

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-zen/cli",
-  "version": "20.0.0-next.2",
+  "version": "20.0.0",
   "description": "A CLI tool for generating customizable, modern Angular UI components using schematics.",
   "license": "BSD-2-Clause",
   "private": false,

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ZenIcon } from './icon';
+
+describe('ZenIcon', () => {
+  let component: ZenIcon;
+  let fixture: ComponentFixture<ZenIcon>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ZenIcon],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ZenIcon);
+    component = fixture.componentInstance;
+    fixture.componentRef.setInput('icon', 'Tree02Icon');
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -8,14 +8,24 @@ export default {
   title: 'Components/Icon',
   component: ZenIcon,
   tags: ['autodocs'],
+  argTypes: {
+    size: { control: { type: 'range', min: 12, max: 100, step: 1 }, description: 'Size' },
+    strokeWidth: { control: { type: 'range', min: 1, max: 5, step: 0.25 }, description: 'strokeWidth' },
+    absoluteStrokeWidth: { control: 'boolean' },
+  },
+  args: {
+    size: 64,
+    strokeWidth: 1.5,
+    absoluteStrokeWidth: false,
+  },
 } satisfies Meta<Options>;
 
 type Story = StoryObj<Options>;
 
 export const Default: Story = {
-  render: () => ({
+  render: args => ({
     template: `
-        <zen-icon icon="Tree02Icon" [size]="64"/>
+        <zen-icon icon="Tree02Icon" [size]="${args.size}" [strokeWidth]="${args.strokeWidth}" ${args.absoluteStrokeWidth ? 'absoluteStrokeWidth' : ''}>
     `,
   }),
 };

package/schematics/components/files/icon/icon.ts

@@ -1,35 +1,79 @@
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
-import { HugeiconsIconComponent } from '@hugeicons/angular';
+import { booleanAttribute, ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import * as icons from '@hugeicons/core-free-icons';
 
 type Icon = keyof typeof icons;
+interface Path {
+  d: string | number;
+  fill: string | number;
+  opacity: string | number;
+  fillRule: string | number;
+  strokeWidth?: number;
+}
 
 /**
  * A reusable Angular component for rendering icons from the Hugeicons library.
  *
- * This component acts as a wrapper around the `<hugeicons-icon>` component, allowing you to display any icon from the
- * `@hugeicons/core-free-icons` collection by specifying its name. The icon, size, and stroke width are fully configurable
- * via inputs.
+ * 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.
  *
  * @example
  * <zen-icon icon="Tree02Icon" />
  *
- * @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)
+ * @license {@link https://github.com/hugeicons/angular/blob/main/README.md#license|MIT}
  * @see [Hugeicons](https://hugeicons.com)
  */
 @Component({
   selector: 'zen-icon',
   template: `
-    <hugeicons-icon [icon]="icon()" [size]="size()" [strokeWidth]="strokeWidth()" color="currentColor" />
+    <svg
+      [attr.color]="color()"
+      [attr.height]="size()"
+      [attr.width]="size()"
+      fill="none"
+      viewBox="0 0 24 24"
+      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"
+          [attr.stroke]="'currentColor'"
+        />
+      }
+    </svg>
   `,
-  imports: [HugeiconsIconComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ZenIcon {
   /** Icon file names from HugeIcons */
   readonly icon = input.required({ transform: (icon: Icon) => icons[icon] });
   readonly size = input<number>(24);
+  readonly absoluteStrokeWidth = input<boolean, unknown>(false, { transform: booleanAttribute });
   readonly strokeWidth = input<number>(1.5);
+  readonly color = input<string>('currentColor');
+
+  readonly paths = computed<Path[]>(() => this.updatePaths());
+
+  private readonly calculatedStrokeWidth = computed(() => this.calculateStrokeWidth());
+
+  private calculateStrokeWidth(): number {
+    if (!this.absoluteStrokeWidth()) return this.strokeWidth();
+
+    const BASE_SIZE = 24;
+    return (this.strokeWidth() * BASE_SIZE) / this.size();
+  }
+
+  private updatePaths(): Path[] {
+    return this.icon().map(([, attrs]) => ({
+      d: attrs['d'],
+      fill: attrs['fill'] ?? 'none',
+      opacity: attrs['opacity'],
+      fillRule: attrs['fillRule'],
+      strokeWidth: this.calculatedStrokeWidth(),
+    }));
+  }
 }

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

@@ -4,7 +4,6 @@ exports.DEPENDENCIES_CONFIG = void 0;
 exports.DEPENDENCIES_CONFIG = {
     icon: {
         dependencies: {
-            '@hugeicons/angular': 'latest',
             '@hugeicons/core-free-icons': 'latest',
         },
     },

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

@@ -1 +1 @@
-{"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,oBAAoB,EAAE,QAAQ;YAC9B,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/angular': 'latest',\n      '@hugeicons/core-free-icons': 'latest',\n    },\n  },\n};\n"]}
+{"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

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