Need help with postcss-inline-svg?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

TrySound
421 Stars 28 Forks MIT License 143 Commits 11 Opened issues

Description

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

Services available

!
?

Need anything else?

Contributors list

# 1,711
minific...
svgo
coffees...
mjml
108 commits
# 7,510
CSS
Sublime...
lint
Markdow...
15 commits
# 408,247
HTML
Node.js
netcat
pipe
3 commits
# 521,337
JavaScr...
CSS
Shell
1 commit
# 22,186
Objecti...
iOS
icloud
directo...
1 commit

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, '%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
 element and children inherit that color.
But if there is already color on children nothing will be inherited.

For example

    

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

    

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 :beers:!

Beerpay Beerpay

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.