Aller au contenu principal

Icônes (Lucide React)

Vue d'ensemble​

Toutes les icônes de l'application utilisent la bibliothèque Lucide React. Elles doivent être cohérentes en taille et en couleur.

Règles​

  1. Utiliser uniquement Lucide React (lucide-react)
  2. Tailles standard : 16, 18, 20, 32, 48
  3. Couleur primaire : text-primary-600 dark:text-primary-400
  4. Toujours inclure la variante dark mode
  5. Size correspond au contexte (H1=32, H2=20, bouton=16-18)

Installation​

npm install lucide-react

Import​

import { TrendingUp, Settings, Download, Loader2 } from 'lucide-react'

Tailles d'Icônes​

Par Contexte​

ContexteSizeUtilisation
Titre principal (H1)32Header de page
Section (H2)20Titre de section/card
Bouton16-18Icône dans bouton
Texte inline16Icône dans texte
État vide48Empty state

Couleurs d'Icônes​

Primaire​

className="text-primary-600 dark:text-primary-400"

Secondaire​

className="text-gray-600 dark:text-gray-400"

Dans Bouton Primaire​

className="text-white"

État Désactivé​

className="text-gray-400 dark:text-gray-500"

Code de référence​

Titre H1​

<h1 className="text-3xl font-bold mb-2 flex items-center gap-3">
  <TrendingUp className="text-primary-600 dark:text-primary-400" size={32} />
  Consommation
</h1>

Titre H2 (Section)​

<h2 className="text-lg font-semibold flex items-center gap-2">
  <BarChart3 className="text-primary-600 dark:text-primary-400" size={20} />
  Statistiques
</h2>

Bouton​

<button className="btn btn-primary flex items-center gap-2">
  <Download size={18} />
  Télécharger
</button>

Loading​

<Loader2 className="animate-spin text-primary-600 dark:text-primary-400" size={32} />

Empty State​

<TrendingUp className="mx-auto text-gray-400 mb-4" size={48} />

Icônes Courantes​

import {
  Home,           // Accueil
  Settings,       // Paramètres
  User,           // Utilisateur
  Users,          // Utilisateurs
  LogOut,         // Déconnexion
  Menu,           // Menu hamburger
  X,              // Fermer
  ChevronDown,    // Chevron bas
  ChevronUp,      // Chevron haut
  ChevronLeft,    // Précédent
  ChevronRight,   // Suivant
} from 'lucide-react'

Données et Graphiques​

import {
  TrendingUp,     // Consommation/Tendance
  TrendingDown,   // Diminution
  BarChart3,      // Statistiques/Graphiques
  Activity,       // Activité
  Zap,            // Production/Électricité
  Calendar,       // Dates
  Clock,          // Temps
} from 'lucide-react'

Actions et Commandes​

import {
  Download,       // Télécharger
  Upload,         // Uploader
  RefreshCw,      // Rafraîchir
  Search,         // Rechercher
  Filter,         // Filtrer
  Trash2,         // Supprimer
  Edit,           // Éditer
  Plus,           // Ajouter
  Minus,          // Retirer
  Check,          // Valider
} from 'lucide-react'

Statut et Info​

import {
  Info,           // Information
  AlertCircle,    // Avertissement
  CheckCircle,    // Succès
  XCircle,        // Erreur
  HelpCircle,     // Aide
  Loader2,        // Chargement (avec animate-spin)
} from 'lucide-react'

Fichiers et Documents​

import {
  FileText,       // Document/Logs
  Code,           // Code/API
  Download,       // Export
  Upload,         // Import
} from 'lucide-react'

Autres​

import {
  Calculator,     // Simulateur
  Gift,           // Contributions
  LayoutDashboard, // Dashboard
  Eye,            // Voir
  EyeOff,         // Cacher
  ArrowUp,        // Tri ascendant
  ArrowDown,      // Tri descendant
  ArrowUpDown,    // Tri
} from 'lucide-react'

Exemples d'utilisation​

Par Page​

// Consumption
<TrendingUp className="text-primary-600 dark:text-primary-400" size={32} />

// Production
<Zap className="text-primary-600 dark:text-primary-400" size={32} />

// Simulator
<Calculator className="text-primary-600 dark:text-primary-400" size={32} />

// Settings
<Settings className="text-primary-600 dark:text-primary-400" size={32} />

// Admin Users
<Users className="text-primary-600 dark:text-primary-400" size={32} />

// Admin Logs
<FileText className="text-primary-600 dark:text-primary-400" size={32} />

// Ecowatt
<Activity className="text-primary-600 dark:text-primary-400" size={32} />

// Tempo
<Calendar className="text-primary-600 dark:text-primary-400" size={32} />

// FAQ
<HelpCircle className="text-primary-600 dark:text-primary-400" size={32} />

// API Docs
<Code className="text-primary-600 dark:text-primary-400" size={32} />

Icônes avec Animation​

// Chargement
<Loader2 className="animate-spin text-primary-600 dark:text-primary-400" size={32} />

// Rafraîchir (rotation au clic)
<RefreshCw className="transition-transform hover:rotate-180" size={18} />

// Chevron (rotation selon état)
<ChevronDown
  className={`transition-transform duration-200 ${
    isExpanded ? "rotate-180" : ""
  }`}
  size={20}
/>

Icônes dans Tableau​

<th className="cursor-pointer" onClick={() => handleSort('date')}>
  <div className="flex items-center gap-1">
    <span>Date</span>
    {sortBy === 'date' ? (
      sortOrder === 'asc' ? (
        <ArrowUp size={14} />
      ) : (
        <ArrowDown size={14} />
      )
    ) : (
      <ArrowUpDown size={14} className="opacity-40" />
    )}
  </div>
</th>

Icône de Statut​

{status === 'success' && (
  <CheckCircle className="text-green-600 dark:text-green-400" size={16} />
)}
{status === 'error' && (
  <XCircle className="text-red-600 dark:text-red-400" size={16} />
)}
{status === 'warning' && (
  <AlertCircle className="text-yellow-600 dark:text-yellow-400" size={16} />
)}

À ne pas faire​

Taille incorrecte selon contexte​

// ❌ INCORRECT - H1 avec petite icône
<h1 className="text-3xl font-bold flex items-center gap-3">
  <TrendingUp size={20} />
  Titre
</h1>

// ✅ CORRECT
<h1 className="text-3xl font-bold flex items-center gap-3">
  <TrendingUp size={32} />
  Titre
</h1>

Pas de dark mode​

// ❌ INCORRECT
<TrendingUp className="text-primary-600" size={32} />

// ✅ CORRECT
<TrendingUp className="text-primary-600 dark:text-primary-400" size={32} />

Icône sans size​

// ❌ INCORRECT - Utilise la taille par défaut (24)
<Download className="text-primary-600" />

// ✅ CORRECT
<Download className="text-primary-600 dark:text-primary-400" size={18} />

Mauvaise bibliothèque​

// ❌ INCORRECT - N'utilisez pas d'autres bibliothèques
import { FaHome } from 'react-icons/fa'

// ✅ CORRECT
import { Home } from 'lucide-react'

Accessibilité​

Icône Décorative​

<TrendingUp aria-hidden="true" size={20} />

Icône Sémantique​

<button aria-label="Télécharger le fichier">
  <Download size={18} />
</button>

Voir aussi​