From dff8a25ad2256cd09c717e3f8cfa2966c83316f2 Mon Sep 17 00:00:00 2001
From: Antonino Bonanno <nino.bonanno96@gmail.com>
Date: Sun, 7 May 2023 16:23:29 +0200
Subject: [PATCH] fix: hardcoded iconhref in icon component

---
 .../lib/components/utils/icon/icon.component.ts |  9 +++++++--
 .../icon/icon-index/icon-index.component.html   |  5 +++++
 src/app/icon/icon-index/icon-index.component.ts | 17 +++++++++++++++++
 3 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/projects/design-angular-kit/src/lib/components/utils/icon/icon.component.ts b/projects/design-angular-kit/src/lib/components/utils/icon/icon.component.ts
index a4cb61a8..84479d2d 100644
--- a/projects/design-angular-kit/src/lib/components/utils/icon/icon.component.ts
+++ b/projects/design-angular-kit/src/lib/components/utils/icon/icon.component.ts
@@ -1,6 +1,7 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Inject, Input } from '@angular/core';
 import { IconColor, IconName, IconSize } from '../../../interfaces/icon';
 import { BooleanInput, isTrueBooleanInput } from '../../../utils/boolean-input';
+import { DESIGN_ANGULAR_KIT_CONFIG, DesignAngularKitConfig } from '../../../design-angular-kit-config';
 
 @Component({
   selector: 'it-icon[name]',
@@ -38,7 +39,7 @@ export class IconComponent {
    * Return the icon href
    */
   get iconHref(): string {
-    return `./bootstrap-italia/dist/svg/sprites.svg#it-${this.name}`;
+    return `${this.config.iconHref}#it-${this.name}`;
   }
 
   /**
@@ -61,4 +62,8 @@ export class IconComponent {
     return iconClass;
   }
 
+  constructor(
+    @Inject(DESIGN_ANGULAR_KIT_CONFIG) private readonly config: DesignAngularKitConfig
+  ) {
+  }
 }
diff --git a/src/app/icon/icon-index/icon-index.component.html b/src/app/icon/icon-index/icon-index.component.html
index c53c2fd1..c9206115 100644
--- a/src/app/icon/icon-index/icon-index.component.html
+++ b/src/app/icon/icon-index/icon-index.component.html
@@ -7,6 +7,11 @@ <h1 class="bd-title">Icone</h1>
   </it-tab-item>
   <it-tab-item label="API" class="pt-3">
     <h3>IconComponent</h3>
+
+    <p>E' possibile configurare il path <strong>href</strong> del componente attraverso la configurazione iniziale della libreria.</p>
+
+    <it-source-display [typescript]="hrefLibraryConfig"></it-source-display>
+
     <it-api-parameters [component]="component"></it-api-parameters>
   </it-tab-item>
 </it-tab-container>
diff --git a/src/app/icon/icon-index/icon-index.component.ts b/src/app/icon/icon-index/icon-index.component.ts
index 31e8e4e1..b798e343 100644
--- a/src/app/icon/icon-index/icon-index.component.ts
+++ b/src/app/icon/icon-index/icon-index.component.ts
@@ -9,6 +9,23 @@ export class IconIndexComponent {
 
   component: any;
 
+  readonly hrefLibraryConfig = "import {DesignAngularKitModule, DesignAngularKitInit} from 'design-angular-kit';\n" +
+    "  \n" +
+    "  const initConfig: DesignAngularKitInit = {\n" +
+    "    /**\n" +
+    "     * The initial path in the `href` attribute in the `IconComponent` component\n" +
+    "     * @default './bootstrap-italia/dist/svg/sprites.svg'\n" +
+    "     */\n" +
+    "    iconHref: 'my-path/svg/sprites.svg',\n" +
+    "  };\n" +
+    "  \n" +
+    "  @NgModule({\n" +
+    "    imports: [\n" +
+    "      ...\n" +
+    "      DesignAngularKitModule.forRoot(initConfig)\n" +
+    "    ]\n" +
+    "  })";
+
   constructor() {
     this.component = (<any>Documentation).components.find(component => component.name === 'IconComponent');
   }