serv_benchmark/docs/GUIDE_ICON_PACKS.md

🎨 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
2. Packs disponibles
3. Icônes supportées
4. Exemples visuels
5. Pour les développeurs
6. Dépannage

---

Changer de pack d'icônes

Via l'interface Settings

1. Ouvrez la page Settings : 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

---

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)

// 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

// 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

<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

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 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 :

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 :

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 :

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 :

.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 - Documentation complète du système
• FEATURE_THEME_SYSTEM.md - Système de thèmes
• frontend/js/icon-manager.js - Code source du gestionnaire

Bibliothèques d'icônes

• FontAwesome Icons - Catalogue complet
• Icons8 - Bibliothèque Icons8
• Emojipedia - Référence emojis Unicode

---

Support

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

1. Consultez la documentation technique
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 ! 🎨