Nightly Procrastination Machine
    Wondering what’s next for npm?Check out our public roadmap! »

    postcss-encode-background-svgs

    1.0.4 • Public • Published

    PostCSS Encode Background SVGs

    Build Status Code Coverage StyleCI npm version

    PostCSS plugin to encode background-image SVGs for cross browser compatibility.

    The Problem

    Background image SVGs are great but they don't render on IE unless encoded properly.

    The Solution

    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"); 

    Installation

    yarn

    yarn add postcss-encode-background-svgs

    npm

    npm install postcss-encode-background-svgs

    Usage

    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.

    Credits

    Big thanks for Vasi and Rob for their help with the Regex.

    MIT © Chris Boakes

    Install

    npm i postcss-encode-background-svgs

    DownloadsWeekly Downloads

    160

    Version

    1.0.4

    License

    MIT

    Unpacked Size

    68.4 kB

    Total Files

    20

    Last publish

    Collaborators

    • avatar