Ikoner

Oppdatert 25. mai 2022

Bruk

Npm-pakken @navikt/ds-icons tilbyr alle NAVs ikoner som React-komponenter og SVG.

Import

// React
import { System } from "@navikt/ds-icons";

// SVG
import System from "@navikt/ds-icons/svg/System.svg";

Pakken er Tree-shakable og hvert ikon er ca 1KB slik at bundle-size holdes liten. Men siden hele pakken er totalt over 5MB fraråder vi å laste inn ikonene via CDN i <script> fra eks unpkg eller jsdelivery.

Når det kommer til ESM/CJS støtte så prøver pakken å fikse dette selv. Det betyr i praksis at oppsettet ditt bruker den versjonen av ikonet som den støtter. Hvis dette ikke er tilfellet for din løsning så ønsker vi gjerne å høre om dette slik at vi kan forbedre løsningen!

Bruk med React

<System title="Åpne system dropdown"/>

Størrelser

Vi har valgt å sette både height/width="1em" på ikonene, som gjør det lett å bruke dem inline i tekst. Hvis du tar i bruk ikonene uten tekst anbefaler vi å sette width/height til 24px. Dette kan du lett gjøre ved å sette font-size="1.5rem" på selve ikonet eller wrapperen rundt.

Props

Hvis du selv setter en title fikses id-kobling i selve komponenten. Ønsker du selv å sette en egen id, kan du det med titleId-prop.