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

What is Framer? Join the Community
Return to index
Taylor Rogalski
Posted Jun 11 - Read on Facebook

This seems stupid-simple so apologies if I missed some documentation somewhere - but does Framer not allow style properties to be added to states? Or is there a different syntax required here? (btn.fill does not work in either case)

I'm trying to create a reusable button module where I can conditionally swap out the rendered SVG icon + change its fill color.

12 Comments

Taylor Rogalski

The error shown is "unexpected . "

George Kedenburg III

States can only contain layer properties (x, y, opacity, etc), not CSS styles. I think Koen mentioned this was on the roadmap but I'm not 100%.

Aaron Carámbula

Is fill the same as layer.backgroundColor?

Taylor Rogalski

Nay - Fill colors SVGs, backgroundColor does not.

Aaron Carámbula

So advanced. This is maybe a case for icon fonts.

Jasper Hauser

Aaron Carámbula are good tools/services to create an icon font?

George Kedenburg III

Jasper I like http://fontastic.me personally

George Kedenburg III

although I bet theres something clever we could do here with a regular framer layer and using the SVG as a mask...

Koen Bok

To be honest this exact error (unexpected .) is because the key of you object contains a period "style>.<fill".

Taylor Rogalski

Yes, true - but is there a working way to add a style.fill change to a state?

Koen Bok

Nope, as said above, states can currently only contain numeric layer properties. We're working on improving that.

Giacomo Alonzi

Koen Bok hi koen, some improvement for svg? thank you!

Read the entire post on Facebook