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 ( two ) { 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.

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.

Default: false - with true removes all stroke 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" )
         . replace ( / { / g ,  "%7B" )
         . replace ( / } / g ,  "%7D" ) ;
 }

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

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