Custom icon for flutter app show this error of convert to compound path manually

Question

I am making a custom icon to use in flutter application. When i upload my svg to customicon website it shows me error of convert to compound path manually If image looks not as expected please convert to compound path manually. Skipped tags and attributes: fill. I also shared the screenshot of it. Can you please tell me how can i make my custom icon using svg and why this error shows?

Answer 1

It seems that https://www.fluttericon.com can only generate single path svg. If you have two paths (you need to have two paths to have a fill property) it won't work.

Moreover, I was using material icons from https://material.io/resources/icons, and it seems that some of the icons have a border as default which is not filled thus not needed.

If you have a similar svg file with a border you can delete the border path and it will be as desired.

For example;

Downloaded svg from https://material.io/resources/icons (drag_indicator):

<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>

Modified svg that works:

<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>

At the end of the day, if you have a border path (usually its the case) then you can remove it and it will work fine.

Answer 2

Upload your SVGs here:

https://jakearchibald.github.io/svgomg/

it removes unsupported SVG features for font. download it, then upload it FlutterIcons. the SVG renders properly.