{"id":20841,"library":"webpack-svgstore-plugin","title":"webpack-svgstore-plugin","description":"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.","status":"active","version":"4.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/mrsum/webpack-svgstore-plugin","tags":["javascript"],"install":[{"cmd":"npm install webpack-svgstore-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add webpack-svgstore-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add webpack-svgstore-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Used for optimizing SVG files during sprite generation","package":"svgo","optional":false},{"reason":"Peer dependency; v4.x supports Webpack 2.x, v3.x supports Webpack 1.x","package":"webpack","optional":false}],"imports":[{"note":"This package does not ship ESM; CommonJS require is required. No default export exists for ESM.","wrong":"import SvgStore from 'webpack-svgstore-plugin';","symbol":"SvgStore","correct":"const SvgStore = require('webpack-svgstore-plugin');"},{"note":"Options are passed under the 'svgoOptions' key, not directly under 'svgo'.","wrong":"new SvgStore({ svgo: { removeTitle: true } })","symbol":"svgoOptions","correct":"new SvgStore({ svgoOptions: { plugins: [{ removeTitle: true }] } })"},{"note":"Prefix key is 'prefix', not 'namePrefix'.","wrong":"new SvgStore({ namePrefix: 'icon' })","symbol":"prefix","correct":"new SvgStore({ prefix: 'icon' })"}],"quickstart":{"code":"// webpack.config.js\nvar SvgStore = require('webpack-svgstore-plugin');\n\nmodule.exports = {\n  entry: './src/index.js',\n  output: {\n    path: __dirname + '/dist',\n    filename: 'bundle.js'\n  },\n  plugins: [\n    new SvgStore({\n      svgoOptions: {\n        plugins: [\n          { removeTitle: true }\n        ]\n      },\n      prefix: 'icon'\n    })\n  ]\n};\n\n// In your source file (e.g., src/index.js):\nvar __svg__ = { path: './assets/svg/**/*.svg', name: 'assets/svg/[hash].logos.svg' };\nrequire('webpack-svgstore-plugin/src/helpers/svgxhr')(__svg__);\n\n// Then in HTML:\n<svg class=\"svg-icon\">\n  <use xlink:href=\"#icon-name\"></use>\n</svg>","lang":"javascript","description":"Shows how to configure the plugin in webpack config, declare the sprite definition in source, and use the sprite in HTML."},"warnings":[{"fix":"Install webpack-svgstore-plugin@3.x if using Webpack 1.x, or @4.x for Webpack 2.x.","message":"Webpack version mismatch: use v3.x for Webpack 1.x, v4.x for Webpack 2.x.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Ensure the variable is declared and not tree-shaken. Use the exact pattern shown in docs.","message":"Magic variable `__svg__` must be declared as a global-like variable in source code, which can be missed by linters or minifiers.","severity":"gotcha","affected_versions":">=4.0.0"},{"fix":"Upgrade Node.js to version 4.0+ (recommended 7.0+).","message":"Node.js 0.12 is no longer supported. Minimum Node 4.0+ required.","severity":"deprecated","affected_versions":">=4.0.0"},{"fix":"Add `require('webpack-svgstore-plugin/src/helpers/svgxhr')(__svg__);` in your entry file.","message":"The built-in AJAX sprite loader (`svgxhr`) must be explicitly required; it is not loaded automatically.","severity":"gotcha","affected_versions":">=4.0.0"},{"fix":"Use `[hash]` as documented; ensure output path is correct.","message":"Sprite filename pattern uses `[hash]` placeholder which resolves to content hash of the sprite, not a build hash.","severity":"gotcha","affected_versions":">=4.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run `npm install webpack-svgstore-plugin --save-dev` and use `require('webpack-svgstore-plugin')`.","cause":"Package not installed or incorrect import path.","error":"Error: Cannot find module 'webpack-svgstore-plugin'"},{"fix":"Replace `import SvgStore from 'webpack-svgstore-plugin'` with `const SvgStore = require('webpack-svgstore-plugin')`.","cause":"Using ESM import instead of CommonJS require.","error":"TypeError: SvgStore is not a constructor"},{"fix":"Match versions: `npm install webpack-svgstore-plugin@3 --save-dev` for webpack 1.x, or `@4` for webpack 2.x.","cause":"Installed plugin version does not match webpack version.","error":"Error: webpack-svgstore-plugin requires webpack@2.x.x (for v4) or webpack@1.x.x (for v3)"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}