svg-sass
SVG inline encoding for SCSS content or background-image attributes
Last updated 2 years ago by entozoon .
ISC · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install svg-sass 
SYNC missed versions from official npm registry.

SVG Sass

SVG inline encoding for your SCSS content or background-image attributes.

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.

Current Tags

  • 1.0.5                                ...           latest (2 years ago)

6 Versions

  • 1.0.5                                ...           2 years ago
  • 1.0.4                                ...           2 years ago
  • 1.0.3                                ...           2 years ago
  • 1.0.2                                ...           2 years ago
  • 1.0.1                                ...           2 years ago
  • 1.0.0                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 1
This Month 1
Last Day 0
Last Week 0
Last Month 0
Dependencies (0)
None
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |