| title | description |
|---|---|
Icônes |
Apprenez à afficher des icônes avec Starlight. |
import { Icon } from '@astrojs/starlight/components';
Pour afficher des icônes depuis un ensemble d'icônes disponibles avec Starlight, utilisez le composant <Icon>.
import Preview from '~/components/component-preview.astro';
import { Icon } from '@astrojs/starlight/components';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" />{% icon name="star" /%}
{% icon name="starlight" label="Le logo Starlight" /%}
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)" />{% icon name="star" color="goldenrod" size="2rem" /%}
{% icon name="rocket" color="var(--sl-color-text-accent)" /%}
Implémentation : Icon.astro
Le composant <Icon> accepte les props suivants :
Obligatoire
Type : string
Le nom de l'icône à afficher correspondant à une des icônes disponibles avec Starlight.
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.
Type : string
La taille de l'icône utilisant des unités CSS.
Type : string
La couleur de l'icône utilisant une valeur de couleur CSS.
Type : string
Classes CSS personnalisées à ajouter à l'icône.