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);
}
postcss([ require('postcss-inline-svg')(options) ])
See PostCSS docs for examples for your environment.
Path to resolve url.
Default: false
- path will be relative to source file if it was specified.
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.
Default: false
- with true
removes all fill
attributes before applying specified.
Passed RegExp filters files by id.
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');
}
Transforms svg after encode
function and generates url.
type: boolean
default: true
Adds xmlns
attribute to svg if not present
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.
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')
])
MIT © Bogdan Chadkin