Sådan bruger du Design System Icons
Med SVG sprite (anbefalet)
Du kan bruge én fil til alle ikoner, hvor du blot referere til ikonerne.
Download og gem icons.svg et passende sted (PATH).
Herefter kan du blot indsætte SVG-tags og angive en reference til det ønskede ikon med use. F.eks.:
<svg><use href="icons.svg#arrow-right"></svg>
Du kan også bruge icons direkte fra vores eller jsdelivr's CDN:
<img src="https://cdn.dataforsyningen.dk/assets/designsystem/v8/icons/arrow-right.svg" alt="">
<img src="https://cdn.jsdelivr.net/npm/@dataforsyningen/designsystem/assets/icons/arrow-right.svg" alt="">
Med embedded SVG
Du kan indsætte ikoner direkte som SVG-kode. Det er en fordel, hvis du kun skal bruge enkelte ikoner.
Under hvert ikon kan du se SVG-koden, som du blot kan copy/paste ind i din HTML.
Varianter
Du kan ændre størrelse og farver på ikoner med classses og CSS-variabler.
Det gøres ved at placere ikon svg-elementet i en <span></span> og tilføje en class (f.eks. class="big bg-primary").
Du kan finde eksempler og en komplet oversigt over classes her.
