svgtocss

Converts SVG files and embed them into CSS / SASS

Usage no npm install needed!

<script type="module">
  import svgtocss from 'https://cdn.skypack.dev/svgtocss';
</script>

README

SvgToCSS

Build Status

The idea behind this module came from the work made for aditollo/grunt-svgzr and the probably-dont-base64-svg article

I've decided to separate the URI / base64 svg renderer to generate CSS / SCSS sprites from SVG files.

Usage

var svgtocss = require('svgtocss');

svgtocss.encode(['file1.svg', 'file2.svg'], options, function() {
    console.log('all done!');
})

This task would have created a css file like this

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