340 lines
9.5 KiB
Markdown
340 lines
9.5 KiB
Markdown
# 🎨 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
|
||
|
||
|
||
|
||
---
|
||
|
||
## 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 ! 🎨
|