search

davidkpiano / sass-svg

Inline SVG for Sass.
314 stars 18 forks source link

Convert external SVG file to inline SVG? #6

Open ronnyandre opened 8 years ago

ronnyandre commented 8 years ago

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

davidkpiano commented 8 years ago

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');
}
fabiocaccamo commented 8 years ago

Could you add the possibility to do something like this?

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