gulp-svg-inline-css

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

Usage no npm install needed!

<script type="module">
  import gulpSvgInlineCss from 'https://cdn.skypack.dev/gulp-svg-inline-css';
</script>

README

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