{"id":20109,"library":"html-webpack-inline-svg-plugin","title":"html-webpack-inline-svg-plugin","description":"Webpack plugin (v2.3.0) that converts <img inline src='...svg'> tags in HTML templates into inlined <svg> elements after processing by html-webpack-plugin. Uses SVGO for optimization. Key differentiator: works alongside other loaders, supports deep nesting, URLs, and webpack aliases. Release cadence: ~1 major per year. Requires html-webpack-plugin (v4+) and webpack 4/5.","status":"active","version":"2.3.0","language":"javascript","source_language":"en","source_url":"https://github.com/thegc/html-webpack-inline-svg-plugin","tags":["javascript","webpack","plugin","html-webpack-plugin","inline","svg"],"install":[{"cmd":"npm install html-webpack-inline-svg-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add html-webpack-inline-svg-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add html-webpack-inline-svg-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"core peer dependency; the plugin hooks into its lifecycle","package":"html-webpack-plugin","optional":false},{"reason":"build tool; required at runtime","package":"webpack","optional":false}],"imports":[{"note":"Plugin is CJS-only; no ESM export. Use require() in webpack config file.","wrong":"import HtmlWebpackInlineSVGPlugin from 'html-webpack-inline-svg-plugin';","symbol":"HtmlWebpackInlineSVGPlugin","correct":"const HtmlWebpackInlineSVGPlugin = require('html-webpack-inline-svg-plugin');"},{"note":"Do not confuse with this plugin; html-webpack-plugin is a separate required dependency.","wrong":"const HtmlWebpackPlugin = require('html-webpack-inline-svg-plugin');","symbol":"HtmlWebpackPlugin","correct":"const HtmlWebpackPlugin = require('html-webpack-plugin');"},{"note":"Breaking change in v2.3.0: svgoConfig must be passed to HtmlWebpackInlineSVGPlugin, not HtmlWebpackPlugin. An error is thrown if placed incorrectly.","wrong":"new HtmlWebpackPlugin({ svgoConfig: { ... } })","symbol":"svgoConfig","correct":"new HtmlWebpackInlineSVGPlugin({ svgoConfig: { plugins: ['removeDoctype'] } })"}],"quickstart":{"code":"const HtmlWebpackPlugin = require('html-webpack-plugin');\nconst HtmlWebpackInlineSVGPlugin = require('html-webpack-inline-svg-plugin');\n\nmodule.exports = {\n  entry: './src/index.js',\n  plugins: [\n    new HtmlWebpackPlugin({\n      template: './src/index.html'\n    }),\n    new HtmlWebpackInlineSVGPlugin({\n      svgoConfig: {\n        plugins: [\n          { name: 'removeViewBox', active: false }\n        ]\n      },\n      runPreEmit: false\n    })\n  ]\n};\n\n// In your HTML template:\n// <img inline src=\"icon.svg\"> becomes the <svg> content","lang":"javascript","description":"Webpack config with html-webpack-plugin and html-webpack-inline-svg-plugin, setting SVGO options and runPreEmit flag."},"warnings":[{"fix":"Move svgoConfig into new HtmlWebpackInlineSVGPlugin({ svgoConfig: ... }). Do NOT pass it to HtmlWebpackPlugin.","message":"svgoConfig option moved from HtmlWebpackPlugin to HtmlWebpackInlineSVGPlugin constructor","severity":"breaking","affected_versions":">=2.3.0"},{"fix":"If you rely on pre-emit behavior, set runPreEmit: true in plugin options. Update SVG src paths to be relative to output directory.","message":"Default behavior changed: plugin now processes SVGs after files are written to output directory (post-emit). Prior to 1.0.0 it ran pre-emit.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Ensure <img> tag includes inline attribute and src points to .svg file. PNG, JPG, etc. are ignored.","message":"Plugin only processes <img> tags with inline attribute and .svg extension. Tags without inline or with non-.svg src are ignored silently.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Install file-loader and html-loader. Set html-loader options to handle attributes (e.g., attrs=['img:src']). See plugin docs for configuration.","message":"Webpack aliases require loaders to resolve SVG paths. If using alias, you must configure file-loader/url-loader and ensure templates are parsed (e.g., with html-loader).","severity":"gotcha","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":"Move svgoConfig to new HtmlWebpackInlineSVGPlugin({ svgoConfig: ... }) and remove from HtmlWebpackPlugin options.","cause":"svgoConfig placed incorrectly in HtmlWebpackPlugin options as per v2.3.0 breaking change.","error":"Error: HtmlWebpackInlineSVGPlugin: svgoConfig should be passed inside the plugin constructor, not in HtmlWebpackPlugin options."},{"fix":"Install it: npm install --save-dev html-webpack-plugin","cause":"Missing peer dependency html-webpack-plugin.","error":"Error: Cannot find module 'html-webpack-plugin'"},{"fix":"Use correct path relative to output directory or configure a loader like file-loader. Ensure runPreEmit is set correctly.","cause":"SVG file path is incorrect or webpack cannot resolve it. Plugin does not resolve paths itself; relies on webpack loaders or absolute/relative paths.","error":"Module not found: Error: Can't resolve 'icon.svg'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}