Hi, I’m trying to upload some SVGs to FontAwesome to serve them as custom icons. However, when uploading I’m stumbling with the error:
This SVG contains strokes that need be expanded.
There were strokes detected in your SVG. You’ll need to convert all shapes to outlines in your source file, re-export the SVG, and try uploading again.
I’m trying to find a function that does this conversion but cannot find it and, to be honest, I don’t understand what exactly this conversion to outlines means for this purpose. The SVGs I’m trying to upload are composed by a few shapes and sometimes masked with other ones.
Can someone point me to the right direction to convert shapes to outlines in Sketch?
Reading your post, and the mention of masks, not sure if the the Font Awesome tool is reading well the way we are exporting Masks in the SVG and therefore, causing issues. Would you mind trying to expand and then flattening those shapes masked and see if that helps?
If you could also share the URL to the Font Awesome tool, and a sample Document, we’d love to take a look at this as well!
I’ve dug a little bit further and apparently the problem arises from the fact that FontAwesome need the SVG to contain only one path and of course if multiples shapes are included then one must find a way to flatten them into one path. For this purpose FontAwsome docs suggest to combine shapes with logical operators, which I’ve done but this hasn’t solved the issue. FontAwesomeTestIcon.sketch (7.6 KB)
So far I was able to solve the problem using Figma by combining shapes with logical operators and then using their function ‘Outline stroke’. I’ve try to replicate the solution in Sketch by applying the logical operators as well and trying to use the ‘Convert to outlines’ function but, no matter what I select, it’s always greyed-out and unavailable.
I’ve attached a Sketch file with 3 testing Artboards, if you want to play around with them. There’s a ‘raw’ version (only the shapes), a combined version (shaped combined with ‘difference operator’) and a masked version (shapes combined with a mask). All combined versions, when exported, cause the issue with FontAwesome.
Hi Raul for trying to figure out this. I’ve tried to upload to FontAwesome an exported SVG from the icon_test artboard, as you instructed but, unfortunately, I keep getting the error “This SVG contains strokes that need be expanded.” I’ve also tried uploading the SVG file you shared with me, just in case, but still produces the same error.
We haven’t had much success trying to replicate this on our end. However, I do know the team is actively looking into some issues with exporting SVG files from the app, and we’ll forward these comments to them.
