Gå til sidens indhold

Kode

Ikoner

Installation

HTML Struktur

<svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#printer"></use></svg>

Ovenstående kode refererer til en ikonsamling. For at få ikonet vist, skal man derfor huske at implementere ikonsamlingen på hver side.

Implementering af ikonsamlingen

<div class="hide-base-svg">
    <svg xmlns="http://www.w3.org/2000/svg">
        <symbol id="add" viewBox="0 0 24 24">
            <path d="M0 0h24v24H0z" fill="none"></path>
            <path d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"></path>
        </symbol>
        <symbol id="alert-outline" viewBox="0 0 24 24">
            <path fill="currentColor" d="M12 2L1 21h22M12 6l7.53 13H4.47M11 10v4h2v-4m-2 6v2h2v-2"></path>
        </symbol>
        <symbol id="open-in-new" viewBox="0 0 24 24">
            <path d="M14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3m-2 16H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7h-2v7z"></path>
        </symbol>
        <symbol id="success" viewBox="0 0 24 24">
            <path d="M12 2a10 10 0 0 1 10 10 10 10 0 0 1-10 10A10 10 0 0 1 2 12 10 10 0 0 1 12 2m0 2a8 8 0 0 0-8 8 8 8 0 0 0 8 8 8 8 0 0 0 8-8 8 8 0 0 0-8-8m-1 12.5L6.5 12l1.41-1.41L11 13.67l5.59-5.58L18 9.5l-7 7z"></path>
        </symbol>
        <symbol id="warning" viewBox="0 0 24 24">
            <path d="M12 2L1 21h22M12 6l7.53 13H4.47M11 10v4h2v-4m-2 6v2h2v-2"></path>
        </symbol>
        <!-- ... and more -->
    </svg>
</div>

Bemærk, at ovenstående kodeeksempel ikke er den fulde ikonsamling. Hele ikonsamlingen er dog vist, hvis du åbner eksemplet i et nyt vindue.

Ikonsamlingen placeres i toppen af <body> i et område, der er skjult.

Tilgængelighed

Ikoner bør tilføjes en aria-label tekst til elementet, der beskriver ikonet, så skærmlæsere kan læse ikonet op, såfremt ikonet har betydning for forståelsen.

I tilfælde, hvor ikonet ikke skal læses op, tilføj da attributten aria-hidden="true". Denne attribut vil gøre ikonet usynligt for skærmlæsere.

Dekorative ikoner bør undgås, men hvis de bruges, skal de ikke beskrives eller have beskrivende attributter, da de ikke bærer nogen betydning eller er vigtige for brugeren.

Da Internet Explorer sætter fokus på svg elementer bør focusable="false" tilføjes, således at der ikke længeres sættes fokus på ikonet med tab-tasten.

Varianter

Ikoner indsat med klasser

Ikoner der indsættes inline med i-tagget får på den måde samme skriftstørrelse. Følgende kode indsætter et ‘alert’-ikon: <i class="icon icon-alert-outline"></i>

Denne metode har nogle begrænsninger, hvorfor vi anbefaler, at man benytter den anden metode.

Tilpasning af ikonet til teksten

Tilføj klassen inline-svg på ikoner, som skal fremgå i en tekst. Ikonet vil da tilpasse sig linjehøjden. Se eksemplet herunder:

Lorem ipsum dolor sit amet.