docs(angular/load-icon): add example

siemens · Jan 17, 2025 · 5a71e4b · 5a71e4b
1 parent 9b6e9c7
commit 5a71e4b
Show file tree

Hide file tree

Showing 9 changed files with 182 additions and 54 deletions.
diff --git a/BREAKING_CHANGES/v3.md b/BREAKING_CHANGES/v3.md
@@ -39,7 +39,7 @@ export default defineConfig({
       verbose: true,
       targets: [
         {
-          src: 'node_modules/@siemens/ix-icons/incoming-svg/*.svg',
+          src: 'node_modules/@siemens/ix-icons/svg/*.svg',
           dest: 'public/svg',
         },
       ],
@@ -58,7 +58,7 @@ Copy iX icons into your project folder via `angular.json`.
   "src/assets",
   {
   "glob": "**/*.svg",
-  "input": "node_modules/@siemens/ix-icons/incoming-svg",
+  "input": "node_modules/@siemens/ix-icons/svg",
   "output": "./svg"
   }
 ],

diff --git a/packages/angular-test-app/package.json b/packages/angular-test-app/package.json
@@ -22,7 +22,7 @@
     "@siemens/ix": "workspace:*",
     "@siemens/ix-angular": "workspace:*",
     "@siemens/ix-echarts": "workspace:*",
-    "@siemens/ix-icons": "0.0.0-20240827135516",
+    "@siemens/ix-icons": "0.0.0-20250114162200",
     "ag-grid-angular": "^30.2.1",
     "ag-grid-community": "^32.0.2",
     "echarts": "5.4.3",

diff --git a/packages/angular-test-app/src/app/app-routing.module.ts b/packages/angular-test-app/src/app/app-routing.module.ts
@@ -146,6 +146,7 @@ import LayoutAutoCustom from '../preview-examples/layout-auto-custom';
 import LinkButton from '../preview-examples/link-button';
 import LinkButtonDisabled from '../preview-examples/link-button-disabled';
 import Loading from '../preview-examples/loading';
+import LoadIcon from '../preview-examples/load-icon';
 import MapNavigation from '../preview-examples/map-navigation';
 import MapNavigationMigration from '../preview-examples/map-navigation-migration';
 import MapNavigationOverlay from '../preview-examples/map-navigation-overlay';
@@ -698,6 +699,10 @@ const routes: Routes = [
         path: 'loading',
         component: Loading,
       },
+      {
+        path: 'load-icon',
+        component: LoadIcon,
+      },
       {
         path: 'map-navigation-overlay',
         component: MapNavigationOverlay,

diff --git a/packages/angular-test-app/src/app/app.module.ts b/packages/angular-test-app/src/app/app.module.ts
@@ -155,6 +155,7 @@ import LayoutAutoCustom from '../preview-examples/layout-auto-custom';
 import LinkButton from '../preview-examples/link-button';
 import LinkButtonDisabled from '../preview-examples/link-button-disabled';
 import Loading from '../preview-examples/loading';
+import LoadIcon from '../preview-examples/load-icon';
 import MapNavigation from '../preview-examples/map-navigation';
 import MapNavigationMigration from '../preview-examples/map-navigation-migration';
 import MapNavigationOverlay from '../preview-examples/map-navigation-overlay';
@@ -370,6 +371,7 @@ import WorkflowVertical from '../preview-examples/workflow-vertical';
     LinkButtonDisabled,
     LinkButton,
     Loading,
+    LoadIcon,
     MapNavigationOverlay,
     MapNavigation,
     MenuCategory,

diff --git a/packages/angular-test-app/src/preview-examples/load-icon.css b/packages/angular-test-app/src/preview-examples/load-icon.css
@@ -0,0 +1,22 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * Styles get overwritten by html-test-app css files each build or dev task.
+ * If you want to modify the example styles do this only inside the html-test-app
+ */
+
+body {
+  display: flex;
+  flex-direction: column;
+}
+
+div,
+ix-icon {
+  margin: 0.25rem;
+}
diff --git a/packages/angular-test-app/src/preview-examples/load-icon.html b/packages/angular-test-app/src/preview-examples/load-icon.html
@@ -0,0 +1,2 @@
+<ix-icon name="info"></ix-icon>
+<ix-icon *ngIf="showIcon" name="star"></ix-icon>
diff --git a/packages/angular-test-app/src/preview-examples/load-icon.ts b/packages/angular-test-app/src/preview-examples/load-icon.ts
@@ -0,0 +1,34 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { Component, Input } from '@angular/core';
+import { loadIcons } from '@siemens/ix-icons';
+import { defineCustomElements as defineCustomIconElements } from '@siemens/ix-icons/loader';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: './load-icon.html',
+  styleUrls: ['./load-icon.css'],
+})
+export default class LoadIcon {
+  @Input() showIcon = false;
+
+  constructor() {
+    (async () => {
+      defineCustomIconElements();
+    })();
+
+    const icons = ['info', 'star', 'star-filled'];
+    loadIcons(icons);
+
+    setTimeout(() => {
+      this.showIcon = true;
+    }, 1000);
+  }
+}
diff --git a/packages/documentation/docs/icon-library/_icon_code.md b/packages/documentation/docs/icon-library/_icon_code.md
@@ -22,7 +22,7 @@ Copy iX icons into your project folder via `angular.json`.
   "src/assets",
   {
   "glob": "**/*.svg",
-  "input": "node_modules/@siemens/ix-icons/incoming-svg",
+  "input": "node_modules/@siemens/ix-icons/svg",
   "output": "./svg"
   }
 ],
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		<ix-icon name="info"></ix-icon>
		<ix-icon *ngIf="showIcon" name="star"></ix-icon>