svg-sprite

What is svg-sprite?

The svg-sprite npm package is a powerful tool for creating SVG sprites. It allows you to combine multiple SVG files into a single file, which can then be used to optimize the delivery and performance of SVG assets in web applications. The package supports various modes of sprite generation, including symbol, stack, and CSS sprites, and provides a range of configuration options to customize the output.

What are svg-sprite's main functionalities?

Symbol Sprite Mode

This feature allows you to create a symbol sprite, which is a single SVG file containing multiple symbols. Each symbol can be referenced individually using the <use> element in your HTML.

const svgSprite = require('svg-sprite');
const config = {
  mode: {
    symbol: {
      dest: 'out',
      sprite: 'symbol-sprite.svg'
    }
  }
};
svgSprite(config).then(() => console.log('Symbol sprite created!'));

CSS Sprite Mode

This feature allows you to create a CSS sprite, which is a single SVG file that can be used with CSS to display individual icons. The package can also generate the corresponding CSS file to use the sprite.

const svgSprite = require('svg-sprite');
const config = {
  mode: {
    css: {
      dest: 'out',
      sprite: 'css-sprite.svg',
      render: {
        css: true
      }
    }
  }
};
svgSprite(config).then(() => console.log('CSS sprite created!'));

Stack Sprite Mode

This feature allows you to create a stack sprite, which is a single SVG file containing multiple stacked SVG elements. Each element can be referenced individually using the <use> element in your HTML.

const svgSprite = require('svg-sprite');
const config = {
  mode: {
    stack: {
      dest: 'out',
      sprite: 'stack-sprite.svg'
    }
  }
};
svgSprite(config).then(() => console.log('Stack sprite created!'));

Other packages similar to svg-sprite

svg-sprite-loader

svg-sprite-loader is a webpack loader that allows you to import SVG files as symbols in a sprite. It is similar to svg-sprite in that it helps optimize SVG delivery, but it is specifically designed to work with webpack, making it a good choice for projects that use webpack for module bundling.

gulp-svg-sprite

gulp-svg-sprite is a Gulp plugin for creating SVG sprites. It offers similar functionality to svg-sprite but is designed to be used within a Gulp build process. This makes it a good option for projects that use Gulp for task automation.

svgstore

svgstore is a simple tool for creating SVG sprites. It is less feature-rich compared to svg-sprite but provides a straightforward way to combine multiple SVG files into a single sprite. It is a good choice for projects that need a lightweight solution for SVG sprite generation.

README

The README file is missing

Changelog

1.3.5 Bugfix release (2016-08-15)

• Fixed file name regression bug (#186)