Icon

Composant d'icône universel basé sur Lucide Icons (MIT). 1 500+ icônes, cohérence géométrique stricte (strokeWidth: 1.5px), accessibilité WCAG 1.1.1 intégrée. Universal icon component based on Lucide Icons (MIT). 1,500+ icons, strict geometric consistency (strokeWidth: 1.5px), built-in WCAG 1.1.1 accessibility.

Tokens

CSS Custom Property	Token sémantiqueSemantic token	ValeurValue
`--sda-semantic-icon-size-inline`	`semantic.icon.size.inline`	16px
`--sda-semantic-icon-size-control`	`semantic.icon.size.control`	20px
`--sda-semantic-icon-size-nav`	`semantic.icon.size.nav`	24px

DOs et DON'Ts

À faireDo

Toujours utiliser <sda-icon name="…" size="control">Always use <sda-icon name="…" size="control">
Ajouter label="…" si l'icône est la seule information visibleAdd label="…" if the icon is the sole visible information
Ajouter decorative si l'icône accompagne un texte qui la décritAdd decorative if the icon accompanies text that describes it
Choisir le token de taille correspondant au contexte : inline dans un texte, control dans un bouton, nav en en-têteChoose the size token matching the context: inline in text, control in a button, nav in a header

À éviterDon't

SVG inline sans passer par <sda-icon> — aucun contrat d'accessibilitéInline SVG without <sda-icon> — no accessibility contract
Taille codée en dur : style="width:20px"Hardcoded size: style="width:20px"
Icône sémantique sans label ni decorativeSemantic icon without label or decorative
Tailles inventées hors des 3 tokens sémantiques définisSizes invented outside the 3 defined semantic tokens

Référence complèteFull reference

Composant — Icône (`sda-icon`)

Contrat du composant icône — règles d'usage, accessibilité et anti-patterns. Type: guideline Chemin logique: guidelines/components/icon.md > Lecture avant: AGENTS.md, DESIGN.md, .claude/rules/tokens-system.md Relations: components/sda-icon.js, tokens/semantic.json, decisions/ADR-022-lucide-icons.md, guidelines/components/button.md

Bibliothèque — Lucide Icons

Lucide (MIT) est la bibliothèque d'icônes officielle du système. 1 500+ icônes, cohérence géométrique stricte (strokeWidth: 1.5px). Référence canonique : lucide.dev

API du composant

<!-- Icône sémantique (avec label obligatoire) -->
<sda-icon name="trash-2" size="control" label="Supprimer le fichier"></sda-icon>

<!-- Icône décorative (aria masquée) -->
<sda-icon name="check" size="inline" decorative></sda-icon>

<!-- Icône de navigation -->
<sda-icon name="settings" size="nav" label="Paramètres"></sda-icon>

Prop	Type	Valeurs	Défaut	Requis
`name`	String	Nom Lucide (ex: `trash-2`)	—	✅
`size`	String	`inline` / `control` / `nav`	`control`	—
`label`	String	Texte accessible	—	Si non décoratif
`decorative`	Boolean	Icône purement ornementale	`false`	—

Tailles et tokens

`size`	Token sémantique	Valeur	Contexte
`inline`	`semantic.icon.size.inline`	16px	Dans un texte courant, un label
`control`	`semantic.icon.size.control`	20px	Dans un bouton, un input, un badge
`nav`	`semantic.icon.size.nav`	24px	Navigation, en-tête, emphase

Règles absolues

✅ Toujours un label si l'icône est la seule information (ex: bouton icône seul)
✅ decorative si l'icône accompagne un texte qui la décrit déjà
✅ size correspond au contexte (control dans un bouton, inline dans un texte)
✅ Nom d'icône exact selon lucide.dev (kebab-case)

❌ Jamais d'icône sémantique sans label : <sda-icon name="trash-2">
❌ Jamais de taille en dur : style="width: 20px"
❌ Jamais de variante inventée hors inline/control/nav
❌ Jamais d'icône hors bibliothèque Lucide sans approbation

Usage avec ds-button

<!-- Bouton avec icône décorative + texte -->
<ds-button variant="critical">
  <sda-icon name="trash-2" size="control" decorative></sda-icon>
  Supprimer définitivement
</ds-button>

<!-- Bouton icône seul — label obligatoire sur sda-icon -->
<ds-button variant="ghost" aria-label="Fermer">
  <sda-icon name="x" size="control" label="Fermer"></sda-icon>
</ds-button>

Accessibilité — WCAG 1.1.1

Scénario	Implémentation
Icône seule (bouton, lien)	`label="Action décrite"` → `aria-label` injecté
Icône + texte adjacent	`decorative` → `aria-hidden="true"`
Icône dans un champ	`label` sur le champ parent (`aria-describedby`)

Anti-patterns à détecter

❌ <sda-icon name="trash-2"></sda-icon>
   → Icône sémantique sans label — escalader

❌ <sda-icon name="danger" size="control">
   → Nom "danger" inexistant dans Lucide — utiliser "alert-triangle" ou "x-circle"

❌ <svg>...</svg>  (SVG inline hors sda-icon)
   → Dérive — pas de contrat d'accessibilité ni de token

❌ <sda-icon name="check" style="width: 18px;">
   → Taille en dur — utiliser size="inline" ou size="control"

Installation

# npm (recommandé pour les projets avec bundler)
npm install lucide

# CDN (projets statiques)
<script src="https://unpkg.com/lucide@latest"></script>