{"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,"search_vec":"'18':38 '2.1.2':23 '2024':25 '5':6,41 'altern':69 'built':49 'built-in':48 'bundl':59 'combin':9 'configur':47 'current':21 'differ':78 'differenti':45 'element':20 'file':12,34 'glob':31 'handl':75 'inject':77 'inlin':64 'januari':24 'javascript':79 'like':70 'loader':53,74 'match':35 'multipl':10 'node':37 'optim':29 'option':61 'pattern':32 'plugin':7,83 'prefix':63 'remov':68 'requir':36 'sheet':18 'ship':42 'simpl':46 'singl':15 'sprite':17,52,73 'svg':11,16,51,65,72,76,84 'svg-sprite-load':71 'svgo':27,85 'svgstore':3,86 'svgxhr':54 'type':44 'typescript':43,87 'use':19,26,56 'version':22 'viewbox':67 'webpack':2,5,40,58,80,82 'webpack-plugin':81 'webpack-svgstor':1","created_at":"2026-04-25T11:25:15.871316+00:00","updated_at":"2026-04-25T11:25:15.871316+00:00","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,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/davidbepa/webpack-svgstore","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/webpack-svgstore","openapi_spec":null,"status_page":null,"smithery":null,"categories":["devops"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-24","install_tag":null}}