svg-sprite-loader

What is svg-sprite-loader?

svg-sprite-loader is a Webpack loader that optimizes SVG files by creating SVG sprites. This allows for efficient use of SVGs in web applications by reducing the number of HTTP requests and improving performance.

What are svg-sprite-loader's main functionalities?

Basic Usage

This configuration sets up svg-sprite-loader to process SVG files and generate symbols with IDs based on the file name.

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        loader: 'svg-sprite-loader',
        options: {
          symbolId: 'icon-[name]'
        }
      }
    ]
  }
};

Custom Sprite Filename

This configuration extracts the SVGs into a single sprite file named 'custom-sprite.svg'.

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        loader: 'svg-sprite-loader',
        options: {
          extract: true,
          spriteFilename: 'custom-sprite.svg'
        }
      }
    ]
  }
};

Using with SVGO

This configuration uses svg-sprite-loader in combination with svgo-loader to optimize SVG files before creating the sprite.

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: [
          'svg-sprite-loader',
          {
            loader: 'svgo-loader',
            options: {
              plugins: [
                { removeTitle: true },
                { convertColors: { shorthex: false } },
                { convertPathData: false }
              ]
            }
          }
        ]
      }
    ]
  }
};

Other packages similar to svg-sprite-loader

svg-sprite

svg-sprite is a standalone tool for creating SVG sprites. It offers a wide range of configuration options and can be used outside of Webpack. Compared to svg-sprite-loader, it is more flexible but requires additional setup to integrate with build systems.

svgstore

svgstore is a Node.js library for creating SVG sprites. It is simpler and more lightweight compared to svg-sprite-loader, but it does not integrate directly with Webpack, requiring additional steps to use in a Webpack-based project.

gulp-svg-sprite

gulp-svg-sprite is a Gulp plugin for creating SVG sprites. It is similar in functionality to svg-sprite-loader but is designed to work within a Gulp build process rather than Webpack.

README

Webpack SVG sprite loader

// Create sprite instance
var SvgSprite = require('node_modules/svg-sprite-loader/web/svg-sprite');
var sprite = new SvgSprite();

// Add single image to the sprite
sprite.add(require('svg-sprite!images/logos/logo.svg'));

// ...or bunch of them
sprite.add(require.context('svg-sprite!images/logos', false, /\.svg$/));

// Render the sprite
sprite.render(document.body);

// PROFIT!