https://github.com/kajyr/SvgToCSS
renders SVG in CSS file using data URIs or base64
https://github.com/kajyr/SvgToCSS
Last synced: 5 months ago
JSON representation
renders SVG in CSS file using data URIs or base64
- Host: GitHub
- URL: https://github.com/kajyr/SvgToCSS
- Owner: kajyr
- Archived: true
- Created: 2015-02-07T17:01:29.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2016-05-23T10:51:35.000Z (almost 10 years ago)
- Last Synced: 2025-10-05T14:17:51.767Z (6 months ago)
- Language: JavaScript
- Size: 35.2 KB
- Stars: 2
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- fucking-awesome-wpo - SvgToCSS - Optimizes and renders SVG files in CSS / Sass sprites. (Generators / Meetups)
- awesome-wpo - SvgToCSS - Optimizes and renders SVG files in CSS / Sass sprites. (Generators / Meetups)
README
# SvgToCSS
[](https://travis-ci.org/kajyr/SvgToCSS)
The idea behind this module came from the work made for [aditollo/grunt-svgzr](https://github.com/aditollo/grunt-svgzr) and the [probably-dont-base64-svg](http://css-tricks.com/probably-dont-base64-svg/) article
I've decided to separate the URI / base64 svg renderer to generate CSS / SCSS sprites from SVG files.
## Usage
```javascript
var svgtocss = require('svgtocss');
svgtocss.encode(['file1.svg', 'file2.svg'], options).then(function() {
console.log('all done!');
})
```
This task would have created a css file like this
```css
.svg-file1 {
background-image: url('data:image/svg+xml;charset=utf-8, ...');
}
.svg-file2 {
background-image: url('data:image/svg+xml;charset=utf-8, ... ');
}
```
## Options
The options parameter can accept these configs:
+ `base64`: boolean, should compress image in base64? (default: false)
+ `cwd`: string, the directory to output files (default: './')
+ `style`: string, css or scss. That changes the output syntax.
+ `sprite`: string, the file to output. (default: 'svg.css')