npm i @unic/estatico-svgsprite


Static site generator for frontend engineers

by unic

0.0.13 (see all)License:Apache-2.0TypeScript:Not Found
npm i @unic/estatico-svgsprite


Uses svgstore to create a sprite from multiple SVGs.


$ npm install --save-dev @unic/estatico-svgsprite


const gulp = require('gulp');
const env = require('minimist')(process.argv.slice(2));

 * SVG spriting task
 * Uses svgstore to create a sprite from multiple SVGs
 * Using `--watch` (or manually setting `env` to `{ watch: true }`) starts file watcher
 * When combined with `--skipBuild`, the task will not run immediately but only after changes
gulp.task('media:svgsprite', () => {
  const task = require('@unic/estatico-svgsprite');

  const instance = task({
    src: {
      base: './src/assets/media/svg/**/*.svg',
      demo: './src/demo/modules/svgsprite/svg/*.svg',
    srcBase: './src',
    dest: './dist/assets/media/svgsprite',
  }, env);
  // Don't immediately run task when skipping build
  if (env.watch && env.skipBuild) {
    return instance;

  return instance();

Run task (assuming the project's package.json specifies "scripts": { "gulp": "gulp" }): $ npm run gulp svgsprite

See possible flags specified above.


import loadSvgSprites from '@unic/estatico-svgsprite/lib/loader';

document.addEventListener('DOMContentLoaded', loadSvgSprites());

Add config to template:

<body data-svgsprites-options='["/assets/media/svgsprite/main.svg", "/assets/media/svgsprite/demo.svg"]'>


plugin(options, env) => taskFn


src (required)

Type: Object
Default: null

Each property is passed to gulp.src, the key is used for the generated sprite's name.

srcBase (required)

Type: String
Default: null

Passed as base option to gulp.src.

dest (required)

Type: String
Default: null

Passed to gulp.dest.


Type: Object
Default: null

Passed to file watcher when --watch is used.


Type: Object


Type: Object

  inlineSvg: true,

Passed to gulp-svgstore.


Type: Object

svgo: {
  plugins: [
      cleanupIDs: {
        remove: false,
      cleanupNumericValues: {
        floatPrecision: 2,
      removeStyleElement: true,
      removeViewBox: false,
  multipass: true,

Passed to imagemin-svgo via gulp-imagemin. Setting to null will disable this step. Otherwise it will run before piping the files to svgstore.

NOTE: Unless you pass a function instead of an object with your custom options, they are deep-merged into the defaults. So to overwrite removeViewBox: false above, you would have to pass svgo: { plugins: [{}, {}, {}, { removeViewBox: true }] }


Type: { info: Function, debug: Function, error: Function }
Default: Instance of estatico-utils's Logger utility.

Set of logger utility functions used within the task.


Type: Object
Default: {}

Result from parsing CLI arguments via minimist, e.g. { dev: true, watch: true }. Some defaults are affected by this, see above.


Apache 2.0.

No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

No reviews found
Be the first to rate