gulp-svg-inline-css v1.3.3

gulp-svg-inline-css

Colorize, styling SVG icons and converting into base64-encoded data URI strings

##Install npm install gulp-svg-inline-css

##Basic usage

var gulp = require('gulp'),
    concat = require('gulp-concat'),
    svg = require('gulp-svg-inline-css');

gulp.task('style-svg', function() {
  gulp.src('/path/to/*.svg')
    .pipe(svg({
      style: {
        fill: '#E08283'
      }
    }))
    .pipe(concat('sprites.css'))
    .pipe(gulp.dest('styles/'));
})

##Styling Just add key: value pairs like this

...
.pipe(svg({
  style: {
    fill: '#E08283',
    stroke: '#674172',
    strokeWidth: 1
  }
}))
...

All available style options you can find at https://www.w3.org/TR/SVG/painting.html

*camelCase keys will be transformed into dash-splitted ** inline style will be added for all elements in this list path,rect,circle,ellipse,line,polyline,polygon,g,text

##Class names By default defined this mask .icon.%s where %s is file name without extension. You can define your own rules for building class name's, just add className key into build options:

...
.pipe(svg({
  //bem like style
  className: '.icon.icon--%s:hover',
  style: {...}
}))
...

or use callback

.pipe(svg({
  className: function(fileName) {
    return '.' + fileName.replace(/[^A-Za-z0-9_-]/g, '-').toLowerCase();
  },
  style: {...}
}))

##Optimize SVG For optimizing and compress use gulp-svgmin https://www.npmjs.com/package/gulp-svgmin

var gulp = require('gulp'),
    concat = require('gulp-concat'),
    svgmin = require('gulp-svgmin'),
    svg = require('gulp-svg-inline-css');

gulp.task('style-svg', function() {
  gulp.src('/path/to/*.svg')
    .pipe(svgmin())
    .pipe(svg({
      style: {
        fill: '#E08283'
      }
    }))
    .pipe(concat('sprites.css'))
    .pipe(gulp.dest('styles/'));
})

##Rasterize SVG If you add param raw: true, plugin just add styles without base64 encoding and css transforms. Options heigth and width avail for image scaling. Here simple example how you can rasterize svg icons and save as png files

var gulp = require('gulp'),
    svgmin = require('gulp-svgmin'),
    raster = require('gulp-raster'),
    rename = require('gulp-rename'),
    svg = require('gulp-svg-inline-css');

gulp.task('inline-svg', function() {
  gulp.src('*.svg')
    .pipe(svgmin())
    .pipe(svg({
      raw: true,
      width: 48,
      height: 48,
      style: {
        fill: '#E08283'
      }
    }))
    .pipe(raster())
    .pipe(rename({
      extname: '.png'
    }))
    .pipe(gulp.dest('processed/'));
});