Fondations
Iconographie
الأيقونات
Principes
Quatre règles suffisent à garder les icônes cohérentes et accessibles dans tout le système.
Taille relative dans les contrôles
Dans un bouton ou un champ, une icône fait 1.15em : elle suit la taille du texte porteur via [&_svg]:size-[1.15em].
Décorative par défaut
Une icône accompagnée d'un libellé visible reçoit aria-hidden : le lecteur d'écran ne la lit pas deux fois.
Nommée seule
Un bouton icône-seul (fermer, menu, thème) porte aria-label sur le bouton, jamais sur l'icône.
Une seule provenance
Toutes les icônes s'importent depuis @/dsm/icons, jamais directement depuis lucide-react, pour garder le jeu curaté et les variantes directionnelles.
Glyphes directionnels
ArrowForward, ChevronForward, ArrowBack, ChevronBack et ArrowOutward portent la classe dsm-flip-rtl : ils pointent toujours dans le sens de lecture, sans code spécifique côté page.
LTR (dir="ltr")
RTL (dir="rtl")
Remarquez le miroir : en RTL, ArrowForward pointe vers la gauche parce que c'est là que se trouve « la suite » du parcours.
Glyphes à sens fixe
Une coche, une croix ou un lien externe ont un sens universel : ils ne se retournent jamais, quelle que soit la direction.
LTR
RTL
Jeu d'icônes
Un aperçu du jeu curaté exposé par @/dsm/icons — imports nommés uniquement, jamais d'import dynamique.
Utilisation
import { ArrowForward, X } from "@/dsm/icons";
// Icône décorative à côté d'un libellé visible
<Button iconEnd={<ArrowForward />}>Continuer</Button>
// Icône seule : le libellé va sur le bouton, pas sur l'icône
<button aria-label="Fermer">
<X aria-hidden className="size-4" />
</button>Bouton icône-seul : aria-label sur Button, aria-hidden sur l'icône.
N'importez jamais depuis lucide-react directement
src/dsm/icons/index.tsx plutôt que de contourner l'import.
Icônes sociales
Cinq pictogrammes de réseaux, dessinés en trait plein pour s'accorder au reste du jeu.