Extract property from style class in Perspective

Currently I am using some icons as buttons and as far as I can tell the only way to change the icon’s color is to change the ‘color’ property, which is unfortunately outside of the style prop. Is it possible to extract a property from a style class that I set up in Perspective to make things easier for me to keep my icons within my theme, or is my best bet going to be creating a few session props with the colors I want and binding my icon colors to that? Perhaps I am overlooking something much simpler?

You mean setting a style you can use for more icons?

image


image

Yes, except the Stroke color which you are using there will only create an outline of the shape, but I want a way to change the main color of the shape (like how this icon is red)
image
Ideally I would be able to bind the color of the icon to the background color in the style class I use for my buttons, so if I change the color it will propagate to all my buttons, as well as my icon “buttons”, and I only have to change it in 1 place.

Bumping this- has anyone received an answer? I also would like to drive icon fill color with style classes.

You can directly use a style class’s shape.fill to alter the color of icons–the missing ingredient here is that you must ensure the props.color property of the icon is blank for the style sheet to take effect, like so:

The props.color property seems to be an inline override of the applied style sheet under the hood, so if it’s not empty, your style gets overwritten.

1 Like

That works! Looks like deleting the color prop all together doesn’t work, but having an empty color prop works great. Thanks!

1 Like

For future readers. This took me a min to figure out.

CSS is great: CSS Transitions