[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.

11 Likes
2

Thanks for sharing! However, when I edit the svg file to include the symbol tags (I am using Notepad++ for that) the svg renders blank (both when I try to open directly on the browser and on desk.
I am probably messing up something, I just don’t know what :rofl:

3

Sorry, I don’t really know if the icon can be checked without proper helpers on browsers or by any other means. The svg is supposed to be a special class of svg they refer to it as sprite. This is why it is imperative to stick to guidlines I’ve put above. Try to investigate further here on the forum maybe you’ll get a better understanding of what is being done with the tags and attributes. Then search further for ‘svg symbols’ and relevant terms and try to deduce from that search and get to what you want to achieve.

The code above, from what I gathered, will be used by Frappe to get injected into the default set of icons.

4

Thanks, @Ismail_Tabtabai !
Will do. I also tried upgrading to Font Awesome 6 but with no success (and with concerns that it might be overwritten in an update). If I get some insight into this, I will share it here.
I think upgrading to FA6 would be great for everyone. Sort of odd to still have it at 4.7, but I understand there may be a lot of more important features.