webpack-svgstore

2.1.2 verified Sat Apr 25 auth: no javascript

A webpack 5 plugin that combines multiple SVG files into a single SVG sprite sheet using <symbol> elements. Current version 2.1.2 (January 2024) uses svgo for optimization and glob patterns for file matching. Requires Node >= 18 and webpack 5. Ships TypeScript types. Differentiator: simple configuration, built-in SVG sprite loader (svgxhr) for use in webpack bundles, and options for prefix, inline SVG, and viewBox removal. Alternatives like svg-sprite-loader handle SVG injection differently.

Common errors

error Module not found: Error: Can't resolve 'webpack-svgstore/dist/helpers/svgxhr' ↓

cause The svgxhr helper is not in the default export path. Wrong import path used.

fix

Change import to: import svgxhr from 'webpack-svgstore/dist/helpers/svgxhr';

error TypeError: SvgStore is not a constructor ↓

cause Importing with default export when package uses CommonJS exports.

fix

Use: const SvgStore = require('webpack-svgstore');

error ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema. ↓

cause Using webpack 5 with plugin but output.filename defined instead of plugin options.

fix

Move fileName and path to plugin constructor options.

Warnings

breaking v2.0.0 moved filename and path from output options to plugin options. Older config using output.filename or output.path will not work. ↓

fix Set fileName and path directly in the plugin constructor options.

breaking Node >= 18 is required as of v2.1.2. Older versions may fail. ↓

fix Upgrade Node.js to 18 or later.

gotcha Glob patterns must use forward slashes even on Windows. Backslashes will fail to match files. ↓

fix Use path.resolve with forward slashes or manually replace backslashes.

deprecated The 'prefix' option default is 'icon-'. Using an empty string will still prefix with an empty string, not disable prefixing. ↓

fix Set prefix to '' only if you want no prefix; otherwise use a non-empty string.

Install

npm install webpack-svgstore

yarn add webpack-svgstore

pnpm add webpack-svgstore

Imports

SvgStore

wrong

const SvgStore = require('webpack-svgstore').default;

correct

const SvgStore = require('webpack-svgstore');

The plugin is exported as a CommonJS module; no default export.

svgxhr
wrong
```
import svgxhr from 'webpack-svgstore';
```
correct
```
import svgxhr from 'webpack-svgstore/dist/helpers/svgxhr';
```
The svgxhr helper is not exported from the package index; it must be imported from the dist/helpers subpath.

SvgStore TypeScript

wrong

const SvgStore = require('webpack-svgstore'); (if using TypeScript with esModuleInterop false)

correct

import SvgStore from 'webpack-svgstore';

TypeScript types are bundled; import works with both import and require depending on tsconfig settings.

Quickstart

Shows webpack config with plugin and how to load the sprite in entry code using the svgxhr helper.

const path = require('path');
const SvgStore = require('webpack-svgstore');

module.exports = {
  plugins: [
    new SvgStore({
      path: path.resolve(__dirname, 'assets/svg/**/*.svg'),
      fileName: 'svg-sprites.svg',
      prefix: 'icon-',
    }),
  ],
};

// In entry module:
import svgxhr from 'webpack-svgstore/dist/helpers/svgxhr';
svgxhr('svg-sprites.svg');