Fondations
Iconographie
Les icônes Forme sont Lucide, mais on ne les importe jamais depuis Lucide en
dur. On passe toujours par le wrapper du design system @forme-ch/ui/icons :
exports nommés Forme, RSC-safe, trait constant à l'écran (absoluteStrokeWidth
1,25 px), et garantie de parité entre toutes les surfaces.
@forme-ch/ui/icons,
jamais depuis lucide-react directement. Le wrapper est la seule
voie qui reste RSC-safe et cohérente d'une app à l'autre.
Import
import { SearchIcon, PlusIcon, TrashIcon } from "@forme-ch/ui/icons";
<SearchIcon size={20} />
<TrashIcon size={20} /> Un échantillon
Une douzaine d'icônes courantes, rendues en direct via le wrapper. Le nom sous chaque icône est l'export exact à importer.
import {
SearchIcon, PlusIcon, PencilIcon, TrashIcon,
CheckIcon, XIcon, CalendarIcon, StarIcon,
UserIcon, SettingsIcon, WarningIcon, InfoIcon,
} from "@forme-ch/ui/icons"; Trait
Lucide dessine un trait uniforme (pas de variante « fill »). Le wrapper fixe un trait
constant à l'écran quelle que soit la taille via
absoluteStrokeWidth (1,25 px) — net sur desktop comme sur mobile.
La prop weight héritée de Phosphor est encore acceptée au typage
mais ignorée au rendu (compat, aucune édition nécessaire lors de la migration).
Taille & couleur
Une icône hérite de currentColor : sa couleur suit le texte du contexte,
donc réfère un token de texte sur le parent plutôt que de colorer l'icône. Pour la taille, cale-toi
sur l'échelle typographique environnante (size={20} auprès d'un
texte --font-size-xl, par ex.).
✓ À faire
Importer via @forme-ch/ui/icons et laisser l'icône hériter de
currentColor.
✕ À éviter
Importer lucide-react en dur, ou coder une couleur d'icône
au lieu de piloter color sur le parent.