Is it possible to split symbols wrapped inside on one svg into single files?

[harshes53]

Is it possible to split symbols wrapped inside on one svg into single files?

[TrySound]

@hatchbee This module combines many svg, not splits.

[harshes53]

@TrySound Yes I know that and been using in one of my projects too. Great tool indeed.

But now that I have to change all the font icons in my project and I have 5-6 svg files with lots of symbols in each.

I was wondering if there would be any option/module which could split all the symbols in every files and bundle up into one final svg.

Thanks! This is more of a question rather than issue.

[w0rm]

@hatchbee I don't know such module, you can create it yourself, something like this (not tested):

var cheerio = require('cheerio')
var path = require('path')
var gutil = require('gulp-util')
var Stream = require('stream')

function extractSymbols() {
   var stream = new Stream.Transform({ objectMode: true })

  stream._transform = function transform (file, encoding, cb) {
      var self = this;
      var $ = cheerio.load(file.contents.toString(), { xmlMode: true });
      $('symbol').each(function(idx, symbol) {
          var content = // extract what you need from symbol and wrap in <svg>
          var file = new gutil.File({ path:  $(symbol).attr('id') + '.svg', contents: new Buffer(content) });
          self.push(file);
      }
      cb();
  }

   return stream;
});

Usage:

gulp.task('extract-svg', function () {
  return gulp.src('*.svg')
    .pipe(extractSymbols())
    .pipe(gulp.dest('.'))
})

[harshes53]

@w0rm thanks! Appreciate 👍

[w0rm]

@hatchbee you're welcome, its just a rough idea :)