Iconographie

Bibliothèque

Patrimo utilise lucide-react, une bibliothèque d'icônes SVG open-source, cohérente (grid 24 × 24, traits 2 px), moderne.

import { TrendingUp, TrendingDown, Minus, AlertCircle, Loader2 } from 'lucide-react';

Pourquoi Lucide : tree-shakable (une icône = un import = kilo-octets), style cohérent (ni trop fin, ni trop épais), couvre largement les besoins financiers (trending, graphiques, users, settings, dollar signs…).

Tailles

Contexte	Taille	Classe ou prop
Icône dans bouton / badge inline	11 ou 13 px	size={11} ou size={13}
Icône dans nav / sidebar	16 px	size={16}
Icône décorative (header, empty state)	24 à 32 px	size={24} / size={32}
Icône hero (logo, illustration)	48 + px	size={56}

Couleur

Par défaut, une icône hérite de currentColor. Les couleurs explicites :

// Valeur positive
<TrendingUp size={13} color="var(--color-positive)" />

// Valeur négative
<TrendingDown size={13} color="var(--color-negative)" />

// Décorative (suit le texte)
<Settings size={16} />

Accessibilité

Règle : toute icône purement décorative a aria-hidden="true" ; toute icône porteuse de sens sans texte associé a un aria-label.

{/* Décorative : accompagne un label */}
<button>
  <Settings size={16} aria-hidden="true" />
  <span>Paramètres</span>
</button>

{/* Icon-only button : aria-label obligatoire */}
<button aria-label="Basculer le thème">
  <Moon size={16} />
</button>

Icônes utilisées dans l'app

Icône	Composant / contexte
TrendingUp, TrendingDown, Minus	TrendBadge
TrendingUp	Logo Patrimo (sidebar + login)
AlertCircle	Bannières d'erreur
Loader2	Spinner (animé via animate-spin)
ChevronLeft, ChevronRight	Toggle collapse sidebar
LogOut	Bouton déconnexion

Règles

• Ne pas mélanger avec d'autres bibliothèques d'icônes (Font Awesome, Heroicons, Material Icons)
• Préférer Lucide systématiquement — si une icône manque, ouvrir une issue sur le repo Lucide ou dessiner un SVG inline qui respecte le même style (trait 2 px, viewBox 24)
• Taille en size prop, pas en className="w-4 h-4" — garantit un rendu net

Voir aussi

• lucide.dev — catalogue complet
• Accessibilité — règles ARIA