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

What is Framer? Join the Community
Return to index
Vlad Tyschuk
Posted Jul 23 - Read on Facebook

Hi everybody.
Is there a way to change the background color of an icon imported from Sketch?
When I'm doing

ic_favorites.style.backgroundColor = "red"

It changes only background and not the icon itself. Any ideas?

4 Comments

Agisilaos Tsaraboulidis

I would suggest to create 2 icons. The first with the color and the second without it. And you can switch between these two icons when you need it. Hope that it helps 😁

Vlad Tyschuk

Well... There has to be a better way! :) At least I hope...

Dave Crow

The icon itself will be imported as a PNG, so it won't be possible to change the color. You would need to create multiple layers with all the colors you need, then import the Sketch doc, and set states on those layers.

The other option would be to bring the icon in as an SVG. Then you'll have more control. Check out Josh Pucketts SVG Layer module: https://github.com/joshpuckett/FramerModules

It just depends on how much control you need vs how complex you want to make your code. If you only need 2 colors, I would probably just create a duplicate layer in Sketch. But if the icon could be lots of different colors then SVG might make sense.

Vlad Tyschuk

Thanks Dave! I'm reading it now. All icons are svg. So I'm thinking there has to be a way to change color. I'll post here if I come up with better way.

Read the entire post on Facebook