These SVGs are blank (from Figma)

[Reony Tonneyck]

I've exported these SVGs from a new and upcoming design tool called Figma. When I import them in Icomoon, they are blank. Would you be able to tell why? They show up in the browser fine though, if I open them in a new tab.

I've attached a zip file with them. Thanks!

[Reony Tonneyck]

Here is a screenshot of their support team's chat with me. Apparently they looked into Icomoon, and are saying that it doesn't support a lot of the SVG specs:

[Reony Tonneyck]

If you tweet to @soleio or @zoink you can definitely get an invite. You guys are well known, so I'm sure they would respond quickly. This would be ideal so you have direct access to Figma and can test/debug from there. 👍

[Keyamoon]

Please refresh and try again.

Your "meter" icon has overlapping shapes. They need to be "united" into one shape.

[al...@figma.com]

I can't speak for all of the import issues, but the one problem I looked at seems to be lack of use/defs support. Figma uses that to share paths, effects, and other svg elements and keep the large chunks out of the layers. When I embed the paths into the layers, then the icons import properly.

icomoon seems pretty cool, and lack of SVG and SVG 2 feature support is a problem across the industry and browsers. The spec is quite broad, but I think just inlining use/defs blocks on import might fix your importer or handling use/defs. For example, images end up being a lot better in the defs blocks so they're not repeated.

[Keyamoon]

use/defs are supported. There was just a bug that was fixed.

[Reony Tonneyck]

Oh awesome!! Thanks so much! I'll refresh and try again. Yeah the meter icon I know was a bit messed up, didn't mean to focus on a particular one.

[Reony Tonneyck]

It works now! You're always super responsive and on top of things. Really appreciate it. you rock! 🤘