PostCSS plugin to encode background-image SVGs for cross browser compatibility.
Background image SVGs are great but they don't render on IE unless encoded properly.
Write your background as you usually would:
/* Input example */
background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg"></svg>');
This encoder will then take your readable SVG and return a UTF-8 cross browser encoded solution like so:
/* Output example */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3C/svg%3E");
yarn add postcss-encode-background-svgs
npm install postcss-encode-background-svgs
postcss([require('postcss-encode-background-svgs')()])
See the PostCSS docs for examples for your environment.
Once included in your environment, the plugin will search for any scss value with data:image/svg+xml
.
Big thanks for Vasi and Rob for their help with the Regex.
MIT © Chris Boakes