Icons

Icons werden verwendet, um Aktionen, Informationen oder Zustände visuell darzustellen.
DK97 UI verwendet SVG-Sprites, um Icons effizient und wiederverwendbar bereitzustellen.

Beispiele

Basic

Ein Icon wird über die Klasse .a-icon und ein SVG-Sprite eingebunden.


<span class="a-icon">
    <svg aria-hidden="true">
        <use href="/assets/icons/sprite.svg#search"></use>
    </svg>
</span>

Sizes

Icons können über Modifier in verschiedenen Größen dargestellt werden.


<span class="a-icon -sm">
    <svg aria-hidden="true">
        <use href="/assets/icons/sprite.svg#search"></use>
    </svg>
</span>

<span class="a-icon">
    <svg aria-hidden="true">
        <use href="/assets/icons/sprite.svg#search"></use>
    </svg>
</span>

<span class="a-icon -lg">
    <svg aria-hidden="true">
        <use href="/assets/icons/sprite.svg#search"></use>
    </svg>
</span>

In Buttons

In Buttons wird das Icon zusätzlich mit .a-button__icon ausgezeichnet.


<button class="a-button -primary -blue">
    <span class="a-button__icon a-icon">
        <svg aria-hidden="true">
            <use href="/assets/icons/sprite.svg#search"></use>
        </svg>
    </span>

    <span class="a-button__label">
        Suchen
    </span>
</button>

In Callouts

In Callouts wird das Icon zusätzlich mit .m-callout__icon ausgezeichnet.

Dies ist ein Callout mit Icon.


<div class="m-callout -info">
    <div class="m-callout__header">
        <span class="m-callout__icon a-icon">
            <svg aria-hidden="true">
                <use href="/assets/icons/sprite.svg#info"></use>
            </svg>
        </span>

        <span class="m-callout__title">
            Information
        </span>
    </div>

    <div class="m-callout__content">
        Dies ist ein Callout mit Icon.
    </div>
</div>

Verfügbare Icons

Die folgenden Icons werden automatisch aus dem Icon-Verzeichnis geladen.

activity

arrow-left

arrow-right

battery

check

chevron-down

chevron-up

circle-check

circle-x

clock-3

close

cloud-rain

compass

copy

droplets

edit

gauge

info

lightbulb

menu

plus

search

settings

sun

sun-medium

thermometer

thermometer-snowflake

thermometer-sun

tornado

trash

trash-2

triangle-alert

wifi

wind

zap

Klassen

Klasse	Beschreibung
`.a-icon`	Basis-Klasse für Icons.
`.a-icon.-sm`	Kleine Icon-Größe.
`.a-icon.-lg`	Große Icon-Größe.

Hinweise

Icons werden über ein SVG-Sprite eingebunden. Die Datei sprite.svg wird automatisch aus den einzelnen SVG-Dateien im Icon-Verzeichnis erzeugt.

Best Practices

Verwende Icons, um Text visuell zu unterstützen. Icons sollten bekannte Bedeutungen haben und nicht unnötig komplex sein.

Verwende Icons nicht als alleinige Informationsträger, wenn die Bedeutung nicht eindeutig ist. Texte oder aria-label sollten die Bedeutung ergänzen.

Accessibility

Dekorative Icons sollten mit aria-hidden="true" ausgezeichnet werden, damit Screenreader sie ignorieren.

Wenn ein Button nur ein Icon enthält, muss der Button ein aussagekräftiges aria-label erhalten.