postcss-inline-svg [![CI][build-badge-img]][ci]

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

[PostCSS]: https://github.com/postcss/postcss
[build-badge-img]: https://github.com/TrySound/postcss-inline-svg/actions/workflows/nodejs.yml/badge.svg
[ci]: https://github.com/TrySound/postcss-inline-svg/actions/workflows/nodejs.yml

``postcss
@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);
}
`

`css
.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):

`postcss
.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

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

See [PostCSS] docs for examples for your environment.

$3

#### 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:

`js
function encode(code) {
return code
.replace(/%/g, '%25')
.replace(/ .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

$3

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

`xml



`

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

`xml



`

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

$3

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

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

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

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

License

MIT © Bogdan Chadkin

Support on Beerpay

Hey dude! Help me out for a couple of :beers:!