Länsförsäkringar Design System Icons

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

Scope of this README

This README covers the icons package only (packages/icons).

• icon package install and usage
• icon export CLI and Node API
• icon contribution flow

For monorepo-level onboarding, use root README.md.

Install

npm install @lansforsakringar/icons

Package Contents

The published package includes:

• Individual SVG files: {icon-name}[-mc]-{size}.svg
• Sprite files by size: sprite[-mc]-{size}.svg
• JSX icon components
• TSX icon components
• Format manifests: manifest.{format}.json

Standard sizes are available in monochrome and multicolor variants.

CLI

Binary name in this package: lfds-icons-export.

Usage
  $ lfds-icons-export [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:

npx lfds-icons-export -o dist/icons -f jsx -g bankid

Node API

import { build } from '@lansforsakringar/icons'

// Build JSX components for icons matching "bankid"
await build('dist/icons', {
	formats: ['jsx'],
	grep: 'bankid'
})

Usage

SVG file

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

SVG imported as module

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

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

Sprite

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

JSX/TSX component

import Wallet24 from '@lansforsakringar/icons/Wallet24.jsx'

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

Manifest

A manifest is generated per format (manifest.{format}.json) and maps icon IDs to output paths.

Example:

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

For sprites, icon IDs map to xlink:href values:

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

Contributing

npm install
npm run build

To add an icon:

1. Export from Figma using filled outlines in color #005AA0.
2. Place the icon in src/svg/{size}.
3. Run npm run build.

The build pipeline replaces #005AA0 with currentcolor.

Release

After adding icons:

npm version minor
npm publish