# Icons

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

## Structure

```
src/shared/icons/
  index.js        → re-exporte tous les fichiers catégorie
  X.js   → fichier contenant les icones d'une catégorie
  README.md
```

## Ajouter une icône

1. Ajoute le composant dans le fichier catégorie approprié
2. Ajoute `.keywords` juste après la définition (voir convention ci-dessous)
3. Si aucune catégorie n'existe, crée un nouveau fichier et ajoute `export * from './nouveau-fichier.js'` dans `index.js`

## Convention des mots-clés

Chaque icône doit avoir une propriété `.keywords` attachée directement sur le composant :

```js
export const Add01Icon = (props) => (
  <svg ...>...</svg>
);
Add01Icon.keywords = ['add', 'plus', 'create', 'new', 'insert', 'ajouter', 'nouveau', 'créer', 'insérer'];
```

**Règles :**
- Toujours en **anglais et en français**
- Mots au sens large : inclure les synonymes et usages contextuels
- Pas de doublons inutiles entre variantes du même icône (ex. `Add01Icon` et `Add02Icon` partagent les mêmes keywords)
- **Apostrophes dans les mots français** : les keywords sont des strings JS délimitées par `'`. Un mot comme `sac d'argent` contient une apostrophe qui casse la string. Deux solutions :
  - Éviter les expressions avec apostrophe : écrire `argent` plutôt que `sac d'argent`
  - Ou échapper : `'sac d\'argent'`

## Détecter les doublons

Un doublon est une icône définie directement dans `index.js` **et** dans un fichier catégorie.

**Étape 1 — lister les icônes définies dans `index.js` :**

```bash
grep "^export const" src/shared/icons/index.js
```

**Étape 2 — vérifier si un nom apparaît dans un autre fichier :**

```bash
grep "export const NomDeLIcone" src/shared/icons/*.js
```

Si la commande retourne deux lignes (une dans `index.js`, une dans un autre fichier), c'est un doublon — supprimer la définition dans `index.js` et garder celle du fichier catégorie.

---

## Commandes utiles

### Lister toutes les icônes d'un fichier

```bash
grep -n "^export const" src/shared/icons/add-remove.js
```

### Ajouter des mots-clés en masse

Plutôt que d'éditer manuellement, un script Python insère les `.keywords` après chaque composant :

```python
KEYWORDS = {
  'MyNewIcon': ['keyword1', 'keyword2', 'mot1', 'mot2'],
  # ...
}

path = 'src/shared/icons/mon-fichier.js'

with open(path, 'r') as f:
    content = f.read()

for name, kw in KEYWORDS.items():
    if f'{name}.keywords' in content:
        continue
    kw_str = ', '.join(f"'{k}'" for k in kw)
    keywords_line = f'{name}.keywords = [{kw_str}];'
    start_idx = content.find(f'export const {name} = (props) => (')
    close_idx = content.find('\n);\n', start_idx)
    insert_pos = close_idx + len('\n);\n')
    content = content[:insert_pos] + keywords_line + '\n' + content[insert_pos:]

with open(path, 'w') as f:
    f.write(content)
```

## Recherche par mots-clés

```js
import * as Icons from '@/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 }))
}
```