@lansforsakringar/icons v3.10.1

Länsförsäkringar Design System Icons

Icon library for Länsförsäkringar web and app development.

Getting started

For web development, install via npm.

npm install @lansforsakringar/icons

Usage

The library provides a set of SVG sprites, each containing a comprehensive list of icons. The sprites act as categories: different icon sizes, mono-color, or multi-color.

Because of CORS, the sprites will need to be self-hosted in your project. After installation, you need to copy the icon sprites to your code base from this package and make sure they are HTTP served.

While the copy part can be done manually, it’s easily done with a small script:

npm install copyfiles --save-dev

Followed by adding a script to your package.json. Replace hosted-assets/icons with something that works with your setup.

"scripts": {
 "copy:icons": "copyfiles -u 4 node_modules/@lansforsakringar/icons/dist/sprite/**/* src/icons"
}

Now, use the icons in your project. Note that the path-to-icons below should be updated.

<svg role="presentation" class="icon" width="20" height="20">
  <use xlink:href="/path-to-icons/sprite/20/icons.svg#icon-wallet-20"></use>
</svg>

The .icon CSS class is part of LFUI Web Legacy and helps with sizing and alignment. Colors are inherited from the text color (applied using the CSS color keyword currentcolor).

Contributing

After cloning the repo, install the dependencies and build our the icon sprites.

npm install
npm run build

To add an icon, export your icon from Figma. Make sure to use only filled outlines and in color #ff0000 (100% red). The build script will replace that exact HEX with currentcolor.

Place the new icon in src/{size} and build, npm run build.

Deploy and release

After adding an icon, run npm version minor. A commit will be created that you should push. Then run npm publish. That's it.