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 _label eine 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.html eingebunden 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

Playground

Testen Sie die verschiedenen Icon-Eigenschaften:

<KolIcon _icons="kolicon-house" _label="Zu Hause" />

Funktionalitäten

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

---