Registry / devops / webpack-svgstore

webpack-svgstore

JSON →
library2.1.2jsnpmunverified

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.

npm install webpack-svgstore
INSTALL
IMPORT
SIG · WEBPACK-SVGSTORE
W
webpack-svgstore
devopsjavascriptv2.1.2
Install
Import
Disk
Pass rate
0/ 6
Env Coverage0 / 6
glibc
1822
musl
1822
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 18223 runs
build_error
glibc
node 18223 runs
build_error
Code
Verified usage

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

SvgStore
const SvgStore = require('webpack-svgstore');
const SvgStore = require('webpack-svgstore').default;
The plugin is exported as a CommonJS module; no default export.
svgxhr
import svgxhr from 'webpack-svgstore/dist/helpers/svgxhr';
import svgxhr from 'webpack-svgstore';
The svgxhr helper is not exported from the package index; it must be imported from the dist/helpers subpath.
SvgStore TypeScript
import SvgStore from 'webpack-svgstore';
const SvgStore = require('webpack-svgstore'); (if using TypeScript with esModuleInterop false)
TypeScript types are bundled; import works with both import and require depending on tsconfig settings.

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');
Debug
Known issues
breakingv2.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.
affects: <2.0.0
breakingNode >= 18 is required as of v2.1.2. Older versions may fail.
fix
Upgrade Node.js to 18 or later.
affects: >=2.1.2
gotchaGlob 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.
affects: >=2.1.2
deprecatedThe '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.
affects: >=1.0.0
Errors
Common errors & fixes
Module not found: Error: Can't resolve 'webpack-svgstore/dist/helpers/svgxhr'
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';
TypeError: SvgStore is not a constructor
Importing with default export when package uses CommonJS exports.
fix
Use: const SvgStore = require('webpack-svgstore');
ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
Using webpack 5 with plugin but output.filename defined instead of plugin options.
fix
Move fileName and path to plugin constructor options.
Upgrade
Version history
2.1.2latest on npm
Audit
Dependencies
webpackrequiredpeer dependency – plugin requires webpack 5
Agent activity
11 hits · last 30 days
node
10
Resources
webpack-svgstore — npm install webpack-svgstore · libregistry