gulp-sprite-datauri

Gulp task to convert images to sass variables in datauri format

Based on Davemo's (https://github.com/davemo) brilliant grunt plugin grunt-datauri-variables (https://www.npmjs.com/package/grunt-datauri-variables) but rebuilt from the ground up for gulp.

Feed in images and this creates a .scss file with variables for each image.

return gulp.src('sprite/*.+(jpeg|jpg|png|gif|svg)')
    .pipe(
        gulpSpriteDatauri({
            fileName: '_sprites.scss'
        })
    )
    .pipe(gulp.dest('sass/partials'));

If you want to autogenerate different colored SVGs you can also pass in an object called colors. To apply them add .colors to the end of your filename followed by a hyphen-seperated list of color names (which should match up to the colors in your gulpfile). Eg. 'myicon.colors-white-blue.svg' will generate variables for the original color and then also a version where all colors had been replaced with white, and one where all colors have been replaced with blue.

return gulp.src('sprite/*.+(jpeg|jpg|png|gif|svg)')
    .pipe(
        gulpSpriteDatauri({
            fileName: '_sprites.scss',
            colors: {
                white: '#ffffff',
                blue: '#0000ff'
            }
        })
    )
    .pipe(gulp.dest('sass/partials'));