{"id":20842,"library":"webpack-svgstore","title":"webpack-svgstore","description":"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.","status":"active","version":"2.1.2","language":"javascript","source_language":"en","source_url":"https://github.com/davidbepa/webpack-svgstore","tags":["javascript","webpack","webpack-plugin","svg","svgo","svgstore","typescript"],"install":[{"cmd":"npm install webpack-svgstore","lang":"bash","label":"npm"},{"cmd":"yarn add webpack-svgstore","lang":"bash","label":"yarn"},{"cmd":"pnpm add webpack-svgstore","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency – plugin requires webpack 5","package":"webpack","optional":false}],"imports":[{"note":"The plugin is exported as a CommonJS module; no default export.","wrong":"const SvgStore = require('webpack-svgstore').default;","symbol":"SvgStore","correct":"const SvgStore = require('webpack-svgstore');"},{"note":"The svgxhr helper is not exported from the package index; it must be imported from the dist/helpers subpath.","wrong":"import svgxhr from 'webpack-svgstore';","symbol":"svgxhr","correct":"import svgxhr from 'webpack-svgstore/dist/helpers/svgxhr';"},{"note":"TypeScript types are bundled; import works with both import and require depending on tsconfig settings.","wrong":"const SvgStore = require('webpack-svgstore'); (if using TypeScript with esModuleInterop false)","symbol":"SvgStore TypeScript","correct":"import SvgStore from 'webpack-svgstore';"}],"quickstart":{"code":"const path = require('path');\nconst SvgStore = require('webpack-svgstore');\n\nmodule.exports = {\n  plugins: [\n    new SvgStore({\n      path: path.resolve(__dirname, 'assets/svg/**/*.svg'),\n      fileName: 'svg-sprites.svg',\n      prefix: 'icon-',\n    }),\n  ],\n};\n\n// In entry module:\nimport svgxhr from 'webpack-svgstore/dist/helpers/svgxhr';\nsvgxhr('svg-sprites.svg');","lang":"javascript","description":"Shows webpack config with plugin and how to load the sprite in entry code using the svgxhr helper."},"warnings":[{"fix":"Set fileName and path directly in the plugin constructor options.","message":"v2.0.0 moved filename and path from output options to plugin options. Older config using output.filename or output.path will not work.","severity":"breaking","affected_versions":"<2.0.0"},{"fix":"Upgrade Node.js to 18 or later.","message":"Node >= 18 is required as of v2.1.2. Older versions may fail.","severity":"breaking","affected_versions":">=2.1.2"},{"fix":"Use path.resolve with forward slashes or manually replace backslashes.","message":"Glob patterns must use forward slashes even on Windows. Backslashes will fail to match files.","severity":"gotcha","affected_versions":">=2.1.2"},{"fix":"Set prefix to '' only if you want no prefix; otherwise use a non-empty string.","message":"The 'prefix' option default is 'icon-'. Using an empty string will still prefix with an empty string, not disable prefixing.","severity":"deprecated","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Change import to: import svgxhr from 'webpack-svgstore/dist/helpers/svgxhr';","cause":"The svgxhr helper is not in the default export path. Wrong import path used.","error":"Module not found: Error: Can't resolve 'webpack-svgstore/dist/helpers/svgxhr'"},{"fix":"Use: const SvgStore = require('webpack-svgstore');","cause":"Importing with default export when package uses CommonJS exports.","error":"TypeError: SvgStore is not a constructor"},{"fix":"Move fileName and path to plugin constructor options.","cause":"Using webpack 5 with plugin but output.filename defined instead of plugin options.","error":"ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}