Icon is appearing filled in black

ilikerobots / polyicon

Flutter icon set generator

http://fluttericon.com

MIT License

421 stars 49 forks source link

Icon is appearing filled in black #10

Closed lukepighetti closed 5 years ago

lukepighetti commented 5 years ago

Here is an icon I have made. It is fill only.

This is how it renders in Flutter.

IMG_153F2F81D4EA-1

Here is the SVG file.

delete.svg.zip

Any idea where this issue lies?

shinyford commented 5 years ago

I've seen this problem a lot - basically, it's because Fluttericon (for very good reasons) doesn't understand the stroke and fill semantics of svg, and needs a compound path. (I think.)

I've found it useful to pass any SVGs through icomoon first (https://icomoon.io) which seems to be able to convert most SVG images into a compound path version ideal for FlutterIcon.

lukepighetti commented 5 years ago

Thanks for the help, I'll close this for now and reopen it if necessary!

ilikerobots commented 5 years ago

Thanks @shinyford !

Citaborg commented 4 years ago

I have the same issue. A lot og .svgs exported from Figma are rendered black. This is however only when uploading to fluttericons from Windows 10 (tested: chrome, edge, firefox). Uploading the same .svg from a Mac (tested: safari, chrome, edge) it renders correctly. All tested browsers on both Mac and Windows render the .svg correctly when opened directly.

The deleted-icon in issue above shows the same behaviour. Works fine when uploaded from Mac, rendered black when uploaded from Windows 10.

Cheers, Citaborg