Geek Answers Handbook

SCSS variable in background image with SVG image data URI

In the next SCSS, I would like to use a variable fg-colorin an attribute url background-image.

$fg-color: #ff6464;

i.icon-back {
  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='%23ff6464'/></svg>");
}

At the moment, the value of the variable in is simply repeated inside the SVG line, for example:

fill='%23ff6464'

I would like this to automatically update whenever a variable is updated fg-color.

How can i do this?

UPDATE:

This SCSS input:

i.icon-back {
  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='$fg-color'/></svg>");
}

This CSS output:

i.icon-back {
  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='$fg-color'/></svg>");
}

... it's exactly the same - the variable is not being processed.

Note:

I examined these questions, which seem to be similar but not the same:

+7
source share
3 answers

SASS. (ab) , ( "#" ) '%23' (URL- '#').

@function url-friendly-colour($colour) {
    @return '%23' + str-slice('#{$colour}', 2, -1)
}

- , , , #{}

i.icon-back {
  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='#{url-friendly-colour($fg-color)}'/></svg>");
}

, , , .

. #f00 , red .

+19

, ( ). CSS mask-image :

i.icon-back {
  background-color: $fg-color; 
  mask-image: url('data:image/svg…');
}

CSS-, Edge/IE.

+1

The best decision

// SASS 
$nt-link-color
.circle{
  background: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' style='fill:#{toRGB($nt-link-color)};' width='24' height='28' viewBox='0 0 24 28'><path d='M24 14c0 6.625-5.375 12-12 12s-12-5.375-12-12 5.375-12 12-12 12 5.375 12 12z'></path></svg>")  no-repeat;
}

// FUNCTION
@function toRGB ($color) {
  @return "rgb(" + red($color) + ", " + green($color) + ", " + blue($color)+ ")";
}
0
source

More articles:


All Articles