@synergy-design-system/mcp 1.0.0 → 1.2.0

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

@@ -28,6 +28,30 @@ 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
+setDefaultIconLibrary("sick2025");
+
+// Switch back to the 2018 icon library
+setDefaultIconLibrary("sick2018");
+
+// Switch to the default icon library (2018 for Synergy 2.0, 2025 for Synergy 3.0)
+setDefaultIconLibrary();
+```
+
 #### Angular + Webpack
 
 Including assets from another library can be achieved in angular via configuring the assets configuration in the angular.json file.
@@ -35,7 +59,10 @@ For more information have a look at the [angular documentation](https://angular.
 
 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": "**/*",
@@ -45,12 +72,56 @@ Here's an example that copies the Synergy icons to the path **assets/icons/** of
 ],
 ```
 
+```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";
 
@@ -68,6 +139,93 @@ export default defineConfig({
 });
 ```
 
+```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`.
@@ -130,6 +288,7 @@ This can be done in multiple ways:
 
 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
@@ -141,6 +300,14 @@ const icons = [
   "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);
@@ -154,7 +321,12 @@ 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
 ```
 

package/package.json

@@ -11,7 +11,7 @@
     "globby": "^14.1.0",
     "serve-handler": "^6.1.6",
     "zod": "^3.25.67",
-    "@synergy-design-system/assets": "1.17.0"
+    "@synergy-design-system/assets": "1.18.0"
   },
   "description": "MCP Server for the Synergy Design System",
   "devDependencies": {
@@ -31,10 +31,10 @@
     "ts-jest": "^29.4.0",
     "typescript": "^5.8.3",
     "@synergy-design-system/docs": "0.1.0",
+    "@synergy-design-system/components": "2.40.0",
     "@synergy-design-system/styles": "1.7.2",
     "@synergy-design-system/eslint-config-syn": "^0.1.0",
-    "@synergy-design-system/components": "2.39.2",
-    "@synergy-design-system/tokens": "^2.22.0"
+    "@synergy-design-system/tokens": "^2.23.0"
   },
   "exports": {
     ".": {
@@ -119,7 +119,7 @@
     "directory": "packages/mcp"
   },
   "type": "module",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "scripts": {
     "build": "pnpm run build:ts && pnpm run build:metadata && pnpm build:hash",
     "build:all": "pnpm run build && pnpm run build:storybook",