Composant · Autres

Icon

Stable

Le design system prescrit un seul jeu d'icônes et l'expose par <Icon>. Les icônes sont adressées par des noms DS (IconName) — jamais par le nom d'un composant de la bibliothèque source — pour que la source visuelle puisse évoluer sans rupture d'API. Les noms sont additifs : le jeu s'étend, un nom existant ne change jamais de sens.

Jeu canonique

Le jeu complet, dans l'ordre de ICON_NAMES. Toute icône du DS s'obtient par name ; aucun SVG manuscrit ni emoji n'est attendu dans un produit.

Les 8 noms gelés

settings

eye

eye-off

layers

target

close

chevron-down

chevron-right

Voir le code (Svelte)

<div style="align-items:center;display:flex;flex-direction:column;gap:0.4rem;min-inline-size:6rem">
  <Icon name="settings" size={24} />
  <code style="font-size:0.75rem">settings</code>
</div>
<div style="align-items:center;display:flex;flex-direction:column;gap:0.4rem;min-inline-size:6rem">
  <Icon name="eye" size={24} />
  <code style="font-size:0.75rem">eye</code>
</div>
<div style="align-items:center;display:flex;flex-direction:column;gap:0.4rem;min-inline-size:6rem">
  <Icon name="eye-off" size={24} />
  <code style="font-size:0.75rem">eye-off</code>
</div>
<div style="align-items:center;display:flex;flex-direction:column;gap:0.4rem;min-inline-size:6rem">
  <Icon name="layers" size={24} />
  <code style="font-size:0.75rem">layers</code>
</div>
<div style="align-items:center;display:flex;flex-direction:column;gap:0.4rem;min-inline-size:6rem">
  <Icon name="target" size={24} />
  <code style="font-size:0.75rem">target</code>
</div>
<div style="align-items:center;display:flex;flex-direction:column;gap:0.4rem;min-inline-size:6rem">
  <Icon name="close" size={24} />
  <code style="font-size:0.75rem">close</code>
</div>
<div style="align-items:center;display:flex;flex-direction:column;gap:0.4rem;min-inline-size:6rem">
  <Icon name="chevron-down" size={24} />
  <code style="font-size:0.75rem">chevron-down</code>
</div>
<div style="align-items:center;display:flex;flex-direction:column;gap:0.4rem;min-inline-size:6rem">
  <Icon name="chevron-right" size={24} />
  <code style="font-size:0.75rem">chevron-right</code>
</div>

Nom	Emploi attendu
`settings`	Réglages, préférences.
`eye`	Afficher, rendre visible.
`eye-off`	Masquer, rendre invisible.
`layers`	Couches, superposition.
`target`	Cible, recentrage, focus.
`close`	Fermer, retirer.
`chevron-down`	Déplier vers le bas.
`chevron-right`	Déplier / naviguer vers la droite.

Taille et graisse

size vaut 18 px par défaut, la taille de glyphe en ligne standard du DS. L'épaisseur du trait et la couleur viennent des tokens du thème : --st-component-icon-strokeWidth (2.25 par défaut) et --st-component-icon-color (currentColor par défaut, l'icône suit la couleur du texte). Une prop strokeWidth l'emporte sur le token d'épaisseur, une couleur explicite sur le token de couleur.

Pour une couleur explicite, passez la prop color (Svelte, React, Vue). En Svelte et en Vue, un attribut stroke passé à l'icône est écrasé par la bibliothèque de glyphes : il n'a aucun effet, seule color fonctionne. En React, color et stroke fonctionnent tous deux. En Angular, l'icône n'a pas d'API de couleur : elle suit la couleur du texte de son conteneur, ou le token.

Les deux règles qui lisent ces tokens vivent dans la couche CSS st-icon. Toute règle de votre application hors couche l'emporte sur elles, quelle que soit sa spécificité. Une règle placée dans une couche (les utilitaires Tailwind v4, toute CSS en @layer) ne l'emporte que si st-icon est déclarée avant cette couche : l'ordre des couches suit leur première apparition. Déclarez-la en tête de votre feuille, avant Tailwind, ou chargez la CSS du DS avant toute CSS en couches. Sans cela, par exemple quand la CSS du DS arrive après Tailwind (cas usuel des styles de composants Svelte), les tokens l'emportent sur vos utilitaires sur l'icône.

/* app.css */
@layer st-icon;
@import "tailwindcss";

Tailles

size=16

size=18

size=24

size=32

Voir le code (Svelte)

<div style="align-items:center;display:flex;flex-direction:column;gap:0.4rem;min-inline-size:5rem">
  <Icon name="layers" size={16} />
  <code style="font-size:0.75rem">size=16</code>
</div>
<div style="align-items:center;display:flex;flex-direction:column;gap:0.4rem;min-inline-size:5rem">
  <Icon name="layers" size={18} />
  <code style="font-size:0.75rem">size=18</code>
</div>
<div style="align-items:center;display:flex;flex-direction:column;gap:0.4rem;min-inline-size:5rem">
  <Icon name="layers" size={24} />
  <code style="font-size:0.75rem">size=24</code>
</div>
<div style="align-items:center;display:flex;flex-direction:column;gap:0.4rem;min-inline-size:5rem">
  <Icon name="layers" size={32} />
  <code style="font-size:0.75rem">size=32</code>
</div>

Graisses

strokeWidth=1.5

strokeWidth=2.25

strokeWidth=3

Voir le code (Svelte)

<div style="align-items:center;display:flex;flex-direction:column;gap:0.4rem;min-inline-size:6rem">
  <Icon name="target" size={28} strokeWidth={1.5} />
  <code style="font-size:0.75rem">strokeWidth=1.5</code>
</div>
<div style="align-items:center;display:flex;flex-direction:column;gap:0.4rem;min-inline-size:6rem">
  <Icon name="target" size={28} strokeWidth={2.25} />
  <code style="font-size:0.75rem">strokeWidth=2.25</code>
</div>
<div style="align-items:center;display:flex;flex-direction:column;gap:0.4rem;min-inline-size:6rem">
  <Icon name="target" size={28} strokeWidth={3} />
  <code style="font-size:0.75rem">strokeWidth=3</code>
</div>

Accessibilité

Une icône porteuse de sens reçoit title : elle est alors exposée comme image avec ce nom accessible. Sans title, elle est décorative et passe en aria-hidden — c'est le cas par défaut, et le bon choix dès qu'un texte voisin porte déjà l'information.

Nommée (title) puis décorative

Voir le code (Svelte)

<Icon name="eye" size={24} title="Afficher le mot de passe" />
<Icon name="eye-off" size={24} />

Pour une icône cliquable, n'enveloppez pas <Icon> dans un <button> maison : utilisez IconButton, qui impose aria-label et porte les tailles/états de cible tactile du DS.

API du composant

Prop	Type	Défaut	Description
`name`	`IconName`	requis	Nom DS canonique de l'icône (voir le jeu ci-dessus).
`size`	`number`	`18`	Côté du carré, en px.
`strokeWidth`	`number`	`2.25`	Épaisseur du trait ; absente, le token --st-component-icon-strokeWidth s'applique.
`title`	`string`	—	Nom accessible ; absent, l'icône est aria-hidden.
`class`	`string`	—	Classe additionnelle, en plus de .st-icon.

Exports associés

Export	Type	Description
`IconName`	`type`	Union des noms canoniques ; à utiliser pour typer une prop d'icône côté produit.
`ICON_NAMES`	`IconName[]`	Tous les noms, ordonnés — pratique pour un sélecteur ou un catalogue.
`ICONS`	`Record<IconName, Component>`	Nom → glyphe. Échappatoire bas niveau ; préférez <Icon>.

Tokens CSS

<Icon> lit deux tokens de composant, émis par chaque thème via createComponent (entrée icon du foundation). Par défaut, --st-component-icon-color vaut currentColor : la couleur se pilote alors par le texte du conteneur (par exemple --st-semantic-text-secondary sur un en-tête discret). Une couleur concrète s'applique à toutes les icônes sans couleur explicite, y compris dans les composants qui teintent leur icône par le texte (IconButton danger ou désactivé). Aucune valeur n'est validée : une couleur invalide rend le trait invisible (stroke: none), une épaisseur invalide retombe sur l'épaisseur héritée (1 px par défaut).

--st-component-icon-strokeWidth
--st-component-icon-color
currentColor
--st-semantic-text-primary
--st-semantic-text-secondary