Release 3.0.0

.changeset/fuzzy-carrots-drive.md

@@ -0,0 +1,5 @@
+---
+"@siemens/ix-icons": minor
+---
+
+Allow users to put specific icons into the cache.

.changeset/honest-monkeys-smile.md

@@ -0,0 +1,33 @@
+---
+'@siemens/ix-icons': major
+---
+
+- Add new set of icons
+- Icon replacements:
+
+| removed                      | replaced by                  |
+| ---------------------------- | ---------------------------- |
+| add-cirlce-small-filled      | add-circle-small-filled      |
+| asset-network-1              | asset-network-filled         |
+| battery-bolt                 | battery-charge               |
+| battery-upright-bolt         | battery-upright-charge       |
+| checkbox-component-checked   | checkbox                     |
+| corner-arrow-up-left         | arrow-up-left                |
+| draw-cirlce                  | draw-circle                  |
+| filter-outline               | filter                       |
+| folder-new-outline           | folder-new                   |
+| folder-open-outline          | folder-open                  |
+| folder-outline               | folder                       |
+| full-screeen-exit            | full-screen-exit             |
+| full-screeen                 | full-screen                  |
+| location-outline             | location                     |
+| new-indicator-filled         | add-circle-small-filled      |
+| new-indicator                | add-circle-small             |
+| no-anomaly                   | anomaly-none                 |
+| plant-outline                | plant                        |
+| tag-cirlce-arrow-down        | tag-circle-arrow-down        |
+| tag-cirlce-arrow-down-filled | tag-circle-arrow-down-filled |
+| thumb-filled                 | thumb-down-filled            |
+| user-reading-reading         | user-reading-filled          |
+
+- Icon `landing-page-logo` removed without an replacement

.changeset/little-baboons-cry.md

@@ -0,0 +1,5 @@
+---
+'@siemens/ix-icons': major
+---
+
+feat: remove prebundled icons

.github/workflows/actions/build/action.yml

@@ -3,24 +3,24 @@ description: 'PNPM & Turbo Cache'
 runs:
   using: 'composite'
   steps:
-    - uses: pnpm/action-setup@v2
+    - uses: pnpm/action-setup@v4
       name: Install pnpm
       with:
         version: 9
         run_install: false
 
     - name: Setup Node.js environment
-      uses: actions/setup-node@v3
+      uses: actions/setup-node@v4
       with:
-        node-version: 18
+        node-version: 22
         cache: 'pnpm'
 
     - name: Get pnpm store directory
       run: |
         echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
       shell: bash
 
-    - uses: actions/cache@v3
+    - uses: actions/cache@v4
       name: Setup pnpm cache
       with:
         path: ${{ env.STORE_PATH }}
@@ -32,7 +32,6 @@ runs:
       run: pnpm install
       shell: bash
 
-
     - name: Build
       shell: bash
       run: pnpm build

.github/workflows/build.yml

@@ -19,7 +19,7 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - uses: ./.github/workflows/actions/build
       - name: Test
         run: pnpm test
@@ -28,9 +28,9 @@ jobs:
     timeout-minutes: 10
     runs-on: ubuntu-latest
     container:
-      image: mcr.microsoft.com/playwright:v1.39.0-jammy
+      image: mcr.microsoft.com/playwright:v1.50.0-noble
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - uses: ./.github/workflows/actions/build
 
@@ -40,7 +40,7 @@ jobs:
       - name: Visual Regression
         run: pnpm visual-regression
 
-      - uses: actions/upload-artifact@v3
+      - uses: actions/upload-artifact@v4
         if: failure()
         with:
           name: html-report--attempt-${{ github.run_attempt }}

.github/workflows/publish.yml

@@ -14,7 +14,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - uses: ./.github/workflows/actions/build
 

.gitignore

@@ -40,3 +40,6 @@ icons/
 /playwright-report/
 /playwright/.cache/
 /svg
+/components
+/e2e/sample.json
+src/components/icon/svg/*.svg

BREAKING_CHANGES.md

@@ -1,3 +1,45 @@
+# v3.0.0
+
+## Loading icon svg as external resource
+
+Previously, all icons were included within the icon package itself. This approach was chosen to simplify setup and eliminate the need for additional configurations. However, this implementation has led to an increase in bundle size.
+
+With the release of version 3 of the main libraries @siemens/ix and @siemens/ix-icons, you now need to provide the icons as a static resource. This significantly reduces the bundle size.
+
+## Remove misspelled and deprecated icons 
+
+| removed    | replaced by |
+| -------- | ------- |
+| add-cirlce-small-filled | add-circle-small-filled |
+| asset-network-1 | asset-network-filled |
+| battery-bolt | battery-charge |
+| battery-upright-bolt | battery-upright-charge |
+| checkbox-component-checked | checkbox |
+| corner-arrow-up-left | arrow-up-left |
+| draw-cirlce | draw-circle |
+| filter-outline | filter |
+| folder-new-outline | folder-new |
+| folder-open-outline | folder-open |
+| folder-outline | folder |
+| full-screeen-exit | full-screen-exit |
+| full-screeen | full-screen |
+| location-outline | location |
+| new-indicator-filled | add-circle-small-filled |
+| new-indicator | add-circle-small |
+| no-anomaly | anomaly-none |
+| plant-outline | plant |
+| tag-cirlce-arrow-down | tag-circle-arrow-down |
+| tag-cirlce-arrow-down-filled | tag-circle-arrow-down-filled |
+| thumb-filled | thumb-down-filled |
+| user-reading-reading | user-reading-filled |
+| validate | checkbox |
+| checkbox-component-mixed | checkbox-mixed |
+| checkbox-component-unchecked | checkbox-empty |
+| landing-page-logo | *-- no replacement --* |
+
+
+
+
 # v2.0.0
 
-Icon web fonts are removed.
+Icon web fonts are removed.

README.md

@@ -12,36 +12,67 @@ SPDX-License-Identifier: MIT
 
 ## Usage
 
-Using icons within your project. You need to:
+### Settng up with Siemens Industrial Experience design system
 
-- Install `@siemens/ix-icons` e.g. `npm install --save @siemens/ix-icons`
+If you are also using the library [Siemens Industrial Experience](https://github.com/siemens/ix/), no additional  project setup will be necessary. The packages `@siemens/ix-angular`, `@siemens/ix-react` or `@siemens/ix-vue` will take care of setting up the icon library for you.
 
-```javascript
-import { defineCustomElements } from '@siemens/ix-icons/loader';
+### Setting up without Siemens Industrial Experience design system
+
+If you want to use `@siemens/ix-icons` without `@siemens/ix` you need to follow these steps:
+
+#### Using CDN
+
+Place the following `<script>` near the end of your page, right before the closing </body> tag.
 
-(async () => {
-  await defineCustomElements();
-})();
+```html
+<script type="module" src="https://cdn.jsdelivr.net/npm/@siemens/ix-icons@%5E3.0.0/dist/ix-icons/ix-icons.esm.js"></script>
+<script nomodule src="https://cdn.jsdelivr.net/npm/@siemens/ix-icons@%5E3.0.0/dist/ix-icons/ix-icons.js"></script>
 ```
 
-### Angular / Web Components
+Now you can render icons in your applicaton:
 
 ```html
-<ix-icon name="rocket"></ix-icon>
+<ix-icon name="star"></ix-icon>
 ```
 
-### React and Vue
+### Using a package manager like `npm`/`pnpm`/`yarn`
 
-```tsx
-import { rocket } from '@siemens/ix-icons/icons';
+First install the package `@siemens/ix-icons@latest` in your project (e.g. `npm install --save @siemens/ix-icons`).
+
+Then load the icon component:
+
+```javascript
+import { defineCustomElements } from '@siemens/ix-icons/loader';
 
-<ix-icon name={rocket}></ix-icon>;
+// Register Web Component <ix-icon></ix-icon>
+defineCustomElements();
 ```
 
-### Use `ix-icon` component with custom svg's
+### Prepare your project
+
+1. **Copy SVG Files:**
+   Copy all SVG files located under `node_modules/@siemens/ix-icons/svg` to an asset folder in your project. This allows the `ix-icon` component to fetch the images.
+
+2. **Alternative Method:**
+   Alternatively, you can use the `addIcons` function to load specific icons directly in your code. For example:
+
+   ```javascript
+   import { addIcons } from '@siemens/ix-icons';
+   import { iconStar } from '@siemens/ix-icons/icons';
+
+   addIcons({ iconStar });
+   ```
+
+   ```html
+   <ix-icon name="star"></ix-icon>
+   ```
+
+   You only need to add the same icon once. Additional calls to `addIcons` will not add redundant copies of the same icons to the collection.
+
+### Use the `ix-icon` component with custom SVG's
 
 ```tsx
-<ix-icon name="/your/asset/path/my-icon.svg"></ix-icon>;
+<ix-icon name="/your/asset/path/my-icon.svg"></ix-icon>
 ```
 
 ## Development
@@ -64,6 +95,6 @@ Contributions, issues and feature requests are welcome!
 
 ## 📝 License
 
-Copyright © 2019–2023 [Siemens AG](https://www.siemens.com/).
+Copyright © 2019–2025 [Siemens AG](https://www.siemens.com/).
 
 This project is MIT licensed.

e2e/all-icon.e2e.ts

@@ -7,8 +7,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { ConsoleMessage, expect, test } from '@playwright/test';
-import * as iconsFile from './../dist/sample.json';
+import { expect, test } from '@playwright/test';
+import * as iconsFile from './sample.json';
 import * as icons from './../icons';
 
 function convertToCamelCase(value: string) {
@@ -30,24 +30,38 @@ function convertToCamelCase(value: string) {
   return normalized.charAt(0).toUpperCase() + normalized.slice(1);
 }
 
-iconsFile.icons.forEach(iconName => {
-  test(`should show ${iconName}`, async ({ page }) => {
-    const dataUrlSvg = icons[`icon${convertToCamelCase(iconName)}`];
-    await page.goto(`http://127.0.0.1:8080/e2e/icon-by-name.html?icon=${iconName}`);
-
-    await page.evaluate(
-      ([url]) => {
-        (window as any).__SVG_DATA__ = url;
-      },
-      [dataUrlSvg],
-    );
-
-    await page.waitForEvent('console', {
-      predicate: (message: ConsoleMessage) => {
-        return message.text() === 'icon-loaded-success';
-      },
+function groupByStartingLetter(arr: string[]): { [key: string]: string[] } {
+  const result: { [key: string]: string[] } = {};
+
+  arr.forEach(item => {
+    const startingLetter = item.charAt(0).toLowerCase();
+    if (!result[startingLetter]) {
+      result[startingLetter] = [];
+    }
+    result[startingLetter].push(item);
+  });
+
+  return result;
+}
+
+const groupedItems = groupByStartingLetter(iconsFile.icons);
+Object.keys(groupedItems).forEach(key => {
+  test(`should match all icons starting with ${key}`, async ({ page }) => {
+    await page.goto('http://127.0.0.1:8080/e2e/all-icons.html');
+
+    const iconContentPage: string[] = [];
+
+    groupedItems[key].forEach(iconName => {
+      iconContentPage.push(`<p>${iconName}</p>`);
+      iconContentPage.push(`<ix-icon name="${iconName}"></ix-icon>`);
+      iconContentPage.push(`<ix-icon name="/www/build/svg/${iconName}.svg"></ix-icon>`);
+      iconContentPage.push(`<ix-icon name="${icons[`icon${convertToCamelCase(iconName)}`]}"></ix-icon>`);
     });
 
-    expect(await page.locator('#mount').screenshot()).toMatchSnapshot();
+    await page.setContent(iconContentPage.join('\n'));
+
+    await expect(page).toHaveScreenshot({
+      fullPage: true,
+    });
   });
 });