Stylelint shows "Unexpected URL scheme "data" if I use SVGs as background in my CSS

I'm using some SVG images in the CSS file like this:

background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23637581' d='M101.3 141.6v228.9h309.5V141.6H101.3zm274.4 26.2L256 259.3l-119.6-91.5h239.3zm-248.1 26.3l64.1 49.1-64.1 64.1V194.1zm.2 150.1l84.9-84.9 43.2 33.1 43-32.9 84.7 84.7H127.8zm256.6-36.4L320 243.4l64.4-49.3v113.7z'/%3E%3C/svg%3E");

It works. However Stylelint is complaining with this error:

Unexpected URL scheme "data:"   function-url-scheme-disallowed-list

Does anyone know how to fix the URL to get rid of the stylelint error?

Solution

Stylelint is only complaining about the data scheme because it's been configured to do that via the function-url-scheme-disallowed-list rule. There's nothing wrong with the URL, and disallowing the data scheme is purely a preference.

Neither of the official configs turn this rule on. Either you or the author of the 3rd party config you're extending has turned it on and configured it to disallow the data scheme.

You'll either need to:

find out why that is, and use whatever alternative is suggested
turn the rule off or configure it allow the data scheme