Système d'icônes et d'icônes

1) Rôle des icônes dans le produit

Les icônes sont un porteur compact de sens et d'état. Ils accélèrent la numérisation, aident à économiser de l'espace et augmentent la reconnaissance des modèles. Dans les interfaces de produits, l'icône complète le texte et la couleur plutôt que de les remplacer.

1. Sens> style : chaque icône doit avoir un scénario d'application clair.

2. Consistance : maille unique, barre, angles, rythme de remplissage.

3. Disponibilité : l'icône n'est pas le seul signal ; il y a toujours une signature/tooltip/aria.

4. Performance : un SVG-pipline, sprites et jetons couleur/taille.

2) Grille et lignes clés

Artbords de base : 16 × 16, 20 × 20, 24 × 24 (principal), 32 × 32.
Ligne clé (keyline) : cercle/carré inscrit avec un retrait de 1-2 px pour l'équilibre optique.
Pas de pixel : nous dessinons sur des coordonnées entières ; stroke est un multiple de 0. 5 px (généralement 1. 5 px pour 24 × 24).

• Les diagonales sont plus fines - ajoutez 0. 25 px à stroke dans les endroits problématiques.
• Les sommets des coins tranchants sont légèrement réduits à 1 px à l'intérieur de la keyline pour ne pas « grincer ».
• Les tasses et les points nécessitent souvent + 1 px de diamètre pour une masse visuelle égale.

Zones de clic : zone interactive ≥ 40 × 40 px (mobile), ≥ 32 × 32 px (bureau) ; l'icône est centrée.

3) Style de jeu

• stroke: 1. 5 px (24×24), 1. 25 px (20×20), 1 px (16×16).
• linecap/linejoin : « round » pour la convivialité ou « miter » pour le style technique (on fixe en haydline).
• Angles de rayon en géométrie : 2-3 px (24 × 24).

Remplissage (filled) : Pour les zones denses et les icônes d'état.
Deux tons (duotone) - autorisé pour les états vides illustratifs, mais pas pour les signaux UI critiques.

• Outline est l'état de base.
• Filled - atout/allocation.
• Two-tone - décoratif/en référence.

4) Couleur et contraste (WCAG)

Mode de base - monochrome via 'currentColor' : l'icône hérite de la couleur du texte/contexte.

• `icon. error '↔ fond ≥ 3:1, avec la signature du texte (pas seulement la couleur).
• `icon. on-surface '↔ fond ≥ 3:1 ; pour les petites tailles viser en 4. 5:1.
• Sur les placards colorimétriques, utilisez les couleurs 'on-' (contraste automatique du système de couleur).

5) États et interactions

Default/Hover/Active/Disabled/Focus : la différence n'est pas seulement la couleur - nous changeons l'opacité/remplissage/épaisseur/fond-pilule, nous ajoutons focus ring.
Badges (compteurs) : contraste du chiffre ≥ 4. 5:1 au placard ; la taille du chiffre est ≥ 10-11 px.
Icônes toggle (favoris, j'aime) : nous changeons le fond et/ou le point intérieur, pas seulement la couleur.

6) Icône + texte

Les icônes ne remplacent pas les labels dans les actions clés. Paire minimale : icône + texte court (ou tooltip par 'aria-label'). Dans les listes et les tableaux, l'icône est alignée sur le capuchon du texte et la ligne de base.

7) Accessibilité (A11y)

Pour les icônes décoratives :' role = » img » aria-hidden = » true » ou retirer du flux de disponibilité.
Pour les sens : '<svg role = « img » aria-labelledby = « id'>' + <title id = » id'> Description </title> 'ou' aria-label '.
L'icône ne doit pas être le seul porteur du statut : ajouter un texte/conseil/modèle iconographique (forme, barre).
La taille du texte et le contraste de la signature correspondent au WCAG (normal ≥ 4. 5:1).

8) SVG-pipeline et performance

Pourquoi SVG : clarté vectorielle, stylisation par CSS, faible poids avec optimisation.

• Stocker les fichiers maîtres dans Figma, exporter vers SVG avec des options : pas de « groupe » superflu, pas de « fill-rule » par défaut, avec l'attribut « viewBox » et pas de « width/height » fixe (redéfinir en CSS).
• Run via SVGO (Project Profile) : suppression des métadonnées, raccourcissement des coordonnées, unification des chemins.
• L'abandon des polices icônes (icon fonts) est un problème de disponibilité et de rendu.

1. Sprite SVG :

html
<svg style="display:none">
<symbol id="icon-upload" viewBox="0 0 24 24">…</symbol>
</svg>
…
<svg class="i"><use href="#icon-upload"></use></svg>

répétitions bon marché, − ne peut pas facilement changer 'stroke-width' dans certaines piplines.
2. Inline-SVG (composant React) : flexibilité des styles et des props, tree-shaking.
3. External '<img>' - uniquement pour le décoratif/illustratif.

css
.i { width: 1em; height: 1em; color: var(--icon-color, currentColor); }
.i--muted { opacity:.64; }
.i--danger { color: var(--role-danger); }

9) API du composant (exemple React)

tsx type IconProps = {
name: 'upload'      'download'      'wallet'      'trophy'      'shield'      string;
size?: number      '1em'      'sm'      'md'      'lg';
stroke?: number;       // 1      1. 25      1. 5 title?: string;        // для a11y decorative?: boolean;     // если true -> aria-hidden className?: string;
};

• Par défaut,' size = » 1em » et' stroke = 1. 5`.
• Si 'decorative', nous ajoutons 'aria-hidden =' true '.