feat(ZCH-59): add zupit icon

packages/zu-icon/README.md

@@ -1,7 +1,36 @@
 # zu-icon
 
-This library was generated with [Nx](https://nx.dev).
+This library provides a helper component for the [zupit-fantasticon](https://www.npmjs.com/package/zupit-fantasticon) package. It allows you to easily use the icons generated by `zupit-fantasticon` in your Angular application.
+
+## Usage
+
+Once installed `zupit-fantasticon` and generated the icons, you can use the `ZuIconComponent` to display the icons in your Angular application.
+First you will need to import the `ZuIconModule` and to provide the `CUSTOM_ICONS_ENUM` injection token with the enum generated by `zupit-fantasticon`:
+
+
+`app.module.ts`:
+```typescript
+import {Icons} from "../path-to-your-icons-enum";
+import {CUSTOM_ICONS_ENUM, ZuIconModule} from "@zupit-it/zu-icon";
+
+@NgModule({
+    imports: [
+        ZuIconModule,
+    ],
+    providers: [
+        {provide: CUSTOM_ICONS_ENUM, useValue: Icons},
+    ]
+})
+export class AppModule {}
+```
+
+Then you can use the `zu-icon` component in your templates:
+
+```html
+<zu-icon [icon]="Icons.MyIcon"></zu-icon>
+```
+
+If you don't provide a valid icon (i.e. an icon that is not in the enum), the component will not be displayed and an error will be thrown in the console.
+
 
-## Running unit tests
 
-Run `nx test zu-icon` to execute the unit tests.

packages/zu-icon/package.json

@@ -2,8 +2,8 @@
   "name": "@zupit-it/zu-icon",
   "version": "0.0.1",
   "peerDependencies": {
-    "@angular/common": "^17.0.0",
-    "@angular/core": "^17.0.0"
+    "@angular/common": "^16.2.0",
+    "@angular/core": "^16.2.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"

packages/zu-icon/src/lib/components/zupit-icon.component.ts

@@ -1,18 +1,41 @@
 import {Component, Inject, InjectionToken, Input} from '@angular/core';
 
-export const ICONS_TOKEN = new InjectionToken<object>('ICONS_TOKEN');
+export interface IconsEnum {
+    [key: string]: string;
+}
+
+export const CUSTOM_ICONS_ENUM = new InjectionToken<IconsEnum>('CUSTOM_ICONS_ENUM');
 
 @Component({
     selector: 'zu-icon',
     templateUrl: './zupit-icon.component.html',
-    styleUrls: ['./zupit-icon.component.scss']
+    styleUrls: ['./zupit-icon.component.scss'],
 })
-export class ZupitIconComponent<T extends object> {
-    @Input() icon?: T;
+export class ZupitIconComponent {
+    @Input() set icon(value: string) {
+        if (!this.validateIcon(value)) {
+            throw new Error(`Invalid icon '${value}' provided.`);
+        }
+        this._icon = value;
+    }
+
+    get icon(): string {
+        return this._icon;
+    }
+
+    private _icon: string;
+
+    private validateIcon(icon: string): boolean {
+        return Object.values(this.icons).includes(icon);
+    }
+
+    constructor(@Inject(CUSTOM_ICONS_ENUM) public icons: IconsEnum) {
+        if (!icons) {
+            throw new Error('CUSTOM_ICONS_ENUM not provided. Please provide the Icons enum.');
+        }
 
-    constructor(@Inject(ICONS_TOKEN) private icons: T) {
-        if (!icons || typeof icons !== 'object') {
-            throw new Error('ICONS_TOKEN not provided. Please provide the Icons enum.');
+        if(typeof icons !== "object") {
+            throw new Error('CUSTOM_ICONS_ENUM not valid. Please provide a valid Icons enum.');
         }
     }
 }

packages/zu-icon/src/lib/zu-icon.module.ts

@@ -1,9 +1,10 @@
-import { NgModule } from '@angular/core'
-import { CommonModule } from '@angular/common'
+import {NgModule} from '@angular/core'
+import {CommonModule} from '@angular/common'
 import {ZupitIconComponent} from "./components/zupit-icon.component";
 
 @NgModule({
   imports: [CommonModule],
   declarations: [ZupitIconComponent],
+  exports: [ZupitIconComponent]
 })
 export class ZuIconModule {}