davidkpiano/sass-svg

Convert external SVG file to inline SVG?

Opened this issue ยท 2 comments

Is it possible to load an external SVG resource into inline SVG?

You would have to use a tool such as Sassport or Eyeglass, which allows JS interoperability with Sass. If there is enough interest, I can write a Sassport plugin, which would look like:

var fs = require('fs');
var sassport = require('sassport');

module.exports = sassport.module('svg')
  .functions({
    'inline-svg($file)': sassport.wrap(function(file) {
      return encodeURIComponent(fs.readFileSync(file));
    }
  });

And in the Sass:

@mixin svg-from($file) {
  background-image: url(#{ inline-svg($file) });
}

.foo {
  @include svg-from('my-svg-file.svg');
}

Could you add the possibility to do something like this?

.foo {
    background-image:inline-svg('path/to/my-file.svg', fill='#ff0000', stroke='#000000');
}