Zum Inhalt springen
Starlight

Symbole

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

Vorschau

Import

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

Verwendung

Zeigt ein Symbol mit der Komponente <Icon> an. Ein Symbole benötigt einen name, der auf eines der in Starlight eingebauten Icons 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

Anpassen von Symbolen

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

<Icon>-Eigenschaften

Implementation: Icon.astro

Die Komponente <Icon> akzeptiert die folgenden Eigenschaften:

name

Erforderlich
Typ: StarlightIcon

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

label

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.

size

Typ: string

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

color

Typ: string

Die Farbe des Symbols unter Verwendung eines CSS-Farbwerts.

class

Typ: string

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