Style-reference for Style-Library 2.0

Here we will give a short overview of all the new features of the style libary

Icons

Below we provide an overview of the available icons in our style library, usable via two methods. We recommend using the web component method for best practices

Web Component Method

Using web components allows for modularity, including only the icons you need. Import icons individually using camelCase for icon names, followed by "Component." For example, to use the "arrow-down" icon, import it as follows:

import { arrowDownComponent } from 'style-library'

SVG Sprite Method

If module imports aren't feasible, such as in older projects, you can use the SVG sprite. Note that this method loads the entire icon set.

include the svg sprite from the library or download it here and replace the path in the svg code snippet.

Selecting Icon Type

Use the radio buttons below to choose your desired icon type. The code snippets will update accordingly and can be copied directly into your project. Use the top snippet for the Web Component approach, the bottom for the SVG sprites