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