How to set variable for fill in inline svg bg image or conent? Or is it possible to adapt current-color?

Question

css

There is

background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 23 23'%3E%3Cpath fill='%23686868' d='M20 2c.542 0 1 .458 1 1v17c0 .542-.458 1-1 1H3c-.542 0-1-.458-1-1V3c0-.542.458-1 1-1h17m0-2H3C1.35 0 0 1.35 0 3v17c0 1.65 1.35 3 3 3h17c1.65 0 3-1.35 3-3V3c0-1.65-1.35-3-3-3z'/%3E%3C/svg%3E");

or the same in content, no difference.

for content

content:  url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 23 23'%3E%3Cpath fill='%23686868' d='M20 2c.542 0 1 .458 1 1v17c0 .542-.458 1-1 1H3c-.542 0-1-.458-1-1V3c0-.542.458-1 1-1h17m0-2H3C1.35 0 0 1.35 0 3v17c0 1.65 1.35 3 3 3h17c1.65 0 3-1.35 3-3V3c0-1.65-1.35-3-3-3z'/%3E%3C/svg%3E");

How to replace the color in fill with the color from the variable @brightin less.
Or css variable.
I tried to close quotes, write a variable and open them again, by analogy with js, but it didn’t work.
Or maybe you can use current-color somehow? That would be even better than a variable.

Answer 1

This is not inline svg, inline is when you insert it directly into html <svg>..... </svg>
In less, you can insert a variable like {@bright} lesscss.org/features/#variables-feature
https://codepen.io/anon/pen/MLYLgB?editors=0110