@synergy-design-system/mcp 2.14.1 → 3.0.0

package/metadata/static/migration/v2-2018-to-v3-2025.md

@@ -1,150 +0,0 @@
-# Migrating from Synergy 2.x (SICK 2018) → Synergy 3.x (SICK 2025)
-
-This guide describes how to migrate an application from **Synergy 2.x with the SICK 2018 theme** to **Synergy 3.x with the SICK 2025 theme**.
-
-This is the **recommended** end state for new and actively maintained applications.
-
-> This guide focuses on the _user perspective_ and high-level sequence.
-> For low-level, package-specific changes, always consult the respective `BREAKING_CHANGES.md` documents.
-
----
-
-## Migration Checklist: Quick Overview
-
-- [ ] Review the [Migration to SICK 2025 on Synergy 2](?path=/docs/migration-v2-sick-2018-to-v2-sick-2025--docs) to understand the theme and icon changes.
-- [ ] Decide whether you want to migrate the theme **before** or **together with** the Synergy 3 upgrade.
-- [ ] Update all `@synergy-design-system/*` packages to their compatible Synergy 3 versions.
-- [ ] Apply all relevant breaking changes for:
-  - [ ] `@synergy-design-system/components` ([BREAKING_CHANGES](?path=/docs/packages-components-breaking-changes--docs))
-  - [ ] `@synergy-design-system/tokens` ([BREAKING_CHANGES](?path=/docs/packages-tokens-breaking-changes--docs))
-  - [ ] `@synergy-design-system/assets` ([BREAKING_CHANGES](?path=/docs/packages-assets-breaking-changes--docs))
-  - [ ] `@synergy-design-system/styles` ([BREAKING_CHANGES](?path=/docs/packages-styles-breaking-changes--docs))
-- [ ] Enable the SICK 2025 theme (tokens, theme classes, icons, font).
-- [ ] Test your application visually and functionally in both light and dark mode.
-
----
-
-## Recommended Strategy
-
-There are two practical ways to perform this migration:
-
-1. **Two-step migration** (less risk, more control)
-   - Step 1: Stay on Synergy 2 but migrate to SICK 2025 using the existing theme migration guide.
-   - Step 2: Upgrade from Synergy 2 to Synergy 3 while already using SICK 2025.
-
-2. **One-step migration** (fewer intermediate states, more changes at once)
-   - Update all packages directly to Synergy 3.
-   - Apply package breaking changes and enable SICK 2025 in one go.
-
-This guide is written so it works for both strategies. When in doubt, prefer the **two-step** approach.
-
----
-
-## Migration Steps: Detailed Guide
-
-### 1. Prepare and review current setup
-
-- Confirm your current versions of all `@synergy-design-system/*` packages.
-- Confirm that your application is currently using the **SICK 2018** theme (legacy theme files and theme classes).
-- Skim through the package-specific breaking change guides to understand the scope of changes:
-  - Components: [BREAKING_CHANGES](?path=/docs/packages-components-breaking-changes--docs)
-  - Tokens: [BREAKING_CHANGES](?path=/docs/packages-tokens-breaking-changes--docs)
-
----
-
-### 2. (Optional but recommended) First migrate SICK 2018 → SICK 2025 on Synergy 2
-
-If you prefer a **safer**, staged migration, first migrate your theme while staying on Synergy 2:
-
-- Follow the guide [Migration to SICK 2025 on Synergy 2](?path=/docs/migration-v2-sick-2018-to-v2-sick-2025--docs).
-- Verify:
-  - New SICK 2025 icon assets are available and copied by your build.
-  - `setSystemIconLibrary('sick2025')` (or `setupIcons('sick2025')`) is called as appropriate.
-  - `sick2025_light.css` and `sick2025_dark.css` are imported.
-  - Theme switching uses `.syn-sick2025-light` and `.syn-sick2025-dark`.
-  - The **SICK Intl** font is loaded.
-
-Once this is working, you are effectively in the same state as **Path C** and can continue as in that path when upgrading to Synergy 3.
-
----
-
-### 3. Update Synergy packages to version 3
-
-Update your dependencies to the compatible Synergy 3 versions:
-
-- `@synergy-design-system/components` → latest **3.x**
-- `@synergy-design-system/tokens` → latest **3.x**
-- `@synergy-design-system/assets` → latest **2.x** (or the version recommended in the release notes)
-- `@synergy-design-system/styles` → latest **2.x** (or the version recommended in the release notes)
-
-Make sure all `@synergy-design-system/*` packages are updated together to avoid version mismatches.
-
----
-
-### 4. Apply package-level breaking changes
-
-Go through the breaking change guides and adjust your code accordingly.
-Focus especially on:
-
--- **Components** ([BREAKING_CHANGES](?path=/docs/packages-components-breaking-changes--docs))
-
-- Removed or renamed attributes (e.g. deprecated attributes on dropdowns, tooltips, popups, etc.).
-- Changes in defaults (e.g. numeric input behavior).
-- Updated settings utilities.
-
--- **Tokens** ([BREAKING_CHANGES](?path=/docs/packages-tokens-breaking-changes--docs))
-
-- New default theme behavior (SICK 2025 becoming the default for certain theme imports).
-- The planned deprecation of legacy tokens (e.g. page background tokens).
-
--- **Assets & Styles** ([BREAKING_CHANGES](?path=/docs/packages-assets-breaking-changes--docs), [BREAKING_CHANGES](?path=/docs/packages-styles-breaking-changes--docs))
-
-- Any changes in asset paths, build configuration, or CSS utility classes.
-
-Handle these changes package by package so that your code compiles and your tests pass.
-
----
-
-### 5. Ensure SICK 2025 is active on Synergy 3
-
-On Synergy 3, SICK 2025 becomes the **primary** theme. To ensure your application is correctly configured:
-
-- Confirm that your theme imports reference the SICK 2025 theme files.
-- Confirm that your runtime theme switching uses `.syn-sick2025-light` and `.syn-sick2025-dark`.
-- Confirm that your icon setup uses the SICK 2025 icon library.
-- Confirm that the SICK Intl font is loaded (via fonts package, CDN, or local hosting).
-
-If you used the two-step strategy and already migrated the theme on Synergy 2, this step should mostly be a verification.
-
----
-
-### 6. Test and verify
-
-- Manually test key user flows in your application in both light and dark mode.
-- Pay special attention to:
-  - Layout changes due to new spacing, radii, and typography.
-  - Numeric inputs and other controls with changed defaults.
-  - Popovers, tooltips, dropdowns, and navigation components after API cleanups.
-- Run your automated tests and visual regression tests (if available).
-
----
-
-## Migration: Breaking Changes & Details
-
-This path-level guide is intentionally high level.
-For exact API changes, always work with the package-specific documents:
-
-- Components: [@synergy-design-system/components BREAKING CHANGES](?path=/docs/packages-components-breaking-changes--docs)
-- Tokens: [@synergy-design-system/tokens BREAKING CHANGES](?path=/docs/packages-tokens-breaking-changes--docs)
-- Assets: [@synergy-design-system/assets BREAKING CHANGES](?path=/docs/packages-assets-breaking-changes--docs)
-- Styles: [@synergy-design-system/styles BREAKING CHANGES](?path=/docs/packages-styles-breaking-changes--docs)
-
-You can combine this path guide with those documents to form a project-specific migration plan.
-
----
-
-## References & Further Reading
-
-- Overall migration paths overview: [Synergy Migration Overview](?path=/docs/migration--docs)
-- SICK 2025 theme migration for Synergy 2: [Migration to SICK 2025 on Synergy 2](?path=/docs/migration-v2-sick-2018-to-v2-sick-2025--docs)
-- Additional Synergy documentation: [Synergy Docs](?path=/docs/welcome--docs)

package/metadata/static/migration/v2-2025-to-v3-2025.md

@@ -1,133 +0,0 @@
-# Migrating from Synergy 2.x (SICK 2025) → Synergy 3.x (SICK 2025)
-
-This guide describes how to migrate an application from **Synergy 2.x with the SICK 2025 theme** to **Synergy 3.x with the SICK 2025 theme**.
-
-Use this path if you already migrated your application to the SICK 2025 theme while staying on Synergy 2 (using the dedicated SICK 2025 migration guide) and now want to upgrade to Synergy 3.
-
-> This guide assumes that SICK 2025 is already correctly configured in your Synergy 2 setup.
-> If you are still on SICK 2018, use **Path B** instead.
-
----
-
-## Migration Checklist: Quick Overview
-
-- [ ] Confirm that your Synergy 2 application already follows the SICK 2025 migration guide.
-- [ ] Update all `@synergy-design-system/*` packages to their compatible Synergy 3 versions.
-- [ ] Apply all relevant breaking changes for:
-  - [ ] `@synergy-design-system/components` ([BREAKING_CHANGES](?path=/docs/packages-components-breaking-changes--docs))
-  - [ ] `@synergy-design-system/tokens` ([BREAKING_CHANGES](?path=/docs/packages-tokens-breaking-changes--docs))
-  - [ ] `@synergy-design-system/assets` ([BREAKING_CHANGES](?path=/docs/packages-assets-breaking-changes--docs))
-  - [ ] `@synergy-design-system/styles` ([BREAKING_CHANGES](?path=/docs/packages-styles-breaking-changes--docs))
-- [ ] Verify that SICK 2025 remains active after the upgrade (themes, icons, font).
-- [ ] Test your application visually and functionally in both light and dark mode.
-
----
-
-## Starting Point: Already on SICK 2025
-
-Before you start, you should already have completed:
-
-- The theme migration from SICK 2018 to SICK 2025 on Synergy 2, following
-  [Migration to SICK 2025 on Synergy 2](?path=/docs/migration-v2-sick-2018-to-v2-sick-2025--docs).
-- Your application:
-  - Uses the `sick2025_light.css` and `sick2025_dark.css` theme files.
-  - Uses the `.syn-sick2025-light` and `.syn-sick2025-dark` classes for theme switching.
-  - Loads the SICK Intl font.
-  - Has SICK 2025 icons configured (via direct setup or `setupIcons('sick2025')`).
-
-If any of these are not yet true, complete the SICK 2025 migration first.
-
----
-
-## Migration Steps: Detailed Guide
-
-### 1. Prepare and review current setup
-
-- Confirm your current Synergy versions (2.x) for all `@synergy-design-system/*` packages.
-- Confirm that SICK 2025 is visually working as expected.
-- Skim the package-level breaking change guides to understand the scope of the Synergy 3 upgrade:
-  - Components: [BREAKING_CHANGES](?path=/docs/packages-components-breaking-changes--docs)
-  - Tokens: [BREAKING_CHANGES](?path=/docs/packages-tokens-breaking-changes--docs)
-
----
-
-### 2. Update Synergy packages to version 3
-
-Update your dependencies to the compatible Synergy 3 versions:
-
-- `@synergy-design-system/components` → latest **3.x**
-- `@synergy-design-system/tokens` → latest **3.x**
-- `@synergy-design-system/assets` → latest **2.x** (or the version recommended in the release notes)
-- `@synergy-design-system/styles` → latest **2.x** (or the version recommended in the release notes)
-
-Make sure you update all packages together to avoid version drift.
-
----
-
-### 3. Apply package-level breaking changes
-
-With SICK 2025 already in place, your main work for this path is to align with the Synergy 3 API and behavioral changes.
-
--- **Components** ([BREAKING_CHANGES](?path=/docs/packages-components-breaking-changes--docs))
-
-- Remove deprecated attributes and properties that were dropped in Synergy 3.
-- Adjust to new defaults (e.g., numeric input strategies, popup behavior, navigation variants).
-- Review any changes in configuration utilities or default settings.
-
--- **Tokens** ([BREAKING_CHANGES](?path=/docs/packages-tokens-breaking-changes--docs))
-
-- Verify that your theme imports still point to the correct SICK 2025 theme files.
-- Check for deprecated or renamed tokens and adjust usages accordingly.
-
--- **Assets & Styles** ([BREAKING_CHANGES](?path=/docs/packages-assets-breaking-changes--docs), [BREAKING_CHANGES](?path=/docs/packages-styles-breaking-changes--docs))
-
-- Confirm that asset paths and CSS utilities still match your build setup.
-- Apply any required changes to your bundler configuration.
-
-Work through these changes systematically to keep the codebase compiling and tests passing.
-
----
-
-### 4. Verify SICK 2025 configuration on Synergy 3
-
-Because SICK 2025 is the primary theme in Synergy 3, your existing SICK 2025 setup should mostly carry over, but verify the following:
-
-- **Theme files**: Your imports reference SICK 2025 theme files compatible with Synergy 3.
-- **Theme classes**: You still use `.syn-sick2025-light` and `.syn-sick2025-dark` consistently.
-- **Icons**: Any utilities you used on Synergy 2 (such as `setupIcons('sick2025')` or `setSystemIconLibrary`) are still called at the right time.
-- **Fonts**: The SICK Intl font is loaded through your preferred method.
-
-Adjust only if the breaking change documentation suggests changes.
-
----
-
-### 5. Test and verify
-
-- Test the application in all key scenarios and supported browsers.
-- Pay attention to:
-  - Controls with changed defaults or removed attributes.
-  - Components that rely on the Popover API or similar platform features.
-  - Visual differences due to adjustments in spacing, radii, and typography.
-- Run your automated test suite and any visual regression checks.
-
----
-
-## Migration: Breaking Changes & Details
-
-This path is intentionally focused on the **upgrade from Synergy 2 to Synergy 3** with SICK 2025 already in place.
-For detailed, package-specific changes, consult:
-
-- Components: [@synergy-design-system/components BREAKING CHANGES](?path=/docs/packages-components-breaking-changes--docs)
-- Tokens: [@synergy-design-system/tokens BREAKING CHANGES](?path=/docs/packages-tokens-breaking-changes--docs)
-- Assets: [@synergy-design-system/assets BREAKING CHANGES](?path=/docs/packages-assets-breaking-changes--docs)
-- Styles: [@synergy-design-system/styles BREAKING CHANGES](?path=/docs/packages-styles-breaking-changes--docs)
-
-Combine this path guide with those references to implement and review changes in your codebase.
-
----
-
-## References & Further Reading
-
-- Overall migration paths overview: [Synergy Migration Overview](?path=/docs/migration--docs)
-- SICK 2025 theme migration for Synergy 2: [Migration to SICK 2025 on Synergy 2](?path=/docs/migration-v2-sick-2018-to-v2-sick-2025--docs)
-- Additional Synergy documentation: [Synergy Docs](?path=/docs/welcome--docs)

package/metadata/static/setup/icon-usage.md

@@ -1,411 +0,0 @@
-Icons are small standard symbols that are primarily used in screen design.
-Due to their intended use, the icons must be recognizable min size of 16 x 16 pixels.
-
-> 👩‍💻 **Looking for a specific icon?**<br />
-> Use our [icon search](https://synergy-design-system.github.io/?path=/docs/icon-search--docs) to find a matching icon for your need!
-
-## Package installation
-
-In order for the `syn-icon` component to work, the `@synergy-design-system/assets` package has to be installed.
-
-Run the following command to install the required package.
-
-```bash
-# Install the assets library
-npm install --save @synergy-design-system/assets
-```
-
-## Libraries
-
-You can register additional icons to use with the <syn-icon> component through icon libraries.
-Icon files can exist locally or on a CORS-enabled endpoint (e.g. a CDN).
-There is no limit to how many icon libraries you can register and there is no cost associated with registering them, as individual icons are only requested when they're used.
-The default icon library contains all of the icons by Synergy Design System, which are based on the [Material Icons](https://fonts.google.com/icons).
-
-### How to use the Synergy Design System icons
-
-The default base path of the icon library is set to **assets/icons/**.
-To make the <syn-icon> work out of the box, without configuring anything, the used icons can be copied to this path in you application.
-This can either be done manually or with the help of the bundler.
-
-### Differences in icon usage between Synergy 2.0 and Synergy 3.0
-
-With the upgrade to Synergy 3.0, new icons will be used.
-Those icons are already available as assets in the \`@synergy-design-system/assets\` package.
-When using the new icons, you have to make sure that the icons are available in the \`assets/icons/\` directory of your project.
-The new SICK 2025 icons will be available as `outline` and `fill` variant. `Outline` is the default icon variant and should be used in most cases. `Fill` icons have a slighty different naming. They have the same name as the `outline` icons, but with a suffix of `_fill`. If the `fill` icons should be used without the `_fill` suffix, the icon names need to be renamed. For some examples see the following subchapters.
-
-System icons come bundled with the \`@synergy-design-system/components\` package. You may switch to the new icons with the new \`setSystemIconLibrary\` utility provided.
-Please have a look at the following example to see how to switch the icon library.
-Note that if you do not call this function, it will default to the 2018 icon library, which is used in Synergy 2.0 until Synergy 3.0 is released.
-
-```javascript
-import { setSystemIconLibrary } from "@synergy-design-system/components";
-
-// Switch to the 2025 icon library
-setSystemIconLibrary("sick2025");
-
-// Switch back to the 2018 icon library
-setSystemIconLibrary("sick2018");
-
-// Switch to the default icon library (2018 for Synergy 2.0, 2025 for Synergy 3.0)
-setSystemIconLibrary();
-```
-
-#### Angular + Webpack
-
-Including assets from another library can be achieved in angular via configuring the assets configuration in the angular.json file.
-For more information have a look at the [angular documentation](https://angular.io/guide/workspace-config#asset-config).
-
-Here's an example that copies the Synergy icons to the path **assets/icons/** of an angular project:
-
-##### Synergy icons SICK 2018
-
-```json
-// angular.json
-"assets": [
-  {
-    "glob": "**/*",
-    "input": "./node_modules/@synergy-design-system/assets/src/icons",
-    "output": "/assets/icons"
-  }
-],
-```
-
-```html
-<!-- Usage -->
-<syn-icon name="wallpaper"> <syn-icon /></syn-icon>
-```
-
-##### Synergy icons SICK 2025 outline
-
-```json
-// angular.json
-"assets": [
-  {
-    "glob": "**/*",
-    "input": "./node_modules/@synergy-design-system/assets/src/sick2025/outline",
-    "output": "/assets/icons"
-  }
-],
-```
-
-```html
-<!-- Usage -->
-<syn-icon name="wallpaper"> <syn-icon /></syn-icon>
-```
-
-##### Synergy icons SICK 2025 fill
-
-```json
-// angular.json
-"assets": [
-  {
-    "glob": "**/*",
-    "input": "./node_modules/@synergy-design-system/assets/src/sick2025/fill",
-    "output": "/assets/icons"
-  }
-],
-```
-
-```html
-<!-- Usage -->
-<syn-icon name="wallpaper_fill"> <syn-icon /></syn-icon>
-```
-
-#### Vite
-
-Including assets from another library in vite project can be achieved via using the [vite-plugin-static-copy plugin](https://www.npmjs.com/package/vite-plugin-static-copy).
-Here's an example with adapted vite.config.ts that copies the Synergy icons to the path **assets/icons/** of a vite project:
-
-##### Synergy icons SICK 2018
-
-```js
-// Vite config
-import { defineConfig } from "vite";
-import { viteStaticCopy } from "vite-plugin-static-copy";
-
-export default defineConfig({
-  plugins: [
-    viteStaticCopy({
-      targets: [
-        {
-          src: "node_modules/@synergy-design-system/assets/src/icons/*",
-          dest: "./assets/icons/",
-        },
-      ],
-    }),
-  ],
-});
-```
-
-```html
-<!-- Usage -->
-<syn-icon name="wallpaper"> <syn-icon /></syn-icon>
-```
-
-##### Synergy icons SICK 2025 outline
-
-```js
-// Vite config
-import { defineConfig } from "vite";
-import { viteStaticCopy } from "vite-plugin-static-copy";
-
-export default defineConfig({
-  plugins: [
-    viteStaticCopy({
-      targets: [
-        {
-          src: "node_modules/@synergy-design-system/assets/src/sick2025/outline/*",
-          dest: "./assets/icons/",
-        },
-      ],
-    }),
-  ],
-});
-```
-
-```html
-<!-- Usage -->
-<syn-icon name="wallpaper"> <syn-icon /></syn-icon>
-```
-
-##### Synergy icons SICK 2025 fill
-
-Usage with `_fill` suffix:
-
-```js
-// Vite config
-import { defineConfig } from "vite";
-import { viteStaticCopy } from "vite-plugin-static-copy";
-
-export default defineConfig({
-  plugins: [
-    viteStaticCopy({
-      targets: [
-        {
-          src: "node_modules/@synergy-design-system/assets/src/sick2025/fill/*",
-          dest: "./assets/icons/",
-        },
-      ],
-    }),
-  ],
-});
-```
-
-```html
-<!-- Usage -->
-<syn-icon name="wallpaper_fill"> <syn-icon /></syn-icon>
-```
-
-Usage without `_fill` suffix by renaming files:
-
-```js
-// Vite config
-import { defineConfig } from "vite";
-import { viteStaticCopy } from "vite-plugin-static-copy";
-
-export default defineConfig({
-  plugins: [
-    viteStaticCopy({
-      targets: [
-        {
-          src: "node_modules/@synergy-design-system/assets/src/sick2025/fill/*",
-          dest: "./assets/icons/",
-          rename: (name, extension) =>
-            `${name.replace(/_fill$/, "")}.${extension}`,
-        },
-      ],
-    }),
-  ],
-});
-```
-
-```html
-<!-- Usage -->
-<syn-icon name="wallpaper"> <syn-icon /></syn-icon>
-```
-
-### How to use a custom icon library
-
-To register an additional icon library, use the `registerIconLibrary()` function that's exported from `utilities/icon-library.js`.
-At a minimum, you must provide a name and a resolver function. The resolver function translates an icon name to a URL where the corresponding SVG file exists.
-Refer to the examples below to better understand how it works.
-
-If necessary, a mutator function can be used to mutate the SVG element before rendering. This is necessary for some libraries due to the many possible ways SVGs are crafted.
-For example, icons should ideally inherit the current text color via currentColor, so you may need to apply fill="currentColor" or stroke="currentColor" to the SVG element using this function.
-
-#### Custom icon library provided locally
-
-Here's an example that registers an icon library located in the /assets/icons directory.
-
-```html
-<script type="module">
-  import { registerIconLibrary } from "@synergy-design-system/components";
-
-  registerIconLibrary("my-icons", {
-    resolver: name => `/assets/icons/\${name}.svg`,
-    mutator: svg => svg.setAttribute("fill", "currentColor"),
-  });
-</script>
-```
-
-To display an icon, set the library and name attributes of an syn-icon element.
-
-```html
-<!-- This will show the icon located at /assets/icons/smile.svg -->
-<syn-icon library="my-icons" name="smile"></syn-icon>
-```
-
-## Referencing Assets
-
-Most of the magic behind assets is handled internally by Synergy, but if you need to reference the base path for any reason, there is an exported function called getBasePath(). An optional string argument can be passed, allowing you to get the full path to any asset.
-
-```html
-<script type="module">
-  import { getBasePath, setBasePath } from "@synergy-design-system/components";
-
-  setBasePath("/path/to/assets");
-
-  // ...
-
-  // Get the base path, e.g. /path/to/assets
-  const basePath = getBasePath();
-
-  // Get the path to an asset, e.g. /path/to/assets/file.ext
-  const assetPath = getBasePath("file.ext");
-</script>
-```
-
----
-
-## Creating a custom spritesheet
-
-For performance reasons, it may be beneficial to create a spritesheet from multiple icons.
-This can be done in multiple ways:
-
-### 1. Using the `createSpriteSheet` function
-
-The `createSpriteSheet` function is provided by the `@synergy-design-system/assets` package.
-It takes an array of icon keys and returns a string representation of the SVG sprite sheet, intended to be saved into the file system.
-You may also provide an optional second argument to specify the icon set to use, either `sick2018` or `sick2025`. If not provided, it will default to `sick2018` for Synergy V2 and `sick2025` for Synergy V3.
-As we do not know how exactly you want to use the spritesheet, we will just print it to the console in the following example.
-
-```typescript
-import { createSpriteSheet } from "@synergy-design-system/assets";
-
-const icons = [
-  "warning",
-  "inventory",
-  "battery_charging_full",
-  "notifications",
-];
-
-// V2 iconsheet
-const sheet = createSpriteSheet(icons, "sick2018");
-
-// V3 iconsheet
-const sheet = createSpriteSheet(icons, "sick2025");
-
-// Automatically chooses the default, depending on the version of Synergy you are using
-const sheet = createSpriteSheet(icons);
-
-console.log(sheet);
-```
-
-### 2. Using the the `syn-create-spritesheet` command line utility
-
-```bash
-# Move to the root of your project
-cd my-project
-
-# Create the spritesheet on the command line.
-# You will need to provide a list of icons to include in the spritesheet.
-# Provide the wanted iconset with the --iconset flag.
-# The following command will make sure to save the spritesheet to the file icons.svg
-
-# Generates the icons from the 2025 iconset
-npx syn-create-spritesheet --icons=warning,inventory,battery_charging_full,notifications --iconset=sick2025 > public/icons.svg
-
-npx syn-create-spritesheet --icons=warning,inventory,battery_charging_full,notifications > public/icons.svg
-```
-
-### 3. Directly generating the spritesheet in vite
-
-The following example demonstrates how to generate a spritesheet directly in a vite project, running on every start of the development server.
-
-```typescript
-import fs from "node:fs";
-import { defineConfig } from "vite";
-import { createSpriteSheet } from "@synergy-design-system/assets";
-
-type SynSpriteSheetOptions = {
-  /**
-   * The output file name. Make sure the path exists
-   */
-  outFileName: string;
-
-  /**
-   * List of icons to include in the sprite sheet
-   */
-  icons: Parameters<typeof createSpriteSheet>[0];
-};
-
-const defaultOptions: SynSpriteSheetOptions = {
-  icons: [],
-  outFileName: "./public/synergy-icon-sprites.svg",
-};
-
-const synSpriteSheetCreator = (
-  options: Partial<SynSpriteSheetOptions> = {},
-) => ({
-  buildStart: () => {
-    const finalOptions = {
-      ...defaultOptions,
-      ...options,
-    };
-    const { icons, outFileName } = finalOptions;
-
-    const sheet = createSpriteSheet(icons);
-
-    // Create the output file
-    fs.writeFileSync(outFileName, sheet);
-  },
-  name: "syn-sprite-sheet-creator",
-});
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [
-    synSpriteSheetCreator({
-      icons: ["warning", "inventory", "battery_charging_full", "notifications"],
-    }),
-  ],
-  server: {
-    port: 5173,
-  },
-});
-```
-
-### 4. Creating sprites for angular usage
-
-In an angular project, you can use the following code to create a spritesheet.
-
-```typescript
-// Save this to a file called create-spritesheet.ts in your angular project
-import fs from "node:fs";
-import { createSpriteSheet } from "@synergy-design-system/assets";
-
-const icons = [
-  "warning",
-  "inventory",
-  "battery_charging_full",
-  "notifications",
-];
-const sheet = createSpriteSheet(icons);
-
-// Everything in the src/assets dir will be copied by angular per default.
-// Please refer to https://angular.io/guide/workspace-config#assets-configuration
-// for more information about how to configure this setting.
-fs.writeFileSync("src/assets/icons.svg", sheet);
-```