gulp-embed-svg-inline

1.1.1 • Public • Published

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'
}))

Package Sidebar

Install

npm i gulp-embed-svg-inline

Weekly Downloads

4

Version

1.1.1

License

ISC

Last publish

Collaborators

  • namtranwd