Ikonbibliotek for Utdanningsdirektoratet

Dette biblioteket inneholder ikoner som React-komponenter for Utdanningsdirektoratets designsystem.

Udirs ikonbibliotek er basert på @navikt/aksel-icons.

For å ta i bruk biblioteket må du først installere det.

Installere biblioteket

npm add @udir-design/icons@beta

Ta i bruk med React

Nå kan du importere og bruke ikoner, for eksempel slik:

import { ChevronDownIcon, TrashIcon } from '@udir-design/icons';

function MyComponent() {
  return (
    <div>
      <TrashIcon aria-hidden />
      <ChevronDownIcon aria-label="Åpne panel" />
    </div>
  );
}

Ta i bruk uten React

Ikonene er mulig å importere og bruke i vanlig HTML og CSS, så lenge du bruker en bundler som f.eks. Vite.

Bruk i HTML

Du kan bruke ikonene fra HTML ved å referere de inn gjennom <svg><use href="<sti-til-svg>#icon" /></svg>. For å få riktig dimensjoner må du også importere litt CSS fra biblioteket.

Nøyaktige import-stier vil avhenge av oppsettet ditt. Vi har med eksempler for Vite.

Nødvendig CSS

Du trenger litt CSS for å få riktig dimensjoner på ikonene

/* css */

/* Nødvendig for riktig dimensjoner på ikon. */
@import '@udir-design/icons/style.css';

// med Vite som bundler

/* Valgfritt: styr ikonets størrelse. Default er height: 1em; width: auto; */
.my-icon {
  height: 2rem;
}

HTML

Dersom HTML-en blir generert dynamisk, kan du f.eks. gjøre slik:

/* JavaScript */

// Med Vite som bundler
import ArrowRight from '@udir-design/icons/svg/ArrowRight.svg?no-inline';

document.body.innerHTML += `
<a class="ds-link" href="#">
  <svg aria-hidden class="my-icon">
    <use href="${ArrowRight}#icon" />
  </svg>
  <span>Lenke lagt til dynamisk med JavaScript</span>
</a>`;

Bruk i CSS

Alle ikoner er tilgjengeliggjort som CSS-variabler.

For å ta i bruk ikoner på denne måten må du først importere CSS-filen for hvert ikon du skal bruke. De kan importeres fra JavaScript / TypeScript eller fra CSS.

Merk: dersom du bruker @udir-design/css er noen ikoner allerede tilgjengelig. Det er lurt å ikke importere disse på nytt. Se hvilke ikoner som kommer inkludert i @udir-design/css.

Variablene har navnekonvensjonen --uds-icon-<ikonnavn>, og css-filene ligger i @udir-design/icons/css/<ikonnavn>.css, der <ikonnavn> er navnet på ikonet slik det står i ikonoversikten men med liten forbokstav.

Nøyaktige import-stier vil avhenge av oppsettet ditt. Vi har med eksempler for Vite.

/* Med Vite som bundler  */
@import '@udir-design/icons/css/circleFill.css';

Ved bruk direkte i CSS må du ta ansvar for en del styling selv, men du kan for eksempel automatisk legge til ikon på et element med en viss klasse.

.myClass::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background: currentColor;
  mask: center / 100% no-repeat var(--uds-icon-circleFill);
  vertical-align: middle;
}

Dokumentasjon

Oversikt over hvilke ikoner som finnes, og bruksdokumentasjon for disse, finner du i vår Storybook.