| title | description |
|---|---|
Symbole |
Erfahre, wie du Symbole in Starlight anzeigen kannst. |
import { Icon } from '@astrojs/starlight/components';
Um Symbole aus Starlights eingebautem Symbol-Set anzuzeigen, verwende die <Icon> Komponente.
import Preview from '~/components/component-preview.astro';
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 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" />{% icon name="star" /%}
{% icon name="starlight" label="Das Starlight-Logo" /%}
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 { Card } from '@astrojs/starlight/components';
<Icon name="star" color="goldenrod" size="2rem" />
<Icon name="rocket" color="var(--sl-color-text-accent)" />{% icon name="star" color="goldenrod" size="2rem" /%}
{% icon name="rocket" color="var(--sl-color-text-accent)" /%}
Implementation: Icon.astro
Die Komponente <Icon> akzeptiert die folgenden Eigenschaften:
Erforderlich
Typ: string
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 Bildschirmlesegerä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.