[Tutorial] How to add your custom svg icon to Workspace Frappe v15

Frappe Framework App Development
,
1

1. SVG code format (a snowflake :snowflake:):

<svg id="frappe-symbols" aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" class="d-block" xmlns="http://www.w3.org/2000/svg">
	<symbol id="icon-hvac" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
    <path d="M10.73,7.63c0,1.66-1.39,3-3.1,3s-3.1-1.34-3.1-3,1.39-3,3.1-3,3.1,1.34,3.1,3ZM7.62,4.63V.12M7.63,2.6L9.82.48M7.62,2.6L5.43.48M4.94,6.13L.9,3.88M3.12,5.11l-.8-2.89M3.12,5.11L.13,5.89M4.94,9.13L.9,11.38M3.12,10.14l-3-.78M3.12,10.14l-.8,2.89M7.62,10.63v4.5M7.62,12.65l-2.19,2.12M7.63,12.65l2.19,2.12M10.31,9.13l4.03,2.25M12.13,10.14l.8,2.89M12.13,10.14l3-.78M10.31,6.13l4.03-2.25M12.13,5.11l3,.78M12.13,5.11l.8-2.89"  stroke="var(--icon-stroke)" stroke-linecap="round" stroke-linejoin="round"/>
  </symbol>
</svg>
  • The svg tag seems mandatory as it looks like it is referenced somewhere else by id="frappe-symbols.
  • The symbol seems mandatory as well and used to integrate your icon with the set of default icon symbols list when you make a Workspace.
  • Note that the id atrribute in symbol tag is used in the presented list when creating a custom Workspace as the icon’s name.
  • Your icon could be placed within the symbol tag. It could be more complicated and made up of many path tags. Obviously the attribute stroke="var(--icon-stroke) will use Frappe native icons style. If you prefer, you can use other stroke and fill colors;e.g. stroke="#29ABE2" fill="#FFFFFF".
  • Place your SVG in your_app/public/icons directory.

2. hooks.py

  • There is already a placeholder to load your custom icon: app_include_icons.
  • You could load as many just comma saparate them within square brackets [ ].
  • Note the path is relative to the sites/assets/ directory. So it would be `app_name/icons/your-icon.svg

3. Build your app assets

  • bench build --app app_name.

4. Result

image
image290×937 26.5 KB

That’s it.

8 Likes