rework-svg

rework-svg

rework-svg

svg() rework CSS preprocessor plugin

The plugin inlines SVG files into CSS as data-URIs while making it possible to style the contents using CSS as it would be possible with SVG files embedded via <img>.

<svg>
  <path id="p1" fill="#000000" d="M…" />
  <path id="p2" fill="#000000" d="M…" />
</svg>
var svg = require('rework-svg');
 
var css = rework(css_code);
css.use(svg());
/* SVG file inlined */
div {
  background-image: url('./img/icon.svg') svg();
}
 
/* SVG file inlined
 - all paths filled red
 */
div {
  background-image: url('./img/icon.svg') svg({
    path { fill#FF0000; }
  });
}
 
/* SVG file inlined
 - the fist path filled green
 - the second path filled red
 */
div {
  background-image: url('./img/icon.svg') svg({
    path#p1 { fill#00FF00; }
    path[id="p2"] { fill: #FF0000; }
  });
}
tagname { }
tagname#id { }
tagname[attr="value"] { }
tagname#id[attr="value"] { }

Any property/value pair specified in the sub-stylesheet passed to svg() modifies/adds an attribute to the selected elements.