Gulp.spritesmith to abort the prefix "icon-" in the generated css file

Question

I use gulp.spritesmith to automate sprite creation and css generation. Everything works well, except that the generated css is an icon- icon. I do not want to add this prefix, because I have existing HTML markup, and I do not want to change the markup. Below is my gulp task.

'use strict';
var gulp = require('gulp');
var spritesmith = require('gulp.spritesmith');


gulp.task('sprite', function () {    

    var spriteData =
            gulp.src('./sprite/*.*') // source path of the sprite images
            .pipe(spritesmith({
                imgName: 'sprite.png',
                cssName: 'sprite.css'
            }));

    spriteData.img.pipe(gulp.dest("./css")); // output path for the sprite
    spriteData.css.pipe(gulp.dest("./css")); // output path for the CSS
});

Next up is my generated css.

.icon-icon1 {
  background-image: url(sprite.png);
  background-position: 0px 0px;
  width: 120px;
  height: 120px;
}
.icon-icon2 {
  background-image: url(sprite.png);
  background-position: -120px 0px;
  width: 120px;
  height: 120px;
}

Please help suppress "icon-".

Answer 1

You can use gulp-replace to remove the prefix "icon-".

The last line of your task spritewill become

spriteData.css
  .pipe(replace(/^\.icon-/gm, '.'))
  .pipe(gulp.dest("./css"));

Answer 2

cssSelector .

cssOpts: {
  cssSelector: function (sprite) {
    return '.' + sprite.name;
  }
}