Icônes personnalisées

Le type de document Icône personnalisée ajoute une icône SVG au jeu d'icônes du bureau. L'icône apparaît ensuite dans le sélecteur de tous les champs Icône : type de document, entrée de Dock, lien de barre latérale, espace de travail…

Prérequis

• Vous avez le rôle System Manager.
• Vous avez le code SVG de l'icône : un seul élément <svg>.

Créer une icône

1. Ouvrez la barre de recherche (Ctrl+K) et tapez « Icône personnalisée ».
2. Cliquez sur Ajouter un·e Icône personnalisée.
3. Saisissez le « Nom de l'icône ». Il ne peut contenir que des lettres, des chiffres, des tirets et des traits de soulignement. Il doit être unique.
4. Collez le code dans le champ « SVG ».
5. Cliquez sur Enregistrer.

À l'enregistrement, Dodock :

• nettoie le SVG : il ne garde que les éléments et attributs SVG. Les scripts, les gestionnaires d'événements, foreignObject et le HTML sont supprimés ;
• refuse le contenu s'il ne reste pas un unique élément <svg> (« Le contenu doit être un unique élément
• retire id, width et height de l'élément racine, pour que l'icône prenne la taille de son emplacement ;
• vide le cache. Les utilisateurs voient l'icône au prochain chargement de page.

Choisir l'icône

Dans un champ Icône, ouvrez le sélecteur. Les icônes personnalisées sont dans la section « Personnalisation ». Les icônes livrées avec Dodock sont dans la section « Lucide ». Les deux sections n'apparaissent que si au moins une icône personnalisée existe.

Conseils pour le SVG

• Utilisez une zone carrée : viewBox="0 0 24 24".
• Utilisez currentColor pour fill ou stroke. L'icône prend alors la couleur du texte et suit le thème clair ou sombre.
• Une icône au trait, comme les icônes Lucide, garde ses attributs stroke et fill de l'élément racine. Sans attribut stroke, Dodock ajoute stroke="none".

Exemple

Exemple fictif : l'administrateur de Maison Verte SARL veut une icône pour le type de document personnalisé « Projet client ».

1. Il crée l'icône maison-verte-projet avec ce SVG :

   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
     <path d="M3 10 12 3l9 7v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z"/>
   </svg>
   

2. Il ouvre le DocType « Projet client » et choisit maison-verte-projet dans le champ « Icône ».
3. Il ajoute une entrée de Dock vers l'espace de travail du projet avec la même icône.

Utiliser l'icône dans un script

Une icône personnalisée a le même nom de symbole que les autres icônes du bureau. Dans un script client :

frappe.utils.icon("maison-verte-projet", "md");

Livrer des icônes avec une application

Il n'y a pas de dossier d'icônes dédié. Pour livrer des icônes avec une application, exportez les documents Icône personnalisée comme fixtures dans hooks.py :

fixtures = [{"dt": "Custom Icon", "filters": [["icon_name", "like", "maison-verte-%"]]}]

Résoudre les problèmes courants