No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

The component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them:

  1. Missing Context/Providers: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the Decorators documentation.
  2. Misconfigured Webpack or Vite: Verify that Storybook picks up all necessary settings for loaders, plugins, and other relevant parameters. You can find step-by-step guides for configuring Webpack or Vite with Storybook.
  3. Missing Environment Variables: Your Storybook may require specific environment variables to function as intended. You can set up custom environment variables as outlined in the Environment Variables documentation.

@swisspost/design-system-icons

npm version

The comprehensive collection of Swiss Post icons.

npm install @swisspost/design-system-icons

To render an icon with a component, you need to install the Components package as well.

First you need to make the icons available in your web application. This basically means that you need to copy & paste them manually or automatically from the node_modules folder to a served folder in your project. The way to do this strongly depends on your project setup. Read on to find out what the possible solutions look like...

See Getting started with Angular

Copy & paste the icons with a postinstall script

Add a postinstall script to your package.json, to copy & paste the icons to a public folder within your web project.
If you want to know more about pre & post scripts and how they are handled, please read the npm documentation.

NodeJS version 16.7.0 or newer
// package.json
{
  "scripts": {
    "postinstall": "node -e \"const fs = require('fs'); fs.cpSync('node_modules/@swisspost/design-system-icons/public/post-icons', 'assets/post-icons', { recursive: true }, (err) => { if (err) throw err; });\""
  }
}
Older NodeJS versions
// package.json
{
  "scripts": {
    "postinstall": "node postinstall-icons.js"
  }
}
// postinstall-icons.js
const fse = require('fs-extra');

const srcDir = 'node_modules/@swisspost/design-system-icons/public/post-icons';
const destDir = 'assets/post-icons';

// To copy a folder or file, select overwrite accordingly
try {
  fse.copySync(srcDir, destDir, { overwrite: true });
  console.log('Icons successfully copied!');
} catch (err) {
  console.error(err);
}

Now that you have the icons available in your project, you need to tell the icon component where to find them.
You can do this with two different solutions:

  1. Use the meta-tag solution to configure the base-path globally for all icons on the page.
  2. Use the base-attribute solution, to configure the base-path on every icon component. This can also be used to overwrite the global base-path for a single icon.
Meta-tag solution (recommended)
<html>
  <head>
    <meta name="design-system-settings" data-post-icon-base="/assets/post-icons" />
  </head>
</html>
Base-attribute solution
<post-icon name="1000" base="/base-path/to/your/own/icon-folder"></post-icon>

There is one last thing we want to tell you about.

All icons are also available from a CDN, which is the default if you don't configure a base path for your icons and don't serve them locally. When using the CDN, please note that you need to configure your CORS policy to enable resource loading from unpkg.com.

Using the CDN is not recommended for production because of higher latency when loading from the CDN, use it for quickly testing something or for prototyping.

Check the Content Security Policy

If your project includes the Content-Security-Policy response header (usually in index.html), make sure that default-src is set to 'self'. In case you are using the <post-icon> component you need to add https://unpkg.com/ to the connect-src in index.html. This is becasue the icons are retrived from there.