Forme DS

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.

Règle. Importe une icône depuis @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.