@lansforsakringar/icons

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 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 and monochrome.
• Individual JSX components
• Individual TSX components
• Manifest files for each format manifest.{format}.json
  • The manifest holds mapping of icon name to file path, e.g. "wallet-24" -> "/some/dir/dist/wallet-24.svg"

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.

.icon {
  background-image: url("./icons/wallet-24.svg");
  background-repeat: no-repeat;
  background-size: 20px;
}

Sprite usage

Sprites are to be included in the document once and then referenced with the SVG use tag. Note that the href path should to point to where you host the icons.

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

JSX/TSX usage

If you have special requirements for the output component format, e.g. JSX runtime, you can override the default settings with a SVGR configureation file.

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

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

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/{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.