svg-sass
v2.0.0
Published
SVG inline encoding for SCSS content or background-image attributes
Downloads
272
Readme
SVG Sass
SVG inline encoding for your SCSS content or background-image attributes.
Install
npm i svg-sass
Include
// With a suitable path
@import "./node_modules/svg-sass";
// Or with webpack:
@import "~svg-sass";
Usage
Encode your SVG XML into as CSS-friendly format, like so:
.foo {
content: svg('<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 160 160">
<circle cx="80" cy="80" r="80" fill="red" />
</svg>'
);
Similarly, with a background image:
.foo {
background-image: svg('<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 160 160">
<circle cx="80" cy="80" r="80" fill="red" />
</svg>'
);
Or if you prefer the mixin style:
.foo {
@include svg('<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 160 160">
<circle cx="80" cy="80" r="80" fill="red" />
</svg>', background-image);
Features
- Minifies SVG content
- Scraps newlines where possible
Troubleshooting
Strange encoding issues? Try upgrading your node-sass version and encoding your files with LF EOLs.