Join the Webstudio community

Updated 3 weeks ago

Using Variables in Custom Code

quick question - how can i use variables in the custom code, like a icon svg?
O
p
9 comments
What's your use case?

generally you would create a binding and use a template string where you interpolate the variables

Plain Text
`<svg .... width="${someVariable}">`
There are two different colors in the svg, which i wanted to fill via variable.
Like from the craft with the foreground-accent.
Attachment
Bildschirmfoto_2025-03-24_um_14.50.46.png
where is the variable coming from? static or via resource?
yes but its a statically defined variable, not fetched remotely
you could also use a css variable for this ... this is why explaining the use case exactly is important
Plain Text
<svg xmlns="http://www.w3.org/2000/svg" fill="var(--purple-5)" viewBox="0 0 16 16"  ....
got it! Thanks a lot for the quick answer oleg!
Add a reply
Sign up and join the conversation on Discord