postcss-inline-svg
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/postcss-inline-svg package

    5.0.0 • Public • Published

    postcss-inline-svg Build Status

    PostCSS plugin to reference an SVG file and control its attributes with CSS syntax.

    @svg-load nav url(img/nav.svg) {
        fill: #cfc;
        path:nth-child(2) {
            fill: #ff0;
        }
    }
    .nav {
        background: svg-inline(nav);
    }
    .up {
        background: svg-load('img/arrow-up.svg', fill=#000, stroke=#fff);
    }
    .nav {
        background: url("data:image/svg+xml;charset=utf-8,%3Csvg fill='%23cfc'%3E%3Cpath d='...'/%3E%3Cpath d='...' fill='%23ff0'/%3E%3Cpath d='...'/%3E%3C/svg%3E");
    }
    .up {
        background: url("data:image/svg+xml;charset=utf-8,%3Csvg fill='%23000' stroke='%23fff'%3E...%3C/svg%3E");
    }

    PostCSS parsers allow to use different syntax (but only one syntax in one svg-load() definition):

    .up {
        background: svg-load('img/arrow-up.svg', fill: #000, stroke: #fff);
    }
    .down {
        background: svg-load('img/arrow-down.svg', fill=#000, stroke=#fff);
    }

    Usage

    postcss([ require('postcss-inline-svg')(options) ])

    See PostCSS docs for examples for your environment.

    Options

    options.paths

    Array of paths to resolve URL. Paths are tried in order, until an existing file is found.

    Default: false - path will be relative to source file if it was specified.

    options.removeFill

    Default: false - with true removes all fill attributes before applying specified. Passed RegExp filters files by ID.

    options.removeStroke

    Default: false - with true removes all stroke attributes before applying specified. Passed RegExp filters files by ID.

    options.encode(svg)

    Processes SVG after applying parameters. Default will be ommited if passed false.

    Default:

    function encode(code) {
        return code
            .replace(/%/g, '%25')
            .replace(/</g, '%3C')
            .replace(/>/g, '%3E')
            .replace(/&/g, '%26')
            .replace(/#/g, "%23")
            .replace(/{/g, "%7B")
            .replace(/}/g, "%7D");
    }

    options.transform(svg, path)

    Transforms SVG after encode function and generates URL.

    options.xmlns

    type: boolean default: true

    Adds xmlns attribute to SVG if not present.

    Frequently asked questions

    Why svg-load() doesn't work and the color still black (or red or whatever)?

    That's because svg-load() overrides attributes only in <svg> element and children inherit that color. But if there is already color on children nothing will be inherited.

    For example

    <svg>
        <path fill="#ff0000" d="..." />
    </svg>

    after inline-svg (fill: #000) will looks like

    <svg fill="#000">
        <path fill="#ff0000" d="..." />
    </svg>

    There are three solutions: to remove that attribute (preferable), to use extended @svg-load notation or to use removeFill option.

    How to optimize svg on build step?

    There is a plugin. :)

    You are able to add postcss-svgo in your PostCSS plugins list which will detect every URL which contains data SVG URI and minify via svgo.

    postcss([
        require('postcss-inline-svg'),
        require('postcss-svgo')
    ])

    Or if you use cssnano your SVG URLs already minified as cssnano includes postcss-svgo.

    postcss([
        require('postcss-inline-svg'),
        require('cssnano')
    ])

    License

    MIT © Bogdan Chadkin

    Support on Beerpay

    Hey dude! Help me out for a couple of 🍻!

    Beerpay Beerpay

    Install

    npm i postcss-inline-svg

    DownloadsWeekly Downloads

    57,072

    Version

    5.0.0

    License

    MIT

    Unpacked Size

    19.4 kB

    Total Files

    14

    Last publish

    Collaborators

    • trysound
    • hudochenkov