gulp-svg-mixer

Gulp plugin for creating SVG sprites.

Installation

npm install gulp-svg-mixer

Usage

const gulp = require('gulp');
const mixer = require('gulp-svg-mixer');

gulp.src('img/*.svg')
  .pipe(mixer())
  .pipe(gulp.dest('build'));

Configuration

sprite.type

Type: string Default: classic

See svg-mixer.spriteType for details.

sprite.filename

Type: string Default: 'sprite.svg'

Name of generated sprite file.

css.filename

Type: string Default: 'sprite-styles.css'

Name of generated CSS file.

css.selector

Type: string Default: '.[symbol-id]'

CSS selector for generate symbol styles. [symbol-id] will be replaced by actual symbol id.

css.aspectRatio

Type: boolean Default: true

Generate aspect ratio CSS styles.

prettify

Type: boolean Default: true

Prettify SVG and CSS output.

Examples

const gulp = require('gulp');
const mixer = require('gulp-svg-mixer');

gulp.src('img/*.svg')
  .pipe(mixer({
    sprite: { type: 'stack', filename: 'stack-sprite.svg' },
    css: { selector: '#[symbol-id]' }
  }))
  .pipe(gulp.dest('build'));

LICENSE

MIT