[{"data":1,"prerenderedAt":866},["ShallowReactive",2],{"\u002Fnext\u002Fdodock\u002Fdeveloppeurs\u002Ficones-modules-douces":3,"section:\u002Fnext\u002Fdodock\u002Fdeveloppeurs\u002Ficones-modules-douces":865},{"id":4,"title":5,"body":6,"description":846,"extension":847,"meta":848,"navigation":849,"path":861,"seo":862,"stem":863,"__hash__":864},"docs\u002F2.next\u002F3.dodock\u002F10.developpeurs\u002Ficones-modules-douces.md","Icônes de modules « soft »",{"type":7,"value":8,"toc":838},"minimark",[9,13,22,27,42,202,205,209,220,251,429,448,513,520,526,567,616,620,626,721,726,730,733,793,796,820,834],[10,11,5],"h1",{"id":12},"icônes-de-modules-soft",[14,15,16,17,21],"p",{},"Les icônes « soft » des modules sont des glyphes monochromes dessinés en ",[18,19,20],"code",{},"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.",[23,24,26],"h2",{"id":25},"symboles-disponibles","Symboles disponibles",[14,28,29,30,33,34,37,38,41],{},"Les symboles « soft » sont définis dans ",[18,31,32],{},"frappe\u002Fpublic\u002Ficons\u002Fmodule-icons.svg"," et nommés ",[18,35,36],{},"icon-\u003Cnom>-soft",". Le dock Framework (",[18,39,40],{},"frappe\u002Fdock\u002Ffrappe\u002Ffrappe.json",") y pointe pour ses quatorze modules :",[43,44,45,58],"table",{},[46,47,48],"thead",{},[49,50,51,55],"tr",{},[52,53,54],"th",{},"Symbole",[52,56,57],{},"Module",[59,60,61,72,82,92,102,112,122,132,142,152,162,172,182,192],"tbody",{},[49,62,63,69],{},[64,65,66],"td",{},[18,67,68],{},"icon-code-app-soft",[64,70,71],{},"Build",[49,73,74,79],{},[64,75,76],{},[18,77,78],{},"icon-studio-soft",[64,80,81],{},"Studio",[49,83,84,89],{},[64,85,86],{},[18,87,88],{},"icon-flow-soft",[64,90,91],{},"Flow",[49,93,94,99],{},[64,95,96],{},[18,97,98],{},"icon-users-soft",[64,100,101],{},"Users",[49,103,104,109],{},[64,105,106],{},[18,107,108],{},"icon-email-envelope-soft",[64,110,111],{},"Email",[49,113,114,119],{},[64,115,116],{},[18,117,118],{},"icon-website-browser-soft",[64,120,121],{},"Website",[49,123,124,129],{},[64,125,126],{},[18,127,128],{},"icon-data-table-soft",[64,130,131],{},"Data",[49,133,134,139],{},[64,135,136],{},[18,137,138],{},"icon-workflow-builder-soft",[64,140,141],{},"Workflow",[49,143,144,149],{},[64,145,146],{},[18,147,148],{},"icon-printing-printer-soft",[64,150,151],{},"Printing",[49,153,154,159],{},[64,155,156],{},[18,157,158],{},"icon-integrations-cable-soft",[64,160,161],{},"Integrations",[49,163,164,169],{},[64,165,166],{},[18,167,168],{},"icon-contacts-cards-soft",[64,170,171],{},"Contacts",[49,173,174,179],{},[64,175,176],{},[18,177,178],{},"icon-automation-cycle-soft",[64,180,181],{},"Automation",[49,183,184,189],{},[64,185,186],{},[18,187,188],{},"icon-geo-pin-soft",[64,190,191],{},"Geo",[49,193,194,199],{},[64,195,196],{},[18,197,198],{},"icon-system-monitor-soft",[64,200,201],{},"System",[14,203,204],{},"Les glyphes sont dessinés sur une grille de 24×24, avec un trait rond d'épaisseur 1,5 par défaut.",[23,206,208],{"id":207},"dessiner-un-symbole-soft","Dessiner un symbole « soft »",[14,210,211,212,215,216,219],{},"Appliquez la classe ",[18,213,214],{},"soft-icon"," au ",[18,217,218],{},"\u003Csymbol>",", puis répartissez les formes entre les classes de peinture :",[221,222,223,233,239,245],"ul",{},[224,225,226,229,230,232],"li",{},[18,227,228],{},"soft-body"," : contour du glyphe, tracé en ",[18,231,20],{}," avec un remplissage à 10 % ;",[224,234,235,238],{},[18,236,237],{},"soft-layer"," : forme de fond remplie à 10 %, sans trait ;",[224,240,241,244],{},[18,242,243],{},"soft-accent"," : forme pleine remplie à 50 %, sans trait ;",[224,246,247,250],{},[18,248,249],{},"soft-accent-line"," : trait d'accent à 50 % d'opacité.",[252,253,258],"pre",{"className":254,"code":255,"language":256,"meta":257,"style":257},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Csymbol id=\"icon-mon-module-soft\" viewBox=\"0 0 24 24\" class=\"soft-icon\">\n    \u003Crect x=\"3\" y=\"4\" width=\"18\" height=\"16\" rx=\"2.5\" class=\"soft-body\"\u002F>\n    \u003Cpath d=\"M3 9h18M3 14.5h18M9 9v11\"\u002F>\n\u003C\u002Fsymbol>\n","html","",[18,259,260,315,397,419],{"__ignoreMap":257},[261,262,265,269,273,277,280,283,287,289,292,294,296,299,301,304,306,308,310,312],"span",{"class":263,"line":264},"line",1,[261,266,268],{"class":267},"sMK4o","\u003C",[261,270,272],{"class":271},"swJcz","symbol",[261,274,276],{"class":275},"spNyl"," id",[261,278,279],{"class":267},"=",[261,281,282],{"class":267},"\"",[261,284,286],{"class":285},"sfazB","icon-mon-module-soft",[261,288,282],{"class":267},[261,290,291],{"class":275}," viewBox",[261,293,279],{"class":267},[261,295,282],{"class":267},[261,297,298],{"class":285},"0 0 24 24",[261,300,282],{"class":267},[261,302,303],{"class":275}," class",[261,305,279],{"class":267},[261,307,282],{"class":267},[261,309,214],{"class":285},[261,311,282],{"class":267},[261,313,314],{"class":267},">\n",[261,316,318,321,324,327,329,331,334,336,339,341,343,346,348,351,353,355,358,360,363,365,367,370,372,375,377,379,382,384,386,388,390,392,394],{"class":263,"line":317},2,[261,319,320],{"class":267},"    \u003C",[261,322,323],{"class":271},"rect",[261,325,326],{"class":275}," x",[261,328,279],{"class":267},[261,330,282],{"class":267},[261,332,333],{"class":285},"3",[261,335,282],{"class":267},[261,337,338],{"class":275}," y",[261,340,279],{"class":267},[261,342,282],{"class":267},[261,344,345],{"class":285},"4",[261,347,282],{"class":267},[261,349,350],{"class":275}," width",[261,352,279],{"class":267},[261,354,282],{"class":267},[261,356,357],{"class":285},"18",[261,359,282],{"class":267},[261,361,362],{"class":275}," height",[261,364,279],{"class":267},[261,366,282],{"class":267},[261,368,369],{"class":285},"16",[261,371,282],{"class":267},[261,373,374],{"class":275}," rx",[261,376,279],{"class":267},[261,378,282],{"class":267},[261,380,381],{"class":285},"2.5",[261,383,282],{"class":267},[261,385,303],{"class":275},[261,387,279],{"class":267},[261,389,282],{"class":267},[261,391,228],{"class":285},[261,393,282],{"class":267},[261,395,396],{"class":267},"\u002F>\n",[261,398,400,402,405,408,410,412,415,417],{"class":263,"line":399},3,[261,401,320],{"class":267},[261,403,404],{"class":271},"path",[261,406,407],{"class":275}," d",[261,409,279],{"class":267},[261,411,282],{"class":267},[261,413,414],{"class":285},"M3 9h18M3 14.5h18M9 9v11",[261,416,282],{"class":267},[261,418,396],{"class":267},[261,420,422,425,427],{"class":263,"line":421},4,[261,423,424],{"class":267},"\u003C\u002F",[261,426,272],{"class":271},[261,428,314],{"class":267},[14,430,431,432,435,436,439,440,443,444,447],{},"Les propriétés personnalisées ",[18,433,434],{},"--soft-stroke"," (1,5 par défaut), ",[18,437,438],{},"--soft-tint"," (0,1) et ",[18,441,442],{},"--soft-accent"," (0,5) traversent ",[18,445,446],{},"\u003Cuse>"," : vous pouvez donc les régler sur le conteneur de l'icône pour l'ajuster.",[252,449,453],{"className":450,"code":451,"language":452,"meta":257,"style":257},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",".ma-tuile {\n    --soft-stroke: 1.75;\n    --soft-tint: 0.15;\n    --soft-accent: 0.6;\n}\n","css",[18,454,455,467,483,495,507],{"__ignoreMap":257},[261,456,457,460,464],{"class":263,"line":264},[261,458,459],{"class":267},".",[261,461,463],{"class":462},"sBMFI","ma-tuile",[261,465,466],{"class":267}," {\n",[261,468,469,473,476,480],{"class":263,"line":317},[261,470,472],{"class":471},"sTEyZ","    --soft-stroke",[261,474,475],{"class":267},":",[261,477,479],{"class":478},"sbssI"," 1.75",[261,481,482],{"class":267},";\n",[261,484,485,488,490,493],{"class":263,"line":399},[261,486,487],{"class":471},"    --soft-tint",[261,489,475],{"class":267},[261,491,492],{"class":478}," 0.15",[261,494,482],{"class":267},[261,496,497,500,502,505],{"class":263,"line":421},[261,498,499],{"class":471},"    --soft-accent",[261,501,475],{"class":267},[261,503,504],{"class":478}," 0.6",[261,506,482],{"class":267},[261,508,510],{"class":263,"line":509},5,[261,511,512],{"class":267},"}\n",[23,514,516,517],{"id":515},"taille-icon-rail","Taille ",[18,518,519],{},"icon-rail",[14,521,522,523,525],{},"Les tuiles du dock affichent les glyphes à la taille ",[18,524,519],{}," : 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.",[252,527,529],{"className":450,"code":528,"language":452,"meta":257,"style":257},".icon-rail {\n    width: 22px;\n    height: 22px;\n}\n",[18,530,531,539,552,563],{"__ignoreMap":257},[261,532,533,535,537],{"class":263,"line":264},[261,534,459],{"class":267},[261,536,519],{"class":462},[261,538,466],{"class":267},[261,540,541,545,547,550],{"class":263,"line":317},[261,542,544],{"class":543},"sqsOY","    width",[261,546,475],{"class":267},[261,548,549],{"class":478}," 22px",[261,551,482],{"class":267},[261,553,554,557,559,561],{"class":263,"line":399},[261,555,556],{"class":543},"    height",[261,558,475],{"class":267},[261,560,549],{"class":478},[261,562,482],{"class":267},[261,564,565],{"class":263,"line":421},[261,566,512],{"class":267},[252,568,572],{"className":569,"code":570,"language":571,"meta":257,"style":257},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","frappe.utils.icon(\"data-table-soft\", \"rail\");\n","js",[18,573,574],{"__ignoreMap":257},[261,575,576,579,581,584,586,590,593,595,598,600,603,606,609,611,614],{"class":263,"line":264},[261,577,578],{"class":471},"frappe",[261,580,459],{"class":267},[261,582,583],{"class":471},"utils",[261,585,459],{"class":267},[261,587,589],{"class":588},"s2Zo4","icon",[261,591,592],{"class":471},"(",[261,594,282],{"class":267},[261,596,597],{"class":285},"data-table-soft",[261,599,282],{"class":267},[261,601,602],{"class":267},",",[261,604,605],{"class":267}," \"",[261,607,608],{"class":285},"rail",[261,610,282],{"class":267},[261,612,613],{"class":471},")",[261,615,482],{"class":267},[23,617,619],{"id":618},"configurer-licône-dun-module-dans-le-dock","Configurer l'icône d'un module dans le dock",[14,621,622,623,625],{},"Le champ ",[18,624,589],{}," du dock d'un module accepte le nom d'un symbole du sprite, « soft » ou « duotone » :",[252,627,631],{"className":628,"code":629,"language":630,"meta":257,"style":257},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","{\n    \"icon\": \"code-app-soft\",\n    \"link_to\": \"Build\",\n    \"link_type\": \"Sidebar\",\n    \"title\": \"Build\"\n}\n","json",[18,632,633,638,659,678,698,716],{"__ignoreMap":257},[261,634,635],{"class":263,"line":264},[261,636,637],{"class":267},"{\n",[261,639,640,643,645,647,649,651,654,656],{"class":263,"line":317},[261,641,642],{"class":267},"    \"",[261,644,589],{"class":275},[261,646,282],{"class":267},[261,648,475],{"class":267},[261,650,605],{"class":267},[261,652,653],{"class":285},"code-app-soft",[261,655,282],{"class":267},[261,657,658],{"class":267},",\n",[261,660,661,663,666,668,670,672,674,676],{"class":263,"line":399},[261,662,642],{"class":267},[261,664,665],{"class":275},"link_to",[261,667,282],{"class":267},[261,669,475],{"class":267},[261,671,605],{"class":267},[261,673,71],{"class":285},[261,675,282],{"class":267},[261,677,658],{"class":267},[261,679,680,682,685,687,689,691,694,696],{"class":263,"line":421},[261,681,642],{"class":267},[261,683,684],{"class":275},"link_type",[261,686,282],{"class":267},[261,688,475],{"class":267},[261,690,605],{"class":267},[261,692,693],{"class":285},"Sidebar",[261,695,282],{"class":267},[261,697,658],{"class":267},[261,699,700,702,705,707,709,711,713],{"class":263,"line":509},[261,701,642],{"class":267},[261,703,704],{"class":275},"title",[261,706,282],{"class":267},[261,708,475],{"class":267},[261,710,605],{"class":267},[261,712,71],{"class":285},[261,714,715],{"class":267},"\"\n",[261,717,719],{"class":263,"line":718},6,[261,720,512],{"class":267},[14,722,723,724,459],{},"Un module sans icône configurée affiche une tuile-lettre à la taille ",[18,725,519],{},[23,727,729],{"id":728},"icônes-du-dock-et-de-len-tête-de-la-barre-latérale","Icônes du dock et de l'en-tête de la barre latérale",[14,731,732],{},"Comme dans Frappe Framework, chaque module a deux icônes, dessinées dans la même feuille d'icônes :",[43,734,735,751],{},[46,736,737],{},[49,738,739,742,745,748],{},[52,740,741],{},"Emplacement",[52,743,744],{},"Style",[52,746,747],{},"Propriété",[52,749,750],{},"Exemple (Comptabilité)",[59,752,753,774],{},[49,754,755,758,761,769],{},[64,756,757],{},"Tuile du dock",[64,759,760],{},"« soft »",[64,762,763,765,766],{},[18,764,589],{}," de l'entrée, dans ",[18,767,768],{},"\u003Capp>\u002Fdock\u002F\u003Capp>\u002F\u003Capp>.json",[64,770,771],{},[18,772,773],{},"calculator-soft",[49,775,776,779,782,788],{},[64,777,778],{},"En-tête de la barre latérale",[64,780,781],{},"Double ton (deux niveaux de gris)",[64,783,784,787],{},[18,785,786],{},"header_icon",", dans le JSON de la barre latérale du module",[64,789,790],{},[18,791,792],{},"calculator-duotone",[14,794,795],{},"Pour une application :",[797,798,799,805,815],"ol",{},[224,800,801,802,459],{},"Placez les symboles SVG dans une feuille d'icônes, par exemple ",[18,803,804],{},"public\u002Ficons\u002Fmodule-icons.svg",[224,806,807,808,811,812,459],{},"Déclarez cette feuille dans le ",[18,809,810],{},"hooks.py"," de l'application, dans la liste ",[18,813,814],{},"app_include_icons",[224,816,817,818,459],{},"Donnez l'icône « soft » aux entrées du dock et l'icône à double ton à ",[18,819,786],{},[14,821,822,823,825,826,829,830,833],{},"Dokos (ERPNext) contient aussi des animations au survol pour quelques icônes à double ton (",[18,824,792],{},", ",[18,827,828],{},"shopping-cart-duotone","…). Elles ne jouent que sur une tuile du dock qui utilise une icône ",[18,831,832],{},"-duotone",". Les docks livrés utilisent les icônes « soft », comme Frappe Framework : ces animations ne s'affichent donc pas par défaut.",[835,836,837],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}",{"title":257,"searchDepth":264,"depth":317,"links":839},[840,841,842,844,845],{"id":25,"depth":317,"text":26},{"id":207,"depth":317,"text":208},{"id":515,"depth":317,"text":843},"Taille icon-rail",{"id":618,"depth":317,"text":619},{"id":728,"depth":317,"text":729},"Créer et utiliser les icônes de modules monochromes du dock : classes soft-icon, propriétés personnalisées et taille icon-rail.","md",{"reviewed":849,"last_verified":850,"sources":851},true,"2026-11-04",[852,853,854,855,856,857,858,859,860],"frappe@upstream-develop:frappe\u002Fdock\u002Ffrappe\u002Ffrappe.json","dodock@develop:frappe\u002Fbuild\u002Fsidebar\u002Fbuild\u002Fbuild.json","dodock@develop:frappe\u002Fpublic\u002Fscss\u002Fdodock\u002Fdock.scss","dodock@develop:frappe\u002Fpublic\u002Fjs\u002Ffrappe\u002Fui\u002Fsidebar\u002Fdock.js","dokos@develop:erpnext\u002Fpublic\u002Ficons\u002Fmodule-icons.svg","dodock@develop:frappe\u002Fpublic\u002Ficons\u002Fmodule-icons.svg","dodock@develop:frappe\u002Fpublic\u002Fscss\u002Fcommon\u002Ficons.scss","dodock@develop:frappe\u002Fdock\u002Ffrappe\u002Ffrappe.json","dodock@develop:frappe\u002Fpublic\u002Fjs\u002Ffrappe\u002Futils\u002Futils.js","\u002Fnext\u002Fdodock\u002Fdeveloppeurs\u002Ficones-modules-douces",{"title":5,"description":846},"2.next\u002F3.dodock\u002F10.developpeurs\u002Ficones-modules-douces","-m7sP4AdlsqcutPamxkvMeek-DKRT8wVq5dF1aU6jtM",{},1793871745824]