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 icons distributed as individual files, sprites, and JSX + TSX.

The disitributed package (npm package) includes the following:

• Individual svg icons {icon-name}[-mc]-{size}.svg
  • Set sizes (24, 32, 40, 48, 64, 72, 96) in multi color (mc) and monochrome.
  • Misc "special" icons (e.g. arrows, logotypes, etc.) of varying sizes
• Sprites compiled per size sprite[-mc]-{size}.svg
  • Set sizes (24, 32, 40, 48, 64, 72, 96) and "special" sizes in multi color (mc) and monochrome.
• Individual JSX components
• Individual TSX components
• Manifest files for each format manifest.{format}.json

The build script can be integrated into your build chain as a CLI command or as Node.js module.

CLI

Usage
  $ lf-icons [options]

Options
  --out, -o     Output directory [dist]
  --format, f   Output format (svg,sprite,jsx,tsx) [svg]
  --grep, -g    Filter icons by name
  --size, -s    Size(s) to export, comma separated [all]
  --color, -c   Include multicolor variants (disable: --no-color) [true]
  --mono, -m    Include monochrome variants (disable: --no-mono) [true]
  --help        Display this message

Example
  $ lf-icons -o dist/icons -f jsx -g bankid

Node.js

import { build } from "@lansforsakringar/icons";

// Build JSX components for all sizes and colors of icons matching "bankid"
await build({
  out: "dist/icons",
  format: "jsx",
  grep: "bankid",
});

Options

• out Output directory, default: dist
• format Output format (svg,sprite,jsx,tsx), default: svg
• grep Filter icons by name
• size Size(s) to export, list of numbers or "all", default: [all]
• color Include multicolor variants, default: true
• mono Include monochrome variants, default: true

SVG usage

The standalone SVG files can be referenced either as inline img tag or (depending on your frontend tool chain) as an embedded resource.

As inline img

Path should reflect where you store and host the built icons.

<img src="/icons/wallet-24.svg" class="icon" alt="Wallet" />

As a JavaScript module

This method requires that your tool chain supports importing SVG files as modules.

import wallet24 from "@lansforsakringar/icons/wallet-24.svg";

const img = document.createElement("img");
img.src = wallet24;
img.classList.add("icon");
document.body.appendChild(img);

As CSS background

Perferrably use CSS post-processing tools to inline the SVG as a data URI.

.wallet {
  width: 24px;
  height: 24px;
  background-image: url("./icons/wallet-24.svg");
  background-repeat: no-repeat;
  background-size: 100%;
}

Sprite usage

Sprites can either be embedded in the markup or referenced as an external resource.

Referenced as external resource

Note that the href path should to point to where you host the sprite.

<svg class="icon" width="24" height="24">
  <use xlink:href="/icons/sprite-24.svg#wallet-24"></use>
</svg>

Referenced as embedded resource

When embedded, they are to be included in the document once and then referenced with the SVG use tag.

<svg class="icon" width="24" height="24">
  <use xlink:href="#wallet-24"></use>
</svg>

<!-- Embed the sprite somewhere in the document, preferably last -->
<svg width="0" height="0" style="position:absolute"><symbol>…</symbol></svg>

JSX/TSX usage

If you have special requirements for the output component format, e.g. JSX runtime, you can use the CLI or Node.js API to generate icons and override the default settings with a SVGR configuration file.

import Wallet24 from "@lansforsakringar/icons/Wallet24.jsx";

export default function MyComponent() {
  return (
    <div>
      <Wallet24 class="icon" />
    </div>
  );
}

Manifest

A build manifest is generated for each format (manifest.{format}.json). The manifest includes a mapping of icon id to the absolute file path on disk.

{
  "wallet-24": "/dist/icons/wallet-24.svg"
}

The sprite manifest includes not only the generated sprite file, but also mapping for each icon in the sprite for use as a xlink:href.

{
  "sprite-24": "/dist/icons/sprite-24.svg",
  "wallet-24": "/dist/icons/sprite-24.svg#wallet-24"
}

CSS

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 #005AA0. The build script will replace that exact HEX with currentcolor.

Place the new icon in src/svg/{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.