Using Variables in Custom Code

At a glance

The community members are discussing how to use variables in custom code, specifically for an SVG icon. One community member suggests using a template string to interpolate variables, such as width="${someVariable}". Another community member wants to use variables to set the colors of the SVG. The discussion explores whether the variables are static or fetched remotely, and a community member suggests using CSS variables as a solution. The final response includes an example of using a CSS variable to set the fill color of the SVG.

ppaso_sb

quick question - how can i use variables in the custom code, like a icon svg?

9 comments

OOleg Isonen

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}">`

ppaso_sb

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

OOleg Isonen

where is the variable coming from? static or via resource?

ppaso_sb

global root

OOleg Isonen

yes but its a statically defined variable, not fetched remotely

OOleg Isonen

got it

OOleg Isonen

you could also use a css variable for this ... this is why explaining the use case exactly is important

OOleg Isonen

Plain Text

<svg xmlns="http://www.w3.org/2000/svg" fill="var(--purple-5)" viewBox="0 0 16 16"  ....

ppaso_sb

got it! Thanks a lot for the quick answer oleg!

Add a reply

Join the Webstudio community

Using Variables in Custom Code