how to manipulate an svg stroke (or fill) colour with custom properties?

[yotamguttman]

this is an icon I designed and exported in .svg. when I used in on Penpot to design the website, I could simply change the stroke colour (and width) of the icon as I pleased, thanks to it being an SVG file. how can I do the same thing in Webstudio?

I presumed it'd be something in the parent's advanced properties. if I were to code this website I'd probably use stroke. so I tried that but nothing happened.

[kof]

you will have to set on svg attributes inside html embed the stroke or fill depending on what you use to "currentColor" and then set color property on html embed or any parent instance to the desired value

[yotamguttman]

worked like a charm! thank you!

there's one downside, which my be related to the way svg works rather than webstudio, but I couldn't figure out how to make a child (svg), inherit a value of the parent (stroke: red;). I had to make corresponding tokens to each svg colour variant, instead of the svg taking the colour from its parent object, its container (button), which influences the colour of both the text and the background of the button.