1

I'm using something like this in my index.scss:

.some-class {
  content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'><path d='M15.477 ... 50.836z' fill='#{$text-muted}'/><path d='M45.3 ... 10h6.1z' fill='#{$text-muted}'/></svg>");
}

But Chrome says to me:

[Deprecation] Using unescaped '#' characters in a data URI body is deprecated and will be removed in M68, around July 2018. Please use '%23' instead. See https://www.chromestatus.com/features/5656049583390720 for more details.

  • If you go to the [URL](https://www.chromestatus.com/features/5656049583390720) the Chrome provides it tells you why it is deprecated. – Wild Beard Jul 02 '18 at 14:25
  • I know the why. I'm asking for what to do in sass. –  Jul 02 '18 at 20:28

1 Answers1

0

You can use str-replace to replace # with %23.

.some-class {
   $urlString: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'><path d='M15.477 ... 50.836z' fill='#{$text-muted}'/><path d='M45.3 ... 10h6.1z' fill='#{$text-muted}'/></svg>");
   content: str-replace($urlString, "#", "%23");
}
Dennis Persson
  • 843
  • 7
  • 23