docs: integrate ix-icons v3

.gitignore

@@ -186,6 +186,7 @@ packages/documentation/docs/auto-generated/
 packages/documentation/.build-temp
 packages/documentation/scripts/.typedoc/
 packages/documentation/static/auto-generated/
+packages/documentation/static/ix-icon-svg/
 packages/documentation/static/figma/
 packages/documentation/static/webcomponent-examples/*
 packages/documentation/static/ionic-preview

BREAKING_CHANGES/v3.md

@@ -4,9 +4,12 @@ Here is a detailed overview of all breaking changes introduced in this major upd
 
 ## Remove package `@siemens/ix-icons` from `@siemens/ix` base library
 
-The `@siemens/ix-icons` package requires manual bootstrapping. For detailed installation instructions, please refer to the [`@siemens/ix-icons`](https://github.com/siemens/ix-icons) repository.
+Prior to version 3.0.0 of `@siemens/ix-icons` the entire icon set was loaded into the client by default, which caused unnecessary usage of bandwidth and memory.
+Starting with version 3.0.0, icons can now be loaded individually, providing significant performance optimizations.
+To enable individual icon loading, the @siemens/ix-icons package now requires manual bootstrapping.
+Please refer to the [`@siemens/ix-icons`](https://github.com/siemens/ix-icons) repository for detailed installation instructions.
 
-If you are using one of the framework wrappers such as `@siemens/ix-angular`, `@siemens/ix-react` or `@siemens/ix-vue` refer to the sections below.
+For usage with one of the framework wrappers (`@siemens/ix-angular`, `@siemens/ix-react` and `@siemens/ix-vue`) read the respective section below.
 
 ### Usage of icons inside `@siemens/ix-react` and `@siemens/ix-vue` changed
 
@@ -21,7 +24,11 @@ import { iconStar } from '@siemens/ix-icons/icons';
 Use the icon as attribute like this:
 
 ```html
-<IxIcon name="{iconStar}" />
+React:
+<IxIcon name={iconStar} />
+
+Vue:
+<IxIcon :name="iconStar" />
 ```
 
 If you want to use the "legacy" style (`<IxIcon name="star" />`), you'll need to do some additional setup tasks.
@@ -47,7 +54,7 @@ export default defineConfig({
 
 ### Usage of icons inside `@siemens/ix-angular` changed
 
-To use imports by name (e.g. `<ix-icon name="star"></ix-icon>`), you need to add a configuration entry inside of `angular.json`:
+Copy iX icons into your project folder via `angular.json`.
 
 ```json
 "assets": [
@@ -61,19 +68,35 @@ To use imports by name (e.g. `<ix-icon name="star"></ix-icon>`), you need to add
 ],
 ```
 
-TODO: Clarification needed if the legacy feature `preloadIcons` should be part of the PR.
+Then you can reference iX icons by name anywhere in your application.
+
+```html
+<ix-icon name="star"></ix-icon>
+```
+
+To load individual icons you can also use the `addIcons` function during runtime:
 
-To re-enable the preloaded icons you can provide the `preloadIcons` function as configuration to the module import.
+```js
+import { addIcons } from @siemens/ix-icons;
+import { iconStar, iconStarFilled } from @siemens/ix-icons/icons;
 
-```ts
-IxModule.forRoot({
-  preloadIcons,
-}),
+addIcons({ iconStar, iconStarFilled });
 ```
 
+```html
+<ix-icon name="star"></ix-icon>
+<ix-icon name="star-filled"></ix-icon>
+````
+
+### Usage of icons in pure HTML
+
+```html
+<ix-icon name="star"></ix-icon>
+
 ### Custom asset path for icons
 
-To configure the asset path from which domain the `ix-icon` component will load the resource you have two options via `meta`-tag or the `setAssetPath`-function.
+In order to be able to load custom icons, we need to configure the domain of the asset path.
+This can either be done via `meta`-tag or with the `setAssetPath`-function.
 
 #### with `meta`-tag
 
@@ -91,11 +114,11 @@ To configure the asset path from which domain the `ix-icon` component will load
 <IxIcon name="star"></IxIcon>
 ```
 
-Above will fetch the svg from `https://some-resource-domain/star.svg`
+Above code will fetch the SVG from `https://some-resource-domain/star.svg`
 
 #### with `setAssetPath`-function
 
-Make sure to call the `setAssetPath`-function before using the `IxIcon` component, such as in the main file.
+Make sure to call the `setAssetPath`-function before using the `IxIcon` component (e.g. in the main file).
 
 ```ts
 import { setAssetPath } from '@siemens/ix-icons/components';
@@ -107,9 +130,10 @@ setAssetPath('https://some-resource-domain');
 <IxIcon name="star"></IxIcon>
 ```
 
-Above will fetch the SVG from `https://some-resource-domain/star.svg`
+Above code will fetch the SVG from `https://some-resource-domain/star.svg`
 
-This will preload all icons without including the SVGs as assets, which results in a larger bundle size. This approach ist **NOT recommended**.
+This will preload all icons without including the SVGs as assets, which results in a larger bundle size.
+Therefore, this approach is **NOT recommended**.
 
 ## Change props to `@internal`:
 

packages/aggrid/package.json

@@ -22,7 +22,7 @@
   "devDependencies": {
     "@playwright/test": "^1.49.1",
     "@siemens/ix": "workspace:*",
-    "@siemens/ix-icons": "0.0.0-20240827135516",
+    "@siemens/ix-icons": "0.0.0-pr-69-20250203134847",
     "@types/gulp": "^4.0.14",
     "@types/gulp-postcss": "^8.0.4",
     "@types/gulp-sass": "^5.0.2",

packages/angular-standalone-test-app/package.json

@@ -23,7 +23,7 @@
     "@siemens/ix-angular": "workspace:*",
     "@siemens/ix-echarts": "workspace:*",
     "@siemens/ix-aggrid": "workspace:*",
-    "@siemens/ix-icons": "0.0.0-20240827135516",
+    "@siemens/ix-icons": "0.0.0-pr-69-20250203134847",
     "ag-grid-angular": "^32.0.2",
     "ag-grid-community": "^32.0.2",
     "echarts": "5.4.3",

packages/angular-standalone-test-app/src/app/app.routes.ts

@@ -33,6 +33,11 @@ export const routes: Routes = [
         loadComponent: () =>
           import('../preview-examples/action-card').then((m) => m.default),
       },
+      {
+        path: 'add-icons',
+        loadComponent: () =>
+          import('../preview-examples/add-icons').then((m) => m.default),
+      },
       {
         path: 'aggrid',
         loadComponent: () =>

packages/angular-standalone-test-app/src/preview-examples/add-icons.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;
+}

packages/angular-standalone-test-app/src/preview-examples/add-icons.html

@@ -0,0 +1,3 @@
+<ix-icon name="star"></ix-icon>
+<ix-icon name="starFilled"></ix-icon>
+<ix-icon name="star-filled"></ix-icon>

packages/angular-standalone-test-app/src/preview-examples/add-icons.ts

@@ -0,0 +1,26 @@
+/*
+ * 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 } from '@angular/core';
+import { IxIcon } from '@siemens/ix-angular/standalone';
+import { addIcons } from '@siemens/ix-icons';
+import { iconStar, iconStarFilled } from '@siemens/ix-icons/icons';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: './add-icons.html',
+  styleUrls: ['./add-icons.css'],
+  standalone: true,
+  imports: [IxIcon],
+})
+export default class AddIcons {
+  constructor() {
+    addIcons({ iconStar, iconStarFilled });
+  }
+}

packages/angular-test-app/package.json

@@ -22,8 +22,8 @@
     "@siemens/ix": "workspace:*",
     "@siemens/ix-angular": "workspace:*",
     "@siemens/ix-echarts": "workspace:*",
+    "@siemens/ix-icons": "0.0.0-pr-69-20250203134847",
     "@siemens/ix-aggrid": "workspace:*",
-    "@siemens/ix-icons": "0.0.0-20240827135516",
     "ag-grid-angular": "^32.0.2",
     "ag-grid-community": "^32.0.2",
     "echarts": "5.4.3",

packages/angular-test-app/src/app/app-routing.module.ts

@@ -12,6 +12,7 @@ import { RouterModule, Routes } from '@angular/router';
 
 import AboutAndLegal from '../preview-examples/about-and-legal';
 import ActionCard from '../preview-examples/action-card';
+import AddIcons from '../preview-examples/add-icons';
 import AgGrid from '../preview-examples/aggrid';
 import ApplicationExample from '../preview-examples/application';
 import ApplicationAppSwitchExample from '../preview-examples/application-app-switch';
@@ -242,6 +243,10 @@ const routes: Routes = [
         path: 'action-card',
         component: ActionCard,
       },
+      {
+        path: 'add-icons',
+        component: AddIcons,
+      },
       {
         path: 'application',
         component: ApplicationExample,

packages/angular-test-app/src/app/app.module.ts

@@ -21,6 +21,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as echarts from 'echarts';
 import AboutAndLegal from '../preview-examples/about-and-legal';
 import ActionCard from '../preview-examples/action-card';
+import AddIcons from '../preview-examples/add-icons';
 import AgGrid from '../preview-examples/aggrid';
 import ApplicationExample from '../preview-examples/application';
 import ApplicationAppSwitchExample from '../preview-examples/application-app-switch';
@@ -248,6 +249,7 @@ import WorkflowVertical from '../preview-examples/workflow-vertical';
     AppComponent,
     AboutAndLegal,
     ActionCard,
+    AddIcons,
     AgGrid,
     ApplicationExample,
     ApplicationBreakpointExample,

packages/angular-test-app/src/main.ts

@@ -1,5 +1,6 @@
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
+
 import { AppModule } from './app/app.module';
 
 platformBrowserDynamic()

packages/angular-test-app/src/preview-examples/add-icons.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;
+}

packages/angular-test-app/src/preview-examples/add-icons.html

@@ -0,0 +1,3 @@
+<ix-icon name="star"></ix-icon>
+<ix-icon name="starFilled"></ix-icon>
+<ix-icon name="star-filled"></ix-icon>

packages/angular-test-app/src/preview-examples/add-icons.ts

@@ -0,0 +1,24 @@
+/*
+ * 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, OnInit } from '@angular/core';
+import { addIcons } from '@siemens/ix-icons';
+import { iconStar, iconStarFilled } from '@siemens/ix-icons/icons';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: './add-icons.html',
+  styleUrls: ['./add-icons.css'],
+})
+export default class AddIcons implements OnInit {
+
+  ngOnInit() {
+    addIcons({ iconStar, iconStarFilled });
+  }
+}

packages/angular/package.json

@@ -21,7 +21,7 @@
   "peerDependencies": {
     "@angular/core": ">=17.3.0",
     "@angular/forms": ">=17.3.0",
-    "@siemens/ix-icons": "0.0.0-20240827135516"
+    "@siemens/ix-icons": "0.0.0-pr-69-20250203134847"
   },
   "devDependencies": {
     "@angular/animations": "^17.3.12",

packages/angular/src/module.ts

@@ -45,15 +45,13 @@ const DECLARATIONS = [
   exports: DECLARATIONS,
 })
 export class IxModule {
-  static forRoot(options?: {
-    preloadIcons?: () => void;
-  }): ModuleWithProviders<IxModule> {
+  static forRoot(): ModuleWithProviders<IxModule> {
     return {
       ngModule: IxModule,
       providers: [
         {
           provide: APP_INITIALIZER,
-          useFactory: appInitialize(options?.preloadIcons),
+          useFactory: appInitialize(),
           multi: true,
           deps: [DOCUMENT, NgZone],
         },

packages/angular/src/utils/app-initialize.ts

@@ -12,18 +12,14 @@ import { defineCustomElements } from '@siemens/ix/loader';
 
 let didInitialize = false;
 
-export const appInitialize = (preloadIcons?: () => void) => (doc: Document) => {
+export const appInitialize = () => (doc: Document) => {
   return () => {
     const win: Window | undefined = doc.defaultView as any;
     if (win && typeof (window as any) !== 'undefined') {
       if (didInitialize) {
         return;
       }
 
-      if (preloadIcons) {
-        preloadIcons();
-      }
-
       didInitialize = true;
 
       iconsDefineCustomElements();

packages/core/component-doc.json

@@ -2,7 +2,7 @@
   "timestamp": "",
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.23.2",
+    "version": "4.25.1",
     "typescriptVersion": "5.5.4"
   },
   "components": [
@@ -22552,10 +22552,10 @@
       "docstring": "",
       "path": "src/components.d.ts"
     },
-    "../../node_modules/.pnpm/@stencil+core@4.23.2/node_modules/@stencil/core/internal/stencil-core/index.d.ts::Element": {
+    "../../node_modules/.pnpm/@stencil+core@4.25.1/node_modules/@stencil/core/internal/stencil-core/index.d.ts::Element": {
       "declaration": "any",
       "docstring": "",
-      "path": "../../node_modules/.pnpm/@stencil+core@4.23.2/node_modules/@stencil/core/internal/stencil-core/index.d.ts"
+      "path": "../../node_modules/.pnpm/@stencil+core@4.25.1/node_modules/@stencil/core/internal/stencil-core/index.d.ts"
     },
     "src/components/tree/tree-model.ts::TreeModel": {
       "declaration": "{\n    [P in K]: T;\n}",

packages/core/package.json

@@ -45,14 +45,14 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.6.10",
-    "@stencil/core": "^4.22.1",
+    "@stencil/core": "^4.25.1",
     "@types/luxon": "^3.4.2",
     "animejs": "~3.2.2",
     "luxon": "^3.4.4"
   },
   "devDependencies": {
     "@playwright/test": "^1.49.1",
-    "@siemens/ix-icons": "0.0.0-20240827135516",
+    "@siemens/ix-icons": "0.0.0-pr-69-20250203134847",
     "@stencil-community/eslint-plugin": "^0.7.2",
     "@stencil-community/postcss": "^2.2.0",
     "@stencil/angular-output-target": "^0.9.0",
@@ -88,7 +88,7 @@
     "typescript": "~5.4.5"
   },
   "peerDependencies": {
-    "@siemens/ix-icons": "0.0.0-20240827135516"
+    "@siemens/ix-icons": "0.0.0-pr-69-20250203134847"
   },
   "config": {
     "commitizen": {