gulp.spritesmith to supress "icon-" prefix in the generated css file

Question

I am using gulp.spritesmith to automate sprite image and css generation. All works good except the generated css is haivng "icon-" prefix. I don't want to add this prefix as I have existing HTML markup and I don't want to change the markup. Following 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
});

Following 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 to supress "icon-".

score 27 · Answer 1 · answered Oct 01 '15 at 11:32

27

You can alternatively use the cssSelector of the library.

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

answered Oct 01 '15 at 11:32

bekos

1,303
1
13
11

I feel like this should be the preferred answer. Much nicer way of handling that via configuration options. – ŁukaszBachman Oct 13 '15 at 11:06

score 2 · Accepted Answer · answered Jul 11 '15 at 14:52

2

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

Last line of your sprite task would become

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

answered Jul 11 '15 at 14:52

psalaets

707
3
9

2

Thanks. Good to know about replace module. it worked. I have also tried following option which worked too cssOpts: { cssSelector: function (sprite) { return '.' + sprite.name; } } – joy Jul 11 '15 at 22:27

gulp.spritesmith to supress "icon-" prefix in the generated css file

2 Answers2