I have created icon pack for my home devices, but some of it not displayed correctly. It displayed correctly in Figma, Chrome, Github, but not in Home Assistant. What I’m doing wrong?
Link to icons pack - GitHub - PaveLGIL/hass-pg-icons
How it should looks like:
And how it looks in my HA:
Will appreciate for any help.
Post a code of svg for testing.
Nevermind, found a code in the github.
Hi! I am away from PC. Will try to retest it in 9 days, do not remember how it was last time.
Will wait, thank you so much!
what are you using to create your icons? And how are you saving your svg files?
If you’re using inkscape, I suggest you save as the following format:
I’ve dropped your convector-off icon in my custom-icons, and it shows as:
suppose if you’re not seeing that, you js resource is not error-free.
In my custom icons repo, I also have a js resource, with all icons embedded. It is troublesome.
And the reason I made the Custom component (built off Thomas Lovens CC), which allows for simple icon drop in, and does not require an update to the resource for each an every icon addition
the icon picker sees them too:
I’m using Figma to create icons, and tried to change a lot of settings for icons but see this problem every time…( I’m saving it in SVG format every time… But, maybe I need try to use Inscape…
Got it… Can I reuse your code with my icons? I will add link with thanks to your repo, and will write that used your code.
I’ve never used Figma. However a quick google search suggests you need to use an SVG export plugin to save it as an optimized SVG.
I tried to use this plugin, but it not help((
sure, feel free to install the CC, and create the custom_icons folder in your /www
fwiw, I also used Inkscape here FR Sea-level or water-height · Issue #7526 · Templarian/MaterialDesign · GitHub
find it not very obvious yet, but I am completely new to editing these icons myself.
Inkscape does let you d&d those icons sections, so it might help
Thank you so much!
So, looks like I found a problem… svg file contain this rule fill-rule=“evenodd” … But into icon pack I add just ‘d=’ attribute from path… And icon don’t work properly without fill-rule… Not I need to understand how to add icons with this rules…
If you use Optimized SVG, it will always work. This is why I’ve been saying that. Optimized SVG is typically what websites use.
@petro @Mariusthvdb I have finaly solve it! Thank you so much guys! I opened my icons with Inkscape, select graphics, press on Path → Flatten and then export SVG file) And now it works as expected! Thank you so much for your help!
Inkscape is pretty good. I’ve used it exclusively. Takes some time to learn but you can create icons from scratch pretty easily. It even has a built in option to save as Optimized SVG, which will allow HA to load and cache the resource faster.
