Registry / devops / html-webpack-inline-svg-plugin

html-webpack-inline-svg-plugin

JSON →
library2.3.0jsnpmunverified

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.

npm install html-webpack-inline-svg-plugin
INSTALL
IMPORT
SIG · HTML-WEBPACK-INLIN
H
html-webpack-inline-svg-plugin
devopsjavascriptv2.3.0
Install
Import
Disk
Pass rate
0/ 6
Env Coverage0 / 6
glibc
1822
musl
1822
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
musl
node 18226 runs
build_error
glibc
node 18226 runs
build_error
Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

HtmlWebpackInlineSVGPlugin
const HtmlWebpackInlineSVGPlugin = require('html-webpack-inline-svg-plugin');
import HtmlWebpackInlineSVGPlugin from 'html-webpack-inline-svg-plugin';
Plugin is CJS-only; no ESM export. Use require() in webpack config file.
HtmlWebpackPlugin
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-inline-svg-plugin');
Do not confuse with this plugin; html-webpack-plugin is a separate required dependency.
svgoConfig
new HtmlWebpackInlineSVGPlugin({ svgoConfig: { plugins: ['removeDoctype'] } })
new HtmlWebpackPlugin({ svgoConfig: { ... } })
Breaking change in v2.3.0: svgoConfig must be passed to HtmlWebpackInlineSVGPlugin, not HtmlWebpackPlugin. An error is thrown if placed incorrectly.

Webpack config with html-webpack-plugin and html-webpack-inline-svg-plugin, setting SVGO options and runPreEmit flag.

const HtmlWebpackPlugin = require('html-webpack-plugin'); const HtmlWebpackInlineSVGPlugin = require('html-webpack-inline-svg-plugin'); module.exports = { entry: './src/index.js', plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }), new HtmlWebpackInlineSVGPlugin({ svgoConfig: { plugins: [ { name: 'removeViewBox', active: false } ] }, runPreEmit: false }) ] }; // In your HTML template: // <img inline src="icon.svg"> becomes the <svg> content
Debug
Known issues
breakingsvgoConfig option moved from HtmlWebpackPlugin to HtmlWebpackInlineSVGPlugin constructor
fix
Move svgoConfig into new HtmlWebpackInlineSVGPlugin({ svgoConfig: ... }). Do NOT pass it to HtmlWebpackPlugin.
affects: >=2.3.0
breakingDefault behavior changed: plugin now processes SVGs after files are written to output directory (post-emit). Prior to 1.0.0 it ran pre-emit.
fix
If you rely on pre-emit behavior, set runPreEmit: true in plugin options. Update SVG src paths to be relative to output directory.
affects: >=1.0.0
gotchaPlugin only processes <img> tags with inline attribute and .svg extension. Tags without inline or with non-.svg src are ignored silently.
fix
Ensure <img> tag includes inline attribute and src points to .svg file. PNG, JPG, etc. are ignored.
affects: >=0.0.0
gotchaWebpack 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).
fix
Install file-loader and html-loader. Set html-loader options to handle attributes (e.g., attrs=['img:src']). See plugin docs for configuration.
affects: >=0.0.0
Errors
Common errors & fixes
Error: HtmlWebpackInlineSVGPlugin: svgoConfig should be passed inside the plugin constructor, not in HtmlWebpackPlugin options.
svgoConfig placed incorrectly in HtmlWebpackPlugin options as per v2.3.0 breaking change.
fix
Move svgoConfig to new HtmlWebpackInlineSVGPlugin({ svgoConfig: ... }) and remove from HtmlWebpackPlugin options.
Error: Cannot find module 'html-webpack-plugin'
Missing peer dependency html-webpack-plugin.
fix
Install it: npm install --save-dev html-webpack-plugin
Module not found: Error: Can't resolve 'icon.svg'
SVG file path is incorrect or webpack cannot resolve it. Plugin does not resolve paths itself; relies on webpack loaders or absolute/relative paths.
fix
Use correct path relative to output directory or configure a loader like file-loader. Ensure runPreEmit is set correctly.
Upgrade
Version history
2.3.0latest on npm
Audit
Dependencies
html-webpack-pluginrequiredcore peer dependency; the plugin hooks into its lifecycle
webpackrequiredbuild tool; required at runtime
Agent activity
4 hits · last 30 days
node
4
Resources
html-webpack-inline-svg-plugin — npm install html-webpack-inline-svg-plugin · libregistry