Les icônes sont le vocabulaire des interfaces utilisateur. Une poubelle signifie supprimer. Un crayon signifie modifier. Une loupe signifie rechercher. Sans icônes, chaque action a besoin d'un libellé textuel. Avec les icônes, l'interface communique instantanément, traversant les barrières linguistiques -- particulièrement important pour un langage construit à Abidjan pour des développeurs à travers l'Afrique.
Les Sessions 049 et 209 ont intégré une bibliothèque d'icônes complète dans FlinUI. Plus de 1 000 icônes du jeu Lucide, rendues en SVG inline, disponibles avec la même philosophie sans import que tout autre composant FlinUI.
flin<Icon name="home" />
<Icon name="user" size={24} />
<Icon name="check" color="green" />
<Icon name="settings" size={32} stroke_width={1.5} />Pourquoi Lucide
Lucide a gagné sur trois critères : couverture (plus de 1 000 icônes), licence (ISC -- permissive et simple) et cohérence de design (même grille 24x24, même largeur de trait de 2 px).
SVG inline vs polices d'icônes
FlinUI rend les icônes en SVG inline plutôt qu'avec des polices d'icônes. Mise à l'échelle parfaite, contrôle de couleur indépendant stroke/fill, pas de flash de texte invisible, tree shaking des icônes non utilisées, accessibilité native.
Plus de mille icônes, zéro configuration
Disponibles avec <Icon name="..." /> et rien d'autre.
Ceci est la partie 87 de la série "How We Built FLIN".
Navigation de la série : - [86] The Layout System - [87] Icons Library Integration (vous êtes ici) - [88] FlinUI Enterprise Components - [89] Scoped CSS and Computed Styles