Icônes

Les icônes sont des composants React SVG regroupés par catégorie. Tous les exports passent par index.js.

Règle : ne jamais définir une icône directement dans un composant. Si une icône manque, l'ajouter dans le fichier de catégorie approprié.

Import

import { Add01Icon, Delete02Icon } from '@lrvo/core/shared/icons';

<Add01Icon width={18} height={18} />

Chaque icône accepte les props d'un <svg>. Elle hérite de currentColor, donc la couleur se pilote par la classe du parent.

Sous-chemin client-safe.

Structure

src/shared/icons/
  index.js            re-exporte les fichiers de catégorie, plus les icônes générales
  add-remove.js       ajout, suppression
  business.js         commerce, finance, documents
  communications.js   messagerie, réseaux, contact
  games.js            jeux, sport, loisirs
  links.js            liens, partage, lien externe
  logos.js            logos de services tiers
  time.js             calendrier, horloge, rappel, durée

Ajouter une icône

1. Ajouter le composant dans le fichier de catégorie approprié.
2. L'envelopper dans le helper m() défini en tête de chaque fichier de catégorie, avec ses mots-clés.
3. Si aucune catégorie ne convient, créer un fichier, y déclarer son propre m() avec le libellé de la catégorie, puis ajouter export * from './nouveau-fichier.js' dans index.js.

const m = (fn, keywords, isCategoryIcon = false) => Object.assign(fn, { keywords, category: 'Ajouter + Supprimer', ...(isCategoryIcon && { categoryIcon: true }) });

export const Add01Icon = m(
  (props) => (
    <svg /* … */>{/* … */}</svg>
  ),
  ['add', 'plus', 'create', 'new', 'insert', 'ajouter', 'nouveau', 'créer', 'insérer'],
  true,
);

Le troisième argument désigne l'icône représentative de la catégorie dans la barre latérale du sélecteur. Une seule icône par fichier le porte, les autres l'omettent.

Les icônes générales définies directement dans index.js n'ont pas de catégorie. Elles restent accessibles par la recherche, mais n'apparaissent sous aucun onglet. Pour ces icônes, attacher les mots-clés directement : MoreVerticalIcon.keywords = [...].

Le libellé de catégorie est en français : c'est lui qui s'affiche dans le sélecteur. Les catégories sont déduites des icônes et triées par ordre alphabétique, il n'y a aucune liste à tenir à jour.

Convention des mots-clés

• Toujours en anglais et en français. C'est ce qui rend le sélecteur utilisable quelle que soit la langue dans laquelle l'utilisateur pense.
• Mots au sens large : synonymes et usages contextuels.
• Pas de doublon entre variantes d'une même icône. Add01Icon et Add02Icon partagent les mêmes mots-clés.
• Apostrophes : les mots-clés sont des chaînes délimitées par '. Un mot comme sac d'argent casse la chaîne. Préférer argent, ou échapper : 'sac d\'argent'.

Détecter un doublon

Un doublon est une icône définie à la fois dans index.js et dans un fichier de catégorie.

# 1. lister les icônes définies dans index.js
git grep "^export const" -- src/shared/icons/index.js

# 2. vérifier si un nom apparaît ailleurs
git grep "export const NomDeLIcone" -- "src/shared/icons/*.js"

Deux résultats signifient un doublon : supprimer la définition de index.js et garder celle du fichier de catégorie.

Sélecteur d'icône

Pour laisser l'utilisateur choisir une icône, utiliser IconPicker de @lrvo/core/shared/components. Il ouvre une modale (recherche, catégories, grille) et retourne le nom de l'icône sous forme de chaîne, résolu ailleurs par Icons[name].

Dans le template.js d'un bloc personnalisé, passer plutôt par le helper IconField de @lrvo/core/blocks-registry/fields-ui.

Recherche par mots-clés

import * as Icons from '@lrvo/core/shared/icons';

function searchIcons(query) {
  const q = query.toLowerCase();
  return Object.entries(Icons)
    .filter(([name, Icon]) =>
      name.toLowerCase().includes(q) ||
      Icon.keywords?.some((k) => k.includes(q))
    )
    .map(([name, Icon]) => ({ name, Icon }));
}

C'est ce que fait IconPicker en interne.

Catalogue

Le devkit expose le catalogue complet sous /admin/devkit/icons, activable par LRVO_DEVKIT=true. Voir Administration.