1

Using the gulp-svg-sprite plugin, I'm able to get an example html which uses the generated svg sprite. There, the <svg>s which <use> the <symbol>s automatically have a class according to the shape ID.

This class is of the form mode.<mode>.prefix (prefix, default value ".svg-%s") + mode.<mode>.dimensions (suffix, default value "-dims").

Is there any way I can get multiple classes for the <svg> in the generated html? It will be so much easier to copy and paste the markup from this file. Eg. <svg class="class1 class2">. gulp-svg-sprite always only produces one class.

I've tried

  • Just leaving a space between my desired class names in both mode.<mode>.prefix and mode.<mode>.suffix. Eg. prefix: "icon-svg %s".
  • Escaping the space (with \), but maybe that doesn't make sense here.
  • Give different classes simultaneously in both mode.<mode>.prefix and mode.<mode>.suffix. Eg. prefix: "icon-svg", dimensions: " icon-%s".

My config object:

var svgSpriteConfig = {
  dest: imagesPath,
  shape: {
    id: {
      separator: '',          // no directory namespacing
      generator: 'icon-%s'    // symbol ID prefix
    }
  },
  mode: {
    symbol: {
      dest: '.',
      inline: true,
      prefix: '',             // class prefix
      dimensions: '%s',       // class suffix
      sprite: './icons-sprite.svg',
      example: true
    }
  }
};

An important point to note: prefix can be empty, but dimensions cannot.

mknd7
  • 21
  • 3

0 Answers0