Problem with svgId

[FauzanKhan]

The svgId property is not working as expected. I'm trying to add 'icon-' prefix to the id of every symbol in the sprite created by the gulpfile below but the symbols only have their file name as their IDs-

var gulp = require('gulp');
var svgSprite = require('gulp-svg-sprite');
var pages = ['home', 'offers', 'plays'];
gulp.task('sprite', function() {
  pages.forEach(function(page){
    gulp.src('svgs/'+page+'/*.svg')
    .pipe(svgSprite( 
      config = {
      mode : {
        symbol : {
          dest : '.',
          sprite : page+'/concatanated.svg',
        }
      },
      svgId : 'icon-%f'
    }
  ))
  .pipe(gulp.dest('svgs/build/'));
  })
});
gulp.task('default', ['sprite']);

[jkphl]

Hi @FauzanKhan,

it seems to me that you are mixing gulp-svg-sprite and gulp-svg-sprites by @shakyshane (which isn't maintained anymore), is that possible? Please see the relevant documentation section for details on how to control the shape ID in gulp-svg-sprite.

Cheers, Joschi

[FauzanKhan]

Hi @jkphl

I'm using gulp-svg-sprite. I was referring to gulp-svg-sprites' documentation to achive what I want, I found that gulp-svg-sprite's mode.<mode>.prefix would allow me to get the desired result. So, I placed prefix : 'icon-' inside my symbol object but still I'm unable to add 'icon-' prefix to the the IDs of the symbol tags in the generated sprite.

Regards Fauzan

[jkphl]

You are still not using the correct configuration options. As I said, please refer to the relevant documentation section. Your config needs to look something like this (untested):

var config = {
    shape {
        id {
            generator: 'icon-%s'
        }
    }
}

[FauzanKhan]

You were right. This solved the issue for me. Thank you.