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
andmode.<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
andmode.<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.