Pass hex color to fill svg in background url (SCSS)
Passing svg into background url might be useful for eg. in case of dropdown arrow selects.

but there is a problem if you want to pass dynamically color to fill that svg.
url is not accepting #
from that hex.
I found that if we use
@use "sass:string";
@use "sass:color";
we can build something similar to encodeURI
@function escape-url-hex-color($hex_color) {
$ie-color-string: color.ie-hex-str($hex_color);
$string: string.quote($ie-color-string);
$color: string.slice($string, 4);
@return '%23' + $color;
}
then we can easily use it to set color variable and pass it to fill attribute.
Tweet