# 🎨 Guide d'utilisation des packs d'icônes

Ce guide vous explique comment utiliser et personnaliser les icônes des boutons d'action dans Linux BenchTools.

## 📖 Table des matières

1. [Changer de pack d'icônes](#changer-de-pack-dicônes)
2. [Packs disponibles](#packs-disponibles)
3. [Icônes supportées](#icônes-supportées)
4. [Exemples visuels](#exemples-visuels)
5. [Pour les développeurs](#pour-les-développeurs)
6. [Dépannage](#dépannage)

---

## Changer de pack d'icônes

### Via l'interface Settings

1. Ouvrez la page **Settings** : [http://localhost:8087/settings.html](http://localhost:8087/settings.html)
2. Dans la section **"Pack d'icônes"**, sélectionnez le pack de votre choix
3. Observez l'aperçu en temps réel dans la zone de prévisualisation
4. Cliquez sur **"Appliquer le pack d'icônes"**
5. La page se recharge automatiquement avec les nouvelles icônes

![Sélecteur de pack d'icônes](../screenshots/icon-pack-selector.png)

---

## Packs disponibles

### 🌟 Emojis Unicode (par défaut)

- **Type** : Emojis natifs
- **Avantages** :
  - Colorés et expressifs
  - Pas de dépendance externe
  - Compatibilité universelle
  - Chargement instantané
- **Inconvénients** :
  - Rendu variable selon l'OS et le navigateur
  - Taille fixe (difficile à ajuster)

**Exemples d'icônes** :
- Ajouter : ➕
- Éditer : ✏️
- Supprimer : 🗑️
- Enregistrer : 💾
- Upload : 📤
- Image : 🖼️
- Fichier : 📄
- Lien : 🔗

### ⚡ FontAwesome Solid

- **Type** : Icônes SVG pleines
- **Avantages** :
  - Style professionnel et moderne
  - Taille ajustable (24px par défaut)
  - Couleur adaptée au bouton
  - Rendu cohérent sur tous les OS
- **Inconvénients** :
  - Nécessite des fichiers SVG
  - Monochromes uniquement

**Utilisation** : Parfait pour un design professionnel et épuré. Les icônes s'adaptent automatiquement à la couleur du bouton.

### 🎯 FontAwesome Regular

- **Type** : Icônes SVG fines (outline)
- **Avantages** :
  - Style minimaliste et élégant
  - Plus léger visuellement que Solid
  - Même cohérence que Solid
  - Parfait pour un design épuré
- **Inconvénients** :
  - Moins visible que les versions pleines
  - Nécessite des fichiers SVG

**Utilisation** : Idéal pour un design minimaliste ou des interfaces épurées.

### 🌈 Icons8 PNG

- **Type** : Mix emojis et PNG
- **Avantages** :
  - Combine icônes colorées et PNG
  - Utilise les assets existants
  - Style moderne et coloré
- **Inconvénients** :
  - Mix de styles (peut être incohérent)
  - Taille fixe des PNG (48px)

**Utilisation** : Pour ceux qui veulent un mix de styles et utilisent déjà des icônes Icons8.

---

## Icônes supportées

Le système gère actuellement **18 icônes d'action** :

| Icône | Emoji | FA Solid | FA Regular | Utilisation |
|-------|-------|----------|------------|-------------|
| `add` | ➕ | plus.svg | square-plus.svg | Ajouter un élément |
| `edit` | ✏️ | pen-to-square.svg | pen-to-square.svg | Éditer/Modifier |
| `delete` | 🗑️ | trash-can.svg | trash-can.svg | Supprimer |
| `save` | 💾 | floppy-disk.svg | floppy-disk.svg | Enregistrer |
| `upload` | 📤 | upload.svg | - | Téléverser un fichier |
| `download` | 📥 | download.svg | - | Télécharger |
| `image` | 🖼️ | image.svg | image.svg | Gestion d'images |
| `file` | 📄 | file.svg | file.svg | Gestion de fichiers |
| `pdf` | 📕 | file-pdf.svg | file-pdf.svg | Fichiers PDF |
| `link` | 🔗 | link.svg | - | Liens/URLs |
| `refresh` | 🔄 | arrows-rotate.svg | - | Rafraîchir |
| `search` | 🔍 | magnifying-glass.svg | - | Rechercher |
| `settings` | ⚙️ | gear.svg | - | Paramètres |
| `close` | ❌ | xmark.svg | circle-xmark.svg | Fermer |
| `check` | ✅ | check.svg | circle-check.svg | Valider |
| `warning` | ⚠️ | triangle-exclamation.svg | - | Avertissement |
| `info` | ℹ️ | circle-info.svg | - | Information |
| `copy` | 📋 | copy.svg | copy.svg | Copier |

---

## Exemples visuels

### Comparaison des packs

#### Boutons d'action principaux

**Emojis Unicode** :
```
[➕ Ajouter]  [✏️ Éditer]  [🗑️ Supprimer]  [💾 Enregistrer]
```

**FontAwesome Solid** :
```
[+ Ajouter]  [✏ Éditer]  [🗑 Supprimer]  [💾 Enregistrer]
```
*(Icônes SVG pleines en blanc sur fond du bouton)*

**FontAwesome Regular** :
```
[⊞ Ajouter]  [✎ Éditer]  [🗑 Supprimer]  [💾 Enregistrer]
```
*(Icônes SVG fines/outline)*

**Icons8 PNG** :
```
[✓ Ajouter]  [✏ Éditer]  [🗑 Supprimer]  [💾 Enregistrer]
```
*(Mix de PNG et emojis)*

### Boutons dans différents contextes

#### Page Device Detail

- **Upload de documents** : Icône `upload` + texte "Upload"
- **Ajout de lien** : Icône `link` + texte "Ajouter"
- **Suppression de device** : Icône `delete` + texte "Supprimer"

#### Page Settings

- **Enregistrement des préférences** : Icône `save` + texte "Enregistrer"
- **Réinitialisation** : Icône `refresh` + texte "Réinitialiser"
- **Application du thème** : Icône `save` + texte "Appliquer"

---

## Pour les développeurs

### Utiliser les icônes dans votre code

#### Méthode 1 : Fonction helper (recommandée)

```javascript
// Dans votre code de rendu
function renderActionButtons() {
  const container = document.getElementById('actions');

  // Créer un bouton avec icône
  const deleteBtn = createIconButton(
    'delete',           // Nom de l'icône
    'Supprimer',        // Texte du bouton
    'btn btn-danger',   // Classes CSS
    'deleteItem()'      // Gestionnaire onclick
  );

  container.innerHTML = deleteBtn;
}
```

#### Méthode 2 : IconManager direct

```javascript
// Récupérer juste l'icône
const icon = window.IconManager.getIcon('add');
// Retourne: "➕" ou "<img src='...' class='btn-icon'>" selon le pack

// Créer un bouton complet
const btnHtml = window.IconManager.createButton('save', 'Enregistrer', 'btn btn-primary');
```

#### Méthode 3 : HTML + JavaScript

```html
<button class="btn btn-primary" data-icon="add" onclick="addItem()">
  <span class="btn-icon-wrapper"></span> Ajouter
</button>

<script>
// Au chargement de la page
document.addEventListener('DOMContentLoaded', () => {
  window.IconManager.updateAllButtons();
});
</script>
```

### Écouter les changements de pack

```javascript
window.addEventListener('iconPackChanged', (event) => {
  console.log('Nouveau pack:', event.detail.pack);
  console.log('Nom du pack:', event.detail.packName);

  // Re-render vos composants
  renderMyComponent();
});
```

### Créer un pack personnalisé

Voir [FEATURE_ICON_PACKS.md](FEATURE_ICON_PACKS.md#ajouter-un-nouveau-pack) pour les instructions détaillées.

---

## Dépannage

### Les icônes ne changent pas après avoir cliqué sur "Appliquer"

**Solution** :
1. Vérifier que la page se recharge bien
2. Vider le cache du navigateur (Ctrl+Shift+Del)
3. Vérifier la console (F12) pour voir les erreurs
4. Tester en navigation privée

### Les icônes SVG n'apparaissent pas (pack FontAwesome)

**Solution** :
1. Vérifier que les fichiers SVG existent dans `frontend/icons/svg/fa/`
2. Ouvrir la console réseau (F12 > Network) et chercher les erreurs 404
3. Vérifier les permissions des fichiers :
```bash
ls -la frontend/icons/svg/fa/solid/
ls -la frontend/icons/svg/fa/regular/
```

### Les icônes sont trop grandes/petites

**Solution** :
1. Aller dans **Settings > Préférences d'affichage**
2. Ajuster **"Taille des icônes de bouton"**
3. Enregistrer les préférences

Ou via CSS :
```javascript
document.documentElement.style.setProperty('--button-icon-size', '20px');
```

### Le pack ne se sauvegarde pas

**Solution** :
1. Vérifier que localStorage est activé dans votre navigateur
2. Tester :
```javascript
console.log(localStorage.getItem('benchtools_icon_pack'));
// Devrait retourner: 'emoji', 'fontawesome-solid', etc.
```
3. Vérifier que vous n'êtes pas en mode navigation privée

### Les icônes SVG sont de la mauvaise couleur

**Vérification** : Les filtres CSS s'appliquent automatiquement :
- `.btn-primary .btn-icon` : blanc (invert)
- `.btn-secondary .btn-icon` : légèrement atténué
- `.btn-danger .btn-icon` : blanc (invert)

**Solution** : Si les couleurs sont incorrectes, vérifier le CSS dans `components.css` :
```css
.btn-icon {
  filter: brightness(0) invert(1); /* Blanc par défaut */
}
```

---

## Bonnes pratiques

### ✅ À faire

- Utiliser `createIconButton()` pour générer les boutons dynamiquement
- Ajouter l'attribut `data-icon` sur les boutons statiques
- Écouter `iconPackChanged` pour re-render les composants
- Fournir un fallback dans `getIcon(name, fallback)`

### ❌ À éviter

- Coder en dur les emojis dans le HTML
- Ignorer les changements de pack
- Oublier d'ajouter `.btn-icon-wrapper` dans les boutons statiques
- Utiliser des chemins d'icônes absolus

---

## Ressources

### Documentation technique

- [FEATURE_ICON_PACKS.md](FEATURE_ICON_PACKS.md) - Documentation complète du système
- [FEATURE_THEME_SYSTEM.md](FEATURE_THEME_SYSTEM.md) - Système de thèmes
- [frontend/js/icon-manager.js](../frontend/js/icon-manager.js) - Code source du gestionnaire

### Bibliothèques d'icônes

- [FontAwesome Icons](https://fontawesome.com/icons) - Catalogue complet
- [Icons8](https://icons8.com/) - Bibliothèque Icons8
- [Emojipedia](https://emojipedia.org/) - Référence emojis Unicode

---

## Support

Si vous rencontrez des problèmes ou avez des questions :

1. Consultez la [documentation technique](FEATURE_ICON_PACKS.md)
2. Vérifiez la console du navigateur (F12) pour les erreurs
3. Testez avec le pack par défaut (Emojis Unicode)
4. Ouvrez une issue sur le dépôt Git si le problème persiste

Bon usage des icônes ! 🎨
