How to avoid using the default selector prefix

[kbroich]

I'm trying to generate the svg sprites with a selector that would work like this:

<i class="icon-arrow-right"></i>

However, there doesn't seem to be a way to disable the CSS class "icon" which is prefixed forcing the markup to look like this:

<i class="icon icon-arrow-right"></i>

I did try setting the "common" attribute to blank but that just ended up giving me errors. Here's my the relevant section from my gulp file:

gulp.task('sprites', function() {
    return gulp.src(cfg.sourceDir + '/icons/*.svg')
        .pipe(svgSprite({
            baseSize: 14,
            selector: 'icon-%f',
            common: '',
            cssFile: 'scss/base/_sprite.scss'
        }))
        .pipe(gulp.dest(cfg.sourceDir));
});

Is there a way to prevent the use of the "icon" class prefix altogether?

Thanks!

[soenkekluth]

@kbroich if you don't want to use a class as common maybe try: common: '[class*="icon-"]' if that won't work you can easily write your own template. - but i guess the solution will work. a general identifier is needed to not redundantly duplicate every bit for each common attribute of your icons.

please tell me if it works. i will assign the ticket to you ;)

[kbroich]

Actually I did create my own template and removed the prefix. Works great!

Thanks for the help and keep up the good work.