Sådan bruger du Design System Icons
Via CSS
Først skal du have installeret @dataforsyningen/icons med NPM:
npm i --save @dataforsyningen/icons
Hvis du bare vil have alle ikonerne tilgængelige via CSS, kan du importere dem ind i dit projekt med @import i din CSS-fil:
@import "@dataforsyningen/icons";
Du kan dog nøjes med kun at importere de ikoner, du skal bruge, ved at sætte en @import linie i din CSS-fil for hvert ikon.
Du kan se for hvert enkelt ikon, hvad de hedder, når de skal importeres. F.eks.:
@import "@dataforsyningen/icons/css/icon_calendar.css";
@import "@dataforsyningen/icons/css/icon_print.css";
@import "@dataforsyningen/icons/css/hentdata_icon_download.css";
Når du har importeret CSS, kan du bruge ikoner i HTML ved at sætte en class="ds-icon-..." på et element. F.eks.:
<span class="ds-hentdata_icon_download"></span>
Der findes CSS custom properties (CSS variable) for hvert ikons billede-URL. Det giver nogle flere muligheder, hvis du f.eks. vil anvende ikonet som baggrundsbillede.
F.eks.:
.my-custom-style {
background-image: var(--ds-icon_print);
}
Du kan se under det enkelte ikon, hvilken class eller custom property det hører til.
Via SVG
Alternativt kan du også indsætte ikoner direkte som SVG-kode.
Under hvert ikon kan du se SVG-koden, som du blot kan kopiere ind i din HTML.