---
name: project-icons-library
description: "Bibliothèque d'icônes admin — table app_icons, route /api/icons, section Admin, nettoyage fond SVG, composant AppIcon dans Settings"
metadata: 
  node_type: memory
  type: project
  originSessionId: d7532bd8-8eb4-4b40-8c39-8f569dcf432f
---

Système de gestion d'icônes applicatives accessible via `/admin?section=icons`.

## Tables (backend/src/db/index.js)
```sql
CREATE TABLE IF NOT EXISTS app_icons (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  name TEXT NOT NULL UNIQUE,
  filename TEXT NOT NULL,
  description TEXT,
  created_at TEXT DEFAULT (datetime('now')),
  updated_at TEXT DEFAULT (datetime('now'))
)
CREATE TABLE IF NOT EXISTS app_icons_history (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  icon_id INTEGER NOT NULL REFERENCES app_icons(id) ON DELETE CASCADE,
  filename TEXT NOT NULL,
  replaced_at TEXT NOT NULL
)
```
10 icônes seedées au premier démarrage (guard count=0).

## Route (backend/src/routes/icons.js)
- `GET /api/icons` — liste toutes les icônes
- `GET /api/icons/:name` — détail
- `GET /api/icons/:name/history` — historique (requireAdmin)
- `POST /api/icons` — création (upload multer, requireAdmin)
- `PUT /api/icons/:name` — remplacement avec archivage (max 10 versions)
- `PATCH /api/icons/:name` — modifier description uniquement
- Fichiers servis en statique : `GET /api/icons-files/:filename`
- Dossier physique : `data/icons/` à la racine du projet (pas dans backend/)

## Nettoyage fond SVG à l'upload (stripSvgBackground)
Supprime automatiquement les fonds blancs/gris dans les SVGs uploadés :
1. `background-color` dans `style=""` sur `<svg>`
2. Attribut `enable-background` (artefact Illustrator)
3. `<rect>` blanc/quasi-blanc couvrant le canvas entier
4. `<path>` blanc/quasi-blanc couvrant le canvas — **patterns raster-trace** (ex: `fill="#FEFEFE"`) détectés via `isNearWhite()` (seuil ≥ #F0F0F0) + `pathCoversCanvas()` (coordonnées proches de 0 ET de vbW/vbH)
- Rasters PNG/JPG/WebP : fond blanc → transparent via sharp (seuil R,G,B > 240)
- Fichiers `design/Icones/svg/*.svg` nettoyés rétroactivement

## Composant AppIcon (frontend/src/pages/Settings.jsx)
Remplace les SVGs inline dans le bloc "Couleurs des graphiques" :
```jsx
const ICONS_BASE = '/api/icons-files/';
function AppIcon({ filename, size = 22 }) { ... }
```
- `AppearanceSection` charge `GET /api/icons` au montage → dictionnaire `{ name: filename }`
- Utilisé avec `libIcons.interets`, `libIcons.capital`, `libIcons.cashback` à taille 33px
- CSS `.app-lib-icon` + `[data-theme="dark"] .app-lib-icon { filter: invert(1) }`
- Labels associés : `font-size: 1.1rem`, `font-weight: 600`

**Why:** Source unique — remplacer l'icône dans l'admin met à jour automatiquement tous les endroits qui l'affichent.
**How to apply:** Pour afficher une icône de la bibliothèque ailleurs dans l'app, charger `GET /api/icons` et utiliser `<img src={ICONS_BASE + filename} className="app-lib-icon">`.
