Aller au contenu
Starlight

Icônes

Pour afficher des icônes depuis un ensemble d’icônes disponibles avec Starlight, utilisez le composant <Icon>.

Aperçu

Import

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

Utilisation

Affichez une icône en utilisant le composant <Icon>. Une icône requiert un attribut name défini avec une des icônes disponibles avec Starlight et peut éventuellement inclure un label pour fournir un contexte aux lecteurs d’écran.

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


<Icon name="star" />
<Icon name="starlight" label="Le logo Starlight" />
Aperçu

Personnaliser les icônes

Les attributs size et color peuvent être utilisés pour ajuster l’apparence de l’icône en utilisant des unités et valeurs de couleur CSS. L’attribut class peut être utilisé pour ajouter des classes CSS personnalisées à l’icône.

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


<Icon name="star" color="goldenrod" size="2rem" />
<Icon name="rocket" color="var(--sl-color-text-accent)" />
Aperçu

Props de <Icon>

Implémentation : Icon.astro

Le composant <Icon> accepte les props suivants :

name

Obligatoire
Type : string

Le nom de l’icône à afficher correspondant à une des icônes disponibles avec Starlight.

label

Type : string

Un label optionnel pour fournir un contexte aux technologies d’assistance, comme les lecteurs d’écran.

Quand l’attribut label n’est pas défini, l’icône sera complètement masquée des technologies d’assistance. Dans ce cas, assurez-vous que le contexte reste compréhensible sans l’icône. Par exemple, un lien contenant uniquement l’icône doit inclure l’attribut label pour être accessible, mais si un lien contient du texte et que l’icône est purement décorative, omettre l’attribut label peut avoir du sens.

size

Type : string

La taille de l’icône utilisant des unités CSS.

color

Type : string

La couleur de l’icône utilisant une valeur de couleur CSS.

class

Type : string

Classes CSS personnalisées à ajouter à l’icône.