Zum Inhalt springen

Symbole

Um Symbole aus Starlights eingebautem Symbol-Set anzuzeigen, verwende die <Icon> Komponente.

Vorschau
import { Icon } from '@astrojs/starlight/components';

Zeigt ein Symbol mit der Komponente <Icon> an. Ein Symbole benötigt einen name, der auf eines der in Starlight eingebauten Symbolen gesetzt ist, und kann optional ein label enthalten, um Kontext für Screenreader zu liefern.

import { Icon } from '@astrojs/starlight/components';
<Icon name="star" />
<Icon name="starlight" label="Das Starlight-Logo" />
Vorschau

Die Attribute size und color können verwendet werden, um das Aussehen des Symbols mit CSS-Einheiten und Farbwerten anzupassen. Das Attribut class kann verwendet werden, um dem Symbol eigene CSS-Klassen hinzuzufügen.

import { Icon } from '@astrojs/starlight/components';
<Icon name="star" color="goldenrod" size="2rem" />
<Icon name="rocket" color="var(--sl-color-text-accent)" />
Vorschau

Implementation: Icon.astro

Die Komponente <Icon> akzeptiert die folgenden Eigenschaften:

Erforderlich
Typ: StarlightIcon

Der Name des anzuzeigenden Symbols wird auf eines der in Starlight integrierten Symbole gesetzt.

Typ: string

Eine optionale Beschriftung, die den Kontext für unterstützende Technologien wie Bildschirm­lesegeräte liefert.

Wenn label nicht gesetzt ist, wird das Symbol von assistiven Technologien vollständig ausgeblendet. In diesem Fall ist darauf zu achten, dass der Kontext auch ohne das Symbol verständlich ist. Ein Link, der nur das Symbol enthält, muss das Attribut label enthalten, um zugänglich zu sein, aber wenn ein Link Text enthält und das Symbol rein dekorativ ist, kann es sinnvoll sein, das label wegzulassen.

Typ: string

Die Größe des Symbols in CSS-Einheiten.

Typ: string

Die Farbe des Symbols unter Verwendung eines CSS-Farbwerts.

Typ: string

Benutzerdefinierte CSS-Klassen, die dem Symbol hinzugefügt werden können.