0

I want to set a backgound-image property, that should contain a CSS variable.

   $stringPrefix = "data:image/svg+xml;utf8,<svg fill='"
    $bg-color = var(--font-color-contrast-high);

    select
      appearance: none
      background-image: url($stringPrefix + $bg-color + "' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>")
      background-repeat: no-repeat

The concetination works, but the browser can't read the output properly:

background-image: url("data:image/svg+xml;utf8,<svg fill='var(--font-color-contrast-high)' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");

I would like to convert the CSS variable into a hex color.

Chrissy
  • 19
  • 1
  • 4
  • `var()` does not work inside `url()`, this might help: https://stackoverflow.com/questions/51395179/svg-fill-with-css-variables – n00b Sep 09 '21 at 13:50

0 Answers0