Ikon (Icon)

<adb-icon> rendrer ikoner som inline SVG. Ikoner arver tekstfarge via currentColor, og dekorative ikoner skjules automatisk for skjermlesere.

Eksempler

<!-- Dekorativt (aria-hidden="true" settes automatisk) -->
<adb-icon name="search"></adb-icon>

<!-- Meningsbærende (role="img" + aria-label settes automatisk) -->
<adb-icon name="search" label="Søk"></adb-icon>

Størrelser

<adb-icon name="search" size="sm"></adb-icon>  <!-- 12px -->
<adb-icon name="search" size="md"></adb-icon>  <!-- 24px (standard) -->
<adb-icon name="search" size="lg"></adb-icon>  <!-- 32px -->

sm

md

lg

Farger

Ikoner arver color fra omgivelsene. Sett CSS color-egenskapen på <adb-icon> eller en overordnet element:

<adb-icon name="close" style="color: var(--adb-color-danger)"></adb-icon>

Bruk i knapper

Kombiner med <adb-button> via slots:

<adb-button variant="primary" color="accent">
  <adb-icon slot="icon-start" name="search"></adb-icon>
  Søk
</adb-button>

Eller med <adb-icon-button> for et rent ikonknapp:

<adb-icon-button aria-label="Søk">
  <adb-icon name="search"></adb-icon>
</adb-icon-button>

Legge til ikoner

1. Eksporter fra Figma som SVG (24×24 px artboard)
2. Navngi filen i lowercase-kebab-case — f.eks. my-icon.svg
3. Legg den i packages/icons/src/svg/
4. Kjør npm run build:icons -w @artsdatabanken/icons
5. Commit både SVG-filen og den oppdaterte src/generated/icons.ts

API

Attributter

Attributt	Type	Standard	Beskrivelse
name	string	—	Ikonnavn — samsvarer med filnavn i src/svg/ uten .svg
size	'sm' | 'md' | 'lg'	'md'	Størrelse: 12 / 24 / 32 px
label	string	—	Aria-label. Sett for meningsbærende ikoner; utelat for dekorative.

CSS Custom Properties

Egenskap	Standard	Beskrivelse
--adb-icon-size	avhenger av size	Overstyr størrelse direkte

Universell utforming (WCAG 2.1 AA)

Scenario	Anbefalt bruk
Ikon med synlig tekst ved siden av	Utelat label — ikonet er dekorativt
Frittstående ikon uten tekst	Sett label med en beskrivende tekst, f.eks. label="Lukk dialog"
Ikon i <adb-icon-button>	Sett aria-label på knappen — utelat label på ikonet

Tommelfingerregel: Tekst er primær, ikon er dekorativt med mindre ikonet er den eneste affordansen.