Registry / devops / webpack-svgstore-plugin

webpack-svgstore-plugin

library4.1.0jsnpmunverified

Webpack plugin that generates SVG sprites (SVG store) from a set of SVG files. Version 4.1.0 is the latest stable release. Use v3.x for Webpack 1.x and v4.x for Webpack 2.x. It integrates svgo for optimization, supports prefixing for icon IDs, and includes an optional built-in AJAX sprite loader. Key differentiator: it uses magic variables like `__svg__` in source files to declare input glob and output filename, which can be confusing for newcomers.

devops

npm install webpack-svgstore-plugin

github ↗package ↗

INSTALL

IMPORT

SIG · WEBPACK-SVGSTORE-P

webpack-svgstore-plugin

devopsjavascriptv4.1.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

SvgStore

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

✗ import SvgStore from 'webpack-svgstore-plugin';

This package does not ship ESM; CommonJS require is required. No default export exists for ESM.

svgoOptions

✓ new SvgStore({ svgoOptions: { plugins: [{ removeTitle: true }] } })

✗ new SvgStore({ svgo: { removeTitle: true } })

Options are passed under the 'svgoOptions' key, not directly under 'svgo'.

prefix

✓ new SvgStore({ prefix: 'icon' })

✗ new SvgStore({ namePrefix: 'icon' })

Prefix key is 'prefix', not 'namePrefix'.

Shows how to configure the plugin in webpack config, declare the sprite definition in source, and use the sprite in HTML.

// webpack.config.js var SvgStore = require('webpack-svgstore-plugin'); module.exports = { entry: './src/index.js', output: { path: __dirname + '/dist', filename: 'bundle.js' }, plugins: [ new SvgStore({ svgoOptions: { plugins: [ { removeTitle: true } ] }, prefix: 'icon' }) ] }; // In your source file (e.g., src/index.js): var __svg__ = { path: './assets/svg/**/*.svg', name: 'assets/svg/[hash].logos.svg' }; require('webpack-svgstore-plugin/src/helpers/svgxhr')(__svg__); // Then in HTML: <svg class="svg-icon"> <use xlink:href="#icon-name"></use> </svg>

Debug

Known issues

breakingWebpack version mismatch: use v3.x for Webpack 1.x, v4.x for Webpack 2.x.

fix

Install webpack-svgstore-plugin@3.x if using Webpack 1.x, or @4.x for Webpack 2.x.

affects: >=4.0.0

gotchaMagic variable `__svg__` must be declared as a global-like variable in source code, which can be missed by linters or minifiers.

fix

Ensure the variable is declared and not tree-shaken. Use the exact pattern shown in docs.

affects: >=4.0.0

deprecatedNode.js 0.12 is no longer supported. Minimum Node 4.0+ required.

fix

Upgrade Node.js to version 4.0+ (recommended 7.0+).

affects: >=4.0.0

gotchaThe built-in AJAX sprite loader (`svgxhr`) must be explicitly required; it is not loaded automatically.

fix

Add `require('webpack-svgstore-plugin/src/helpers/svgxhr')(__svg__);` in your entry file.

affects: >=4.0.0

gotchaSprite filename pattern uses `[hash]` placeholder which resolves to content hash of the sprite, not a build hash.

fix

Use `[hash]` as documented; ensure output path is correct.

affects: >=4.0.0

Errors

Common errors & fixes

Error: Cannot find module 'webpack-svgstore-plugin'

Package not installed or incorrect import path.

fix

Run `npm install webpack-svgstore-plugin --save-dev` and use `require('webpack-svgstore-plugin')`.

TypeError: SvgStore is not a constructor

Using ESM import instead of CommonJS require.

fix

Replace `import SvgStore from 'webpack-svgstore-plugin'` with `const SvgStore = require('webpack-svgstore-plugin')`.

Error: webpack-svgstore-plugin requires webpack@2.x.x (for v4) or webpack@1.x.x (for v3)

Installed plugin version does not match webpack version.

fix

Match versions: `npm install webpack-svgstore-plugin@3 --save-dev` for webpack 1.x, or `@4` for webpack 2.x.

Upgrade

Version history

4.1.0latest on npm

Audit

Dependencies

svgorequiredUsed for optimizing SVG files during sprite generation

webpackrequiredPeer dependency; v4.x supports Webpack 2.x, v3.x supports Webpack 1.x

Agent activity

6 hits · last 30 days

node

Resources

githubhttps://github.com/mrsum/webpack-svgstore-plugin ↗

packagehttps://www.npmjs.com/package/webpack-svgstore-plugin ↗