gulp-embed-svg-inline

Convert svg to base64 and embed image to css

Install

npm install --save-dev gulp-embed-svg-inline

Usage

var gulp = require('gulp');
var inlineSvg = require('./index.js');
var concat = require('gulp-concat');

gulp.task('default', function(done) {
  return gulp.src('./icons/*.svg')
    .pipe(inlineSvg({
      className: function(name) {
        return '.icon. ' + name;
      }
    }))
    .pipe(concat('icons.css'))
    .pipe(gulp.dest('./dist'));
});

The above example generate icons.css. Include it to your project and start using svg icon like this:

<div class='icon pattern_01'></div>

Update class name

Define your own icon class name by using className options. You can use mask .icon .%s or a function.

Example using function:

...
.pipe(inlineSvg({
  className: function(name) {
    let hover = name.indexOf('hover');
    if (hover !== -1) {
      return '.icon. ' + name.substr(0, hover) + ':hover';
    } else {
      return '.icon. ' + name;
    }

  }
}))

Example using mask string:

...
.pipe(inlineSvg({
  className: '.icon .%s'
}))