@artsdatabanken/icons

Artsdatabanken ikonbibliotek — optimiserte SVG-ikoner og en Lit web component (<adb-icon>).

Installasjon

npm install @artsdatabanken/icons

Bruk

Web component (<adb-icon>)

import '@artsdatabanken/icons/icon';

<!-- Dekorativt ikon (skjult for skjermlesere) -->
<adb-icon name="search"></adb-icon>

<!-- Meningsbærende ikon (aria-label settes automatisk) -->
<adb-icon name="search" label="Søk" size="lg"></adb-icon>

Størrelser

| size | Størrelse | |--------|-----------| | sm | 12 px | | md | 24 px (standard) | | lg | 32 px |

Ikoner arver color fra omgivelsene via currentColor:

<adb-icon name="close" style="color: red"></adb-icon>

Barrel-import (alle ikoner + typer)

import { icons, type IconName } from '@artsdatabanken/icons';

Råe SVG-filer (Drupal, Twig, etc.)

{{ source('@artsdatabanken/icons/svg/search.svg') }}

Eller med CDN:

<img src="https://cdn.example.com/@artsdatabanken/[email protected]/svg/search.svg" alt="Søk" />

<adb-icon> API

| Attributt | Type | Standard | Beskrivelse | |---|---|---|---| | name | string | — | Ikonnavn (filnavn uten .svg) | | size | 'sm' \| 'md' \| 'lg' | 'md' | Størrelse | | label | string | — | Aria-label — sett for meningsbærende ikoner |

Legg til egne ikoner

1. Eksporter SVG-filen fra Figma (24×24 px, SVG-format)
2. Gi filen et navn i lowercase-kebab-case, f.eks. my-icon.svg
3. Legg den i src/svg/ (egendefinerte ikoner kan legges i src/svg/custom/)
4. Kjør bygget:

npm run build:icons -w @artsdatabanken/icons

Dette genererer src/generated/icons.ts og optimiserte SVG-filer i dist/svg/. Commit begge deler.

Navnekonvensjon

Filnavn i src/svg/ brukes direkte som ikonnavnet i <adb-icon name="...">:

| Fil | name | |---|---| | src/svg/search.svg | search | | src/svg/arrow-back.svg | arrow-back | | src/svg/custom/logo.svg | custom/logo |

CDN

<script type="module" src="https://cdn.example.com/@artsdatabanken/[email protected]/cdn/adb-icons.js"></script>

Lisens

Apache 2.0