Fondations
Icônes
lucide-react, trait de 1,5 à 2 px, trois tailles : 16, 20 et 24 px. Une icône accompagne un libellé ; seule, elle exige un libellé accessible.
Tailles
Couleur
Les icônes héritent de la couleur du texte (currentColor). Couleur sémantique seulement si elles portent un sens.
text-fg-default text-fg-muted text-success-fg text-warning-fg text-danger-fg
Accessibilité
import { Printer } from 'lucide-react';
// Icône décorative à côté d'un libellé
<Button leadingIcon={<Printer aria-hidden="true" />}>Imprimer le BL</Button>
// Icône seule : libellé accessible obligatoire (+ Tooltip recommandé)
<Button iconOnly aria-label="Imprimer le bon de livraison">
<Printer aria-hidden="true" />
</Button>Catalogue usuel
Icônes de référence pour garder une même icône pour un même concept dans tous les modules.
Modules
- HomeAujourd’hui
- ShoppingCartVentes
- TruckLivraisons, achats
- BoxesStocks
- FactoryProduction
- WheatCollecte paddy
- LandmarkComptabilité
- WalletTrésorerie
- UsersTiers, RH
- BarChart3Rapports
- SettingsParamètres
- CalculatorContrôle de gestion
Actions
- PlusCréer
- PencilModifier
- Trash2Supprimer
- SearchRechercher
- FilterFiltrer
- DownloadExporter
- UploadImporter
- PrinterImprimer
- ScanLineScanner
- MoreHorizontalPlus d’actions
Documents et états
- FileTextDocument
- PackageArticle, lot
- BanknotePaiement
- ClipboardCheckContrôle qualité
- CheckCircle2Succès
- AlertTriangleAvertissement