LogoIcon

Le fichier est lu à la génération et son contenu posé dans la page. C'est ce qui lui permet de prendre sa couleur de currentColor et d'être dimensionnée comme le texte — impossible par une balise img, qui isole le document.

Une icône

<LogoIcon src="./icons/book.svg" label="Documentation" />

Un chemin relatif part de la page, un chemin absolu du dossier de version. Rien ne peut en sortir : une page ne lit pas le reste de la machine.

Elle suit le texte

Posée dans un texte, l'icône en prend la taille et la couleur.

Tailles

size accepte n'importe quelle longueur CSS.

<LogoIcon src="./icons/shield.svg" size="3rem" style={{ color: '#10b981' }} />

La couleur ne suit que si le fichier s'en remet à currentColor plutôt qu'à une couleur fixe.

Dans une liste

• Aucun script à charger

• Les liens sont relus avant publication

• Une version par branche

En tête d'une carte

Décorative ou porteuse de sens

Sans label, l'icône est traitée comme décorative et masquée aux lecteurs d'écran — ce qui est juste quand un texte voisin dit déjà la même chose. Avec label, elle devient une image décrite.

<LogoIcon src="./icons/star.svg" />
<LogoIcon src="./icons/star.svg" label="Favori" />

Dans la liste ci-dessus, les icônes n'ont pas de label : le texte à côté porte déjà le sens, et l'annoncer deux fois n'apprendrait rien.

Une icône issue d'un jeu

À côté d'un fichier de votre projet, src accepte le nom d'une icône d'une collection, écrit prefix:nom :

<LogoIcon src="simple-icons:github" label="Dépôt" />

Le jeu est un paquet que votre projet installe, et le dessin est posé dans la page à la génération, exactement comme le serait un fichier à vous :

npm install --save-dev @iconify-json/simple-icons

Rien n'est récupéré pendant la lecture de la page — ces collections proposent un service en ligne, qui demanderait une requête par icône et un script pour la faire. Un jeu non installé arrête la génération en nommant le paquet à installer ; un nom que le jeu ne contient pas aussi.

Ce qu'elle refuse

Un fichier manquant, un fichier sans balise svg, une cible qui sort du dossier de version : chacun arrête la génération, en nommant le chemin attendu. Une icône manquante laisserait sinon un carré vide que personne ne remarque.

Les scripts et les gestionnaires d'événements présents dans un fichier sont retirés avant l'intégration. Un composant ne charge aucun JavaScript, et celui-ci ne va pas commencer.

Un type d'admonition prend sa marque par ce même composant — voir Admonition.