{"id":20594,"library":"svg-sprite-html-webpack","title":"svg-sprite-html-webpack","description":"Webpack loader and plugin that generates an SVG sprite with <symbol> elements and injects it directly into the HTML output from html-webpack-plugin. Version 2.4.1 supports Webpack v3, v4, and v5 (added by contributors) and html-webpack-plugin v2, v3, and v5. The package is no longer actively maintained by the original author but has community upkeep. Unlike runtime SVG sprite solutions, this avoids extra HTTP requests by embedding the sprite at compile time. SVG files imported in JavaScript or specified via includeFiles are automatically optimized and deduplicated based on content.","status":"maintenance","version":"2.4.1","language":"javascript","source_language":"en","source_url":"https://github.com/Epimodev/svg-sprite-html-webpack","tags":["javascript","svg","sprite","svg sprite","webpack","webpack loader","webpack plugin"],"install":[{"cmd":"npm install svg-sprite-html-webpack","lang":"bash","label":"npm"},{"cmd":"yarn add svg-sprite-html-webpack","lang":"bash","label":"yarn"},{"cmd":"pnpm add svg-sprite-html-webpack","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"required peer dependency to inject the sprite into HTML output","package":"html-webpack-plugin","optional":true},{"reason":"required peer dependency as it is a webpack loader/plugin","package":"webpack","optional":true}],"imports":[{"note":"Package exports a single class via module.exports; ESM import only works with default import if using bundler that supports interop, but CJS require is safest.","wrong":"import SvgSpriteHtmlWebpackPlugin from 'svg-sprite-html-webpack';","symbol":"SvgSpriteHtmlWebpackPlugin","correct":"const SvgSpriteHtmlWebpackPlugin = require('svg-sprite-html-webpack');"},{"note":"Must call the static getLoader() method to obtain the loader configuration object.","wrong":"use: 'svg-sprite-html-webpack'","symbol":"getLoader","correct":"use: SvgSpriteHtmlWebpackPlugin.getLoader()"},{"note":"When using the loader, SVG files export the symbol ID as a string. If using CommonJS require, the value is the default export of the loader module.","wrong":"const checkmark = require('./icons/checkmark.svg');","symbol":"svg import (e.g., import checkmark from './icon.svg')","correct":"import checkmark from './icons/checkmark.svg';"},{"note":"HtmlWebpackPlugin is a separate peer dependency and must be required before SvgSpriteHtmlWebpackPlugin in the plugins array.","wrong":null,"symbol":"HtmlWebpackPlugin","correct":"const HtmlWebpackPlugin = require('html-webpack-plugin');"}],"quickstart":{"code":"const HtmlWebpackPlugin = require('html-webpack-plugin');\nconst SvgSpriteHtmlWebpackPlugin = require('svg-sprite-html-webpack');\n\nmodule.exports = {\n  entry: './src/index.js',\n  output: { path: __dirname + '/dist', filename: 'bundle.js' },\n  module: {\n    rules: [{\n      test: /\\.svg$/,\n      exclude: /node_modules/,\n      use: SvgSpriteHtmlWebpackPlugin.getLoader()\n    }]\n  },\n  plugins: [\n    new HtmlWebpackPlugin({ filename: 'index.html', template: 'template.html' }),\n    new SvgSpriteHtmlWebpackPlugin()\n  ]\n};","lang":"javascript","description":"Minimal webpack config that processes SVG files via the loader and injects the sprite into the HTML page via the plugin."},"warnings":[{"fix":"Ensure new SvgSpriteHtmlWebpackPlugin() is placed after new HtmlWebpackPlugin() in the plugins array.","message":"Since Webpack 4, SvgSpriteHtmlWebpackPlugin must be declared after HtmlWebpackPlugin in the plugins array.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"If using Webpack 5, test thoroughly. Consider alternative plugins like 'svg-sprite-loader' or 'svg-inline-loader' if issues arise.","message":"In Webpack 5 and html-webpack-plugin v5, there may be compatibility issues; the plugin is not officially maintained for v5 after v2.4.0.","severity":"breaking","affected_versions":">=2.4.0"},{"fix":"For long-term projects, evaluate alternative solutions with active maintenance.","message":"The package is no longer actively maintained by the original author; functionality is provided by community contributions.","severity":"deprecated","affected_versions":">=2.4.1"},{"fix":"Use generateSymbolId if you need unique symbols for duplicate content files.","message":"When using includeFiles option, files with identical content are deduplicated (only one injected even if different filenames).","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Always call SvgSpriteHtmlWebpackPlugin.getLoader() to get the loader configuration.","message":"The loader (getLoader()) must be used in the module rules; using the package as a plain loader string will fail.","severity":"breaking","affected_versions":">=0.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-html-webpack --save-dev' to install the package.","cause":"Package not installed or missing from node_modules.","error":"Module not found: Error: Can't resolve 'svg-sprite-html-webpack'"},{"fix":"Reorder plugins so HtmlWebpackPlugin comes before SvgSpriteHtmlWebpackPlugin.","cause":"Plugin order incorrect in webpack config.","error":"Error: The plugin 'SvgSpriteHtmlWebpackPlugin' must be placed after 'HtmlWebpackPlugin' in plugins array"},{"fix":"Use 'const SvgSpriteHtmlWebpackPlugin = require(\"svg-sprite-html-webpack\");' correctly.","cause":"Incorrect import; likely using default import of the class instead of the exported object.","error":"TypeError: SvgSpriteHtmlWebpackPlugin.getLoader is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}