@hidoo/gulp-task-build-sprite-svg

Task that build svg sprite sheet for gulp.

Installation

$ npm install --save-dev gulp@next @hidoo/gulp-task-build-sprite-svg

Usage

import {task} from 'gulp';
import buildSprite from '@hidoo/gulp-task-build-sprite-svg';

task('sprite', buildSprite({
  src: '/path/to/sprite/*.svg',
  destImg: '/path/to/dest/image',
  destCss: '/path/to/dest/css',
  imgName: 'sprite.svg',
  cssName: 'sprite.styl',
  imgPath: './image/sprite.svg'
}));

API

svgo

svgo plugins for imagemin

Type: Function

Examples

import {svgo} from '@hidoo/gulp-task-build-sprite-svg';

buildSprite

return build svg sprite sheet task

Parameters

• options Object option (optional, default {})

  • options.name String task name (use as displayName) (optional, default 'build:sprite')
  • options.src String source path
  • options.destImg String destination image path
  • options.destCss String destination css path
  • options.imgName String destination image filename
  • options.cssName String destination css filename
  • options.imgPath String destination image path in css
  • options.padding Number padding between image in sprite sheet (optional, default 2)
  • options.layout String layout for generate sprite sheet（one of [packed|vertical|horizontal]） (optional, default 'packed')
  • options.cssPreprocessor String type of css preprocessor (one of [stylus|sass|sass:module]). (optional, default 'stylus')
  • options.cssTemplate String Handlebars template for css. options.cssPreprocessor is ignored if this value is specified. see: default template (optional, default path.resolve(__dirname,'../template/stylus.hbs'))
  • options.cssHandlebarsHelpers Object Handlebars helpers (optional, default require('@hidoo/handlebars-helpers'))
  • options.compress Boolean compress file or not (optional, default false)
  • options.compressOptions Array? compress options. see: DEFAULT_OPTIONS. see: gulp-imagemin
  • options.verbose Boolean out log or not (optional, default false)

Examples

import {task} from 'gulp';
import buildSprite, {svgo} from '@hidoo/gulp-task-build-sprite-svg';

task('sprite', buildSprite({
  name: 'sprite:main',
  src: '/path/to/sprite/*.svg',
  destImg: '/path/to/dest/image',
  destCss: '/path/to/dest/css',
  imgName: 'sprite.svg',
  cssName: 'sprite.styl',
  imgPath: './path/from/css/to/sprite/sprite.svg',
  padding: 10,
  layout: 'vertical',
  cssPreprocessor: 'sass',
  cssTemplate: '/path/to/template/sass.hbs',
  cssHandlebarsHelpers: {hoge: (value) => value},
  compress: true,
  // Default for this options
  compressOptions: [
    svgo()
  ],
  verbose: true
}));

Returns Function<Stream>

Test

$ yarn test

License

MIT