This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Sigurd Tapio Mannsåker
Posted Jul 06 - Read on Facebook

Quick protip for anyone wishing to drag&drop their own SVG icons into Design mode and be able to change the fill:

If you're like me, you export your SVG icons with

a) an empty rectangle the size of the artboard to ensure correct placement when dropped into Sketch etc, and

b) a color applied to the icon so you can also export PNGs from the same artboard.

But to change their color in Design mode, they can't have those two things. It's also generally handy to clean this up for production, and it's the main difference between the "design" and "production" versions of Google's Material icon SVGs. Enter this terminal command, in a folder full of SVG files (original files backed up with .bak extension):

sed -i .bak 's/<path d="[^"]*"[^>]*fill="none"[^>]*>//g ; s/fill="[^"]*"//g' *svg

And you're good to go :)

2 Comments

Eelco Lempsink

Another way to do this (more for individual files) is to use a black fill (#000000) and then use SVGOMG (https://jakearchibald.github.io/svgomg/) with “Multipass” and “Remove useless fill & stroke” enabled.

Herve Mischler

That's all I needed! Thank you Sigurd Tapio Mannsåker … I don't need to open Sketch anymore today ;)

Read the entire post on Facebook