Icônes de modules « soft »

Les icônes « soft » des modules sont des glyphes monochromes dessinés en currentColor. Chaque icône hérite de la couleur du texte de sa tuile, ce qui lui permet de suivre le survol, l'état actif et le mode sombre sans remplissage dédié par thème. Le dock Framework les utilise par défaut. Les anciens symboles « duotone » restent dans le sprite pour les intégrations qui les référencent encore.

Symboles disponibles

Les symboles « soft » sont définis dans frappe/public/icons/module-icons.svg et nommés icon-<nom>-soft. Le dock Framework (frappe/dock/frappe/frappe.json) y pointe pour ses quatorze modules :

Les glyphes sont dessinés sur une grille de 24×24, avec un trait rond d'épaisseur 1,5 par défaut.

Dessiner un symbole « soft »

Appliquez la classe soft-icon au <symbol>, puis répartissez les formes entre les classes de peinture :

• soft-body : contour du glyphe, tracé en currentColor avec un remplissage à 10 % ;
• soft-layer : forme de fond remplie à 10 %, sans trait ;
• soft-accent : forme pleine remplie à 50 %, sans trait ;
• soft-accent-line : trait d'accent à 50 % d'opacité.

<symbol id="icon-mon-module-soft" viewBox="0 0 24 24" class="soft-icon">
    <rect x="3" y="4" width="18" height="16" rx="2.5" class="soft-body"/>
    <path d="M3 9h18M3 14.5h18M9 9v11"/>
</symbol>

Les propriétés personnalisées --soft-stroke (1,5 par défaut), --soft-tint (0,1) et --soft-accent (0,5) traversent <use> : vous pouvez donc les régler sur le conteneur de l'icône pour l'ajuster.

.ma-tuile {
    --soft-stroke: 1.75;
    --soft-tint: 0.15;
    --soft-accent: 0.6;
}

Taille icon-rail

Les tuiles du dock affichent les glyphes à la taille icon-rail : 22×22 px, soit un cran sous la grille de 24 px pour laisser de la marge dans la tuile. Les tuiles-lettres des modules sans icône utilisent la même taille.

.icon-rail {
    width: 22px;
    height: 22px;
}

frappe.utils.icon("data-table-soft", "rail");

Configurer l'icône d'un module dans le dock

Le champ icon du dock d'un module accepte le nom d'un symbole du sprite, « soft » ou « duotone » :

{
    "icon": "code-app-soft",
    "link_to": "Build",
    "link_type": "Sidebar",
    "title": "Build"
}

Un module sans icône configurée affiche une tuile-lettre à la taille icon-rail.

Icônes du dock et de l'en-tête de la barre latérale

Comme dans Frappe Framework, chaque module a deux icônes, dessinées dans la même feuille d'icônes :

Pour une application :

1. Placez les symboles SVG dans une feuille d'icônes, par exemple public/icons/module-icons.svg.
2. Déclarez cette feuille dans le hooks.py de l'application, dans la liste app_include_icons.
3. Donnez l'icône « soft » aux entrées du dock et l'icône à double ton à header_icon.

Dokos (ERPNext) contient aussi des animations au survol pour quelques icônes à double ton (calculator-duotone, shopping-cart-duotone…). Elles ne jouent que sur une tuile du dock qui utilise une icône -duotone. Les docks livrés utilisent les icônes « soft », comme Frappe Framework : ces animations ne s'affichent donc pas par défaut.