gulp-sprite-datauri
v1.0.3
Published
Converts images to sass variables in datauri format
Downloads
13
Readme
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'));