@synergy-design-system/assets

This package provides assets like:

• logos: a collection of various logos (such as the variants of the SICK brand logo)
• icons: the standard icons based on Material Icons
• system-icons: a small subset of icons, that are internally used by the Synergy components

The source of the assets can be found at Figma

Installation

Please make sure to install the assets package as a dependency:

npm install --save @synergy-design-system/assets

Usage

All assets are provided as svg's.

The recommended way of using the icons is using the Synergy component. Here you will also get more information about how setting up the assets package on bundlers like vite.

<syn-icon name="warning"></syn-icon>

But the assets could also be used like following:

<img src="assets/icons/warning.svg" />

Development

This package is taking care about getting assets (like logos, system icons and default icons) from Figma. The folder structure of the assets corresponds to the structure of the Figma page.

• src/component-thumbnails contains thumbnails from figma components used in Storybook
• src/icons: contains the standard icons based on Material Icons for SICK 2018 brand revision. Use those icons when using Synergy V2
• src/logos: contains the variants of the SICK brand logo
• src/system-icons: contains a small subset of icons, that are internally used by the Synergy components. Default for Synergy V2.
• src/system-icons-sick2025: contains a small subset of icons, that are internally used by the Synergy components. Used from Synergy V3 onward.

Note: All assets from figma, which should not appear in this package (e.g. documentation), will start with an underscore (e.g. _my-doc-for-an-asset). This assets are getting filtered and ignored by this package.

Setup

To update the assets from Figma, first of all a personal access token in Figma needs to be created. The documentation how this can be achieved can be found here. The only needed scope is "File content" set to readonly.

After the creation of the personal access token, it needs to be saved in a .env file with the variable "FIGMA_TOKEN". It should look like following:

FIGMA_TOKEN = "my-personal-access-token"

Update assets from Figma

If something in the Figma assets got changed, the assets of this package also needs to be updated. To update the assets run following in the terminal of the assets package folder:

pnpm build:all

This will:

• Clean up the src directory
• download all icons from figma
• download all thumbnails for docs
• Recreate all default icons
• Create the migration iconsets for Synergy 2018 to 2025 via pnpm create-migration-iconset
• Recreate the license files in the different folders
• Create code connect files for all icons. Please be aware you have to call pnpm figma-export:icons in the components package to publish the icons!