Uploading custom icon to add to kit, icon rendered as circle

[lexpostma]

Hi, I'm using the v6 beta combined with the beta for uploading custom icons to a kit. I experienced a bug where an icon was uploaded and rendered as a plain circle, while it was actually a logo inside a circle.

You might want to have a look at it. It's this Coinbase logo I created using your Figma template: coinbase-circle.svg.zip

[tagliala]

Hi @sensibleworld could you please take a look?

[sensibleworld]

Hi there! I'm not at my computer at the moment, so can't be certain, but my hunch is that this is related to an issue we only discovered recently with icons exported from Figma (and relates to the direction paths are drawn in SVG). To get a bit technical, when you have overlapping or subtracted shapes in an SVG, there are two ways they get defined, either as a "non-zero fill rule" or as an "even-odd fill rule". The former is the most universal, the latter is the easiest to create. As you may have guessed, our icon upload feature expects SVGs with a "non-zero fill", but Figma creates them with "even-odd".

Our hope is to ultimately fix this on our end, and to support both types of rules, but in the meantime, I can walk you through prepping an icon in Figma to get it working with our system.

The first thing you'll want to do is install this plugin: https://www.figma.com/community/plugin/771155994770327940/Fill-Rule-Editor

Once installed, you can click on your icon and it will show a little window with the fill-rule highlighted. It will most likely default to "even-odd" (orange). Click on the icon in the window to swap it to "non-zero" (blue), and then click on any paths that aren't being subtracted.

I've attached a quick screen cap video showing it in action.

Let me know if you have any questions, or if I'm completely off the mark. https://user-images.githubusercontent.com/529604/129568428-cb997108-e96e-4985-a6f7-090a8d221977.MOV

[lexpostma]

Perfect, thanks for the plugin recommendation and the clear screen cap. My icon is fixed now. I'll close the issue, assuming you probably already have a fix on your roadmap (as you wrote).

Thanks again!

[tagliala]

Thanks @lexpostma , I will reopen for tracking purposes