Icônes
Pour afficher des icônes depuis un ensemble d’icônes disponibles avec Starlight, utilisez le composant <Icon>
.
import { Icon } from '@astrojs/starlight/components';
Utilisation
Section intitulée « 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" />
{% icon name="star" /%}{% icon name="starlight" label="Le logo Starlight" /%}
Personnaliser les icônes
Section intitulée « 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)" />
{% icon name="star" color="goldenrod" size="2rem" /%}{% icon name="rocket" color="var(--sl-color-text-accent)" /%}
Props de <Icon>
Section intitulée « Props de <Icon> »Implémentation : Icon.astro
Le composant <Icon>
accepte les props suivants :
Obligatoire
Type : StarlightIcon
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.