Icon
Synonyme: Grafik, Symbol, Piktogramm
Beschreibung: Die Icon-Komponente stellt Icons aus verschiedenen Icon-Font-Bibliotheken dar. Sie ermöglicht es, Symbole an beliebigen Positionen einzubinden und dabei den Anforderungen der Barrierefreiheit zu entsprechen, indem Icons durch beschreibende Labels versehen werden.
Beispiel
Darstellung eines Icons mit beschreibendem Label:
<KolIcon _icons="kolicon-house" _label="Haus" />Barrierefreiheit
Icons erfordern eine barrierefreie Beschreibung für Nutzer:innen mit Seheinschränkungen und assistiven Technologien:
- Label erforderlich: Jedes Icon muss über das Attribut
_labeleine aussagekräftige, kontextbezogene Beschreibung erhalten. Das Label wird von Screenreadern vorgelesen. - Vermeidung von reinen Bildbeschreibungen: Das Label sollte die Funktion oder Bedeutung des Icons beschreiben, nicht die grafische Darstellung (z. B. „Startseite" statt „Haus-Symbol").
- Sprechende Beschreibungen: Nutzen Sie prägnante Texte, die den Nutzungskontext vermitteln.
- Icon-Fonts in HTML laden: Die verwendeten Icon-Font-CSS-Dateien müssen in der
index.htmleingebunden sein, damit die Icons korrekt dargestellt werden.
Links und Referenzen
Best Practices / Empfehlungen
- Icons dekoverativ zurück zu Labels: Icons funktionieren am besten, wenn sie neben Text stehen oder ein aussagekräftiges Label haben.
- Sinnvolle Icon-Wahl: Nutzen Sie Icons, deren Bedeutung intuitiv verständlich ist oder die eine etablierte Konvention folgen (z. B. Lupe für Suche).
- Kontextbetrachtung: Stellen Sie sicher, dass das Icon auch für Nutzer:innen ohne weitere Kontextinformationen verständlich ist.
- Icon-Fonts sichern: Nutzen Sie nur ausgetestete Icon-Font-Bibliotheken wie Kolicons oder Font Awesome.
- Konsistente Styling: Verwenden Sie für themenübergreifend dieselben Icon-Fonts und Größen, um ein konsistentes Bild zu wahren.
- Fallbacks vorsehen: Sollte ein Icon nicht laden, sollte das Label aussagekräftig genug sein, um die Funktion zu vermitteln.
Anwendungsfälle
- Navigation und Menüs (z. B. Häuser-Icon für „Startseite")
- Status- und Zustandsanzeigen (z. B. Häkchen für Erfolg)
- Schaltflächen mit Symbolen (z. B. Lupe für Suche, Zahnrad für Einstellungen)
- Visuelle Hervorhebungen in Listen und Tabellen
- Inhaltsstrukturierung und Gliederung
- Interaktive Elemente wie Favoriten-Stern oder Benachrichtigungsglocke
Konstruktion / Technik
Playground
Testen Sie die verschiedenen Icon-Eigenschaften:
<KolIcon _icons="kolicon-house" _label="Zu Hause" />Funktionalitäten (mit Code)
Icon und Label
Das Icon wird über die Property _icons mit Klassenamen definiert. Das Label wird über _label gesetzt und ist erforderlich für die Barrierefreiheit.
<KolIcon _icons="kolicon-house" _label="Haus" />Verfügbare Icon-Fonts
Aktuell werden folgende Icon-Font-Systeme unterstützt:
- Kolicons:
- Font Awesome:
- IcoFont:
Beispiele für Icon-Klassennamen:
- Kolicons:
kolicon-house,kolicon-user,kolicon-menu - Font Awesome:
fa-solid fa-user,fa-regular fa-heart,fa-brands fa-github
CSS-Einbindung erforderlich
Wichtig: Die CSS-Dateien der verwendeten Icon-Font-Bibliotheken müssen in der index.html oder einer globalen Stylesheet eingebunden sein. Ohne diese Einbindung werden die Icons nicht angezeigt.
Beispiel für die Einbindung in index.html:
<!-- Kolicons -->
<link rel="stylesheet" href="path/to/kolicons.css" />
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
API
Overview
The Icon component allows icons from included icon fonts to be displayed at any position.
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
_icons (required) | _icons | Defines the icon classnames (e.g. _icons="fa-solid fa-user"). | string | undefined |
_label (required) | _label | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | string | undefined |