Icon

Composant d'icône universel basé sur Lucide Icons (licence ISC). 1 500+ icônes, viewBox 24×24 strict, accessibilité WCAG 1.1.1 intégrée. L'épaisseur de trait varie par taille (ADR-091) pour compenser optiquement la mise à l'échelle. Universal icon component based on Lucide Icons (ISC license). 1,500+ icons, strict 24×24 viewBox, built-in WCAG 1.1.1 accessibility. Stroke width varies per size (ADR-091) to optically compensate for scaling.

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
`--agtc-semantic-icon-strokeWidth-inline`	`semantic.icon.strokeWidth.inline`	1
`--agtc-semantic-icon-strokeWidth-control`	`semantic.icon.strokeWidth.control`	1.5
`--agtc-semantic-icon-strokeWidth-nav`	`semantic.icon.strokeWidth.nav`	1.75
`--agtc-semantic-icon-strokeWidth-feature`	`semantic.icon.strokeWidth.feature`	2
`--agtc-semantic-color-icon-inline`	`semantic.color.icon.inline`	#202020
`--agtc-semantic-color-icon-control`	`semantic.color.icon.control`	#646464
`--agtc-semantic-color-icon-nav`	`semantic.color.icon.nav`	#646464

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 (licence ISC ; les icônes toujours dérivées de Feather Icons portent en plus le crédit MIT d'origine de Feather) est la bibliothèque d'icônes officielle du système. 1 500+ icônes, viewBox 24×24 strict, épaisseur de trait tokenisée par taille (voir Tokens ci-dessus). Référence canonique : lucide.dev Lucide (ISC license; icons still derived from Feather Icons retain Feather's original MIT credit) is the official icon library of the system. 1,500+ icons, strict 24×24 viewBox, stroke width tokenized per size (see Tokens above). 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>