{"id":20595,"library":"svg-sprite-loader","title":"svg-sprite-loader","description":"Webpack loader for creating SVG sprites, enabling inline SVG usage via <use> tags. Current stable version 6.0.11, with a release cadence of roughly 2-3 major versions per year. Key differentiators: automatic runtime injection, isomorphic support for node/browser, customizable runtime generators, and external sprite file extraction for CSS/HTML imports. Supports webpack 5 (v6+), webpack 4 (v5), and earlier versions. Maintained by JetBrains.","status":"active","version":"6.0.11","language":"javascript","source_language":"en","source_url":"https://github.com/JetBrains/svg-sprite-loader","tags":["javascript","svg","sprite","svg sprite","svg stack","webpack","webpack2","webpack3","webpack loader"],"install":[{"cmd":"npm install svg-sprite-loader","lang":"bash","label":"npm"},{"cmd":"yarn add svg-sprite-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add svg-sprite-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required as a loader dependency for webpack builds","package":"webpack","optional":false},{"reason":"Used internally for SVG symbol extraction and sprite creation","package":"svg-baker","optional":false}],"imports":[{"note":"ESM default import returns an object with id, viewBox, content (or url in extract mode).","wrong":"const icon = require('./icon.svg')","symbol":"default","correct":"import icon from './icon.svg'"},{"note":"symbolId is a runtime export, not from the main package.","wrong":"import { symbolId } from 'svg-sprite-loader'","symbol":"symbolId","correct":"import { symbolId } from 'svg-sprite-loader/runtime'"},{"note":"Internal class, not exposed in public API; use only if extending runtime.","wrong":"const SpriteSymbol = require('svg-sprite-loader').SpriteSymbol","symbol":"SpriteSymbol","correct":"import SpriteSymbol from 'svg-sprite-loader/lib/sprite-symbol'"}],"quickstart":{"code":"// webpack.config.js\nconst path = require('path');\nmodule.exports = {\n  mode: 'development',\n  entry: './src/index.js',\n  output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' },\n  module: {\n    rules: [\n      {\n        test: /\\.svg$/,\n        use: [\n          { loader: 'svg-sprite-loader', options: { esModule: true } },\n          'svgo-loader'\n        ]\n      }\n    ]\n  }\n}","lang":"javascript","description":"Configures webpack to load SVG files as sprite symbols, using svgo for optimization. Imports return symbol objects usable with <use>."},"warnings":[{"fix":"Update webpack to version 5 or later. If using webpack 4, continue using v5.2.1.","message":"In v6.0.0, dropped support for webpack <5. Upgrade webpack to 5.x or stay on v5.x.","severity":"breaking","affected_versions":">=6.0.0"},{"fix":"Update custom runtime generators to use the new context meaning.","message":"In v5.0.0, the context param passed to runtime generators was changed from compilation root to folder where SVG image is located. This may break custom generators.","severity":"breaking","affected_versions":">=5.0.0"},{"fix":"Use runtimeOptions instead.","message":"runtimeCompat option is deprecated and will be removed in future versions.","severity":"deprecated","affected_versions":">=4.0.0"},{"fix":"Explicitly set esModule: true if using ESM imports, false for CommonJS.","message":"ES module export is autoconfigured based on webpack version; manual esModule option may be needed for consistent behavior.","severity":"gotcha","affected_versions":">=4.0.0"},{"fix":"Use object.url for external sprite file references.","message":"In extract mode (extract: true), the returned object has a url field instead of content. Confirm runtime compatibility.","severity":"gotcha","affected_versions":">=3.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 svg-sprite-loader --save-dev' or 'yarn add svg-sprite-loader -D'.","cause":"Missing or incorrect installation of svg-sprite-loader","error":"Error: Module not found: Error: Can't resolve 'svg-sprite-loader'"},{"fix":"Ensure options is an object; if using symbolId function, return a string.","cause":"The loader options object not provided, or symbolId function returns undefined","error":"TypeError: Cannot read property 'replace' of undefined"},{"fix":"Upgrade to v6.0.0 or later, or adjust multi-config setup.","cause":"Webpack 5 multi-configuration incompatibility with svg-sprite-loader v5 (fixed in v6)","error":"Error: MultiCompiler was not fully processed: the output filesystem ..."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}