Package Exports

postcss-inline-svg

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (postcss-inline-svg) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

postcss-inline-svg

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.path

Path to resolve url.

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.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');
}

options.transform(svg, path)

Transforms svg after encode function and generates url.

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" />
</svg>

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

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')
])