❤
npm
Sign UpSign In

rework-svg

1.0.0 • Public • Published

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

Usage

<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; }
  });
}

Selectors

tagname { }
tagname#id { }
tagname[attr="value"] { }
tagname#id[attr="value"] { }

Properties

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

Readme

Keywords

none

Package Sidebar

Install

npm i rework-svg

Weekly Downloads

0

Version

1.0.0

License

none

Last publish

Collaborators

  • jankuca
Try on RunKit
Report malware