Inline img extension for the HTML Webpack Plugin
Allows you to inline SVGs or PNGs that are parsed by html-webpack-plugin.
The plugin relies on svgo to optimise SVGs. You can configure it's settings, check below for more details.
Install the plugin with npm:
$ npm install --save-dev @zumwald/html-webpack-inline-img-plugin
$ yarn add @zumwald/html-webpack-inline-img-plugin --dev
Require the plugin in your webpack config:
const HtmlWebpackInlineImgPlugin = ;
Add the plugin to your webpack config as follows:
img tags with
inline attribute and
.png file as src to your template/s that the html-webpack-plugin is processing (the default is
<!-- Works: below img tag will be removed and replaced by the content of the svg in its src --><!-- Also works: below img tag src field will be replaced with base64 encoded string--><!-- Ignored: this img will not be touched as it has no inline attribute -->
Getting to your SVGs
References to your
*.png files within the
img tags src should be relative to your project root, this is usually the directory your
package.json file sits in:
my-project -- package.json -- <node_modules> -- <static> ---- icons.svg ---- foo.svg ---- ...
With the above structure inlining icons.svg would look like:
<img inline src="static/icons.svg">
To configure SVGO (module used to optimise your SVGs), add an
svgoConfig object to your
plugins:svgoConfig:removeTitle: falseremoveViewBox: true
For a full list of the SVGO config (default) params we are using check out: svgo-config.js. The config you set is merged with our defaults, it does not replace it.
- none currently