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
`--agtc-semantic-icon-size-inline`	`semantic.icon.size.inline`	16px
`--agtc-semantic-icon-size-control`	`semantic.icon.size.control`	20px
`--agtc-semantic-icon-size-nav`	`semantic.icon.size.nav`	24px

DOs et DON'TsDOs and DON'Ts

À faireDo

Toujours utiliser <agtc-icon name="…" size="control">Always use <agtc-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 <agtc-icon> — aucun contrat d'accessibilitéInline SVG without <agtc-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

Bibliothèque — Lucide IconsLibrary — 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 Lucide (MIT) is the official icon library of the system. 1,500+ icons, strict geometric consistency (strokeWidth: 1.5px). Canonical reference: lucide.dev

API du composantComponent API

<!-- Semantic icon (label required) -->
<agtc-icon name="trash-2" size="control" label="Delete file"></agtc-icon>

<!-- Decorative icon (aria-hidden) -->
<agtc-icon name="check" size="inline" decorative></agtc-icon>

<!-- Navigation icon -->
<agtc-icon name="settings" size="nav" label="Settings"></agtc-icon>

Prop	Type	ValeursValues	DéfautDefault	RequisRequired
`name`	String	Nom Lucide (ex : `trash-2`)Lucide name (e.g. `trash-2`)	—	✅
`size`	String	`inline` / `control` / `nav`	`control`	—
`label`	String	Texte accessibleAccessible text	—	Si non décoratifIf not decorative
`decorative`	Boolean	Icône purement ornementalePurely decorative icon	`false`	—

Usage avec agtc-buttonUsage with agtc-button

<!-- Button with decorative icon + text -->
<agtc-button variant="critical">
  <agtc-icon name="trash-2" size="control" decorative></agtc-icon>
  Delete permanently
</agtc-button>

<!-- Icon-only button — label required on agtc-icon -->
<agtc-button variant="ghost" aria-label="Close">
  <agtc-icon name="x" size="control" label="Close"></agtc-icon>
</agtc-button>

Accessibilité — WCAG 1.1.1Accessibility — WCAG 1.1.1

ScénarioScenario	ImplémentationImplementation
Icône seule (bouton, lien)Icon only (button, link)	`label="…"` → `aria-label`
Icône + texte adjacentIcon + adjacent text	`decorative` → `aria-hidden="true"`
Icône dans un champIcon in a field	`label` sur le champ parent (`aria-describedby`)`label` on the parent field (`aria-describedby`)

InstallationInstallation

# npm (recommended for bundler projects)
npm install lucide

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