w0rm / gulp-svgstore

Combine svg files into one with symbol elements
https://www.npmjs.com/package/gulp-svgstore
645 stars 33 forks source link

Update README to propose automatic fix for `clipPath` issues #98

Closed stowball closed 4 years ago

stowball commented 5 years ago

I've just ran in to the clipPath issue which is mentioned in the README, so came up with a solution using cheerio which I feel would be good to add to the docs.

The following caters for multiple or no <defs> and <clipPath>s existing within <defs> or not, and combines them all in to 1 <defs> if necessary

.pipe(cheerio({
  run: function ($) {
    const defs = Array.from($('defs').map((i, el) => {
      const html = $(el).html();

      $(el).remove();

      return html;
    })).join('');

    const clipPaths = Array.from($('clipPath').map((i, el) => {
        const html = $.html(el);

        $(el).remove();

        return html;
    })).join('');

    if (defs.length || clipPaths.length) {
      $('svg').prepend(`<defs>${defs}${clipPaths}</defs>`);
    }
  },
  parserOptions: { xmlMode: true }
}))
w0rm commented 4 years ago

@stowball thanks! I think this would grow the readme too much, I updated the readme to link to this solution.