@zumwald/html-webpack-inline-img-plugin

Inline img extension for the HTML Webpack Plugin

Forked and extended from Guy Campbell's work on html-webpack-inline-svg-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.

Installation

Install the plugin with npm:

$ npm install --save-dev @zumwald/html-webpack-inline-img-plugin

or yarn:

$ yarn add @zumwald/html-webpack-inline-img-plugin --dev

Usage

Require the plugin in your webpack config:

const HtmlWebpackInlineImgPlugin = require('@zumwald/html-webpack-inline-img-plugin');

Add the plugin to your webpack config as follows:

plugins: [
    new HtmlWebpackPlugin(),
    new HtmlWebpackInlineImgPlugin()
]

Add img tags with inline attribute and .svg or .png file as src to your template/s that the html-webpack-plugin is processing (the default is index.html).

<!-- Works: below img tag will be removed and replaced by the content of the svg in its src -->
<img inline src="static/icons.svg">

<!-- Also works: below img tag src field will be replaced with base64 encoded string-->
<img inline src="static/image.png">

<!-- Ignored: this img will not be touched as it has no inline attribute -->
<img src="static/foo.svg">

Getting to your SVGs

References to your *.svg or *.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">

Config

To configure SVGO (module used to optimise your SVGs), add an svgoConfig object to your html-webpack-plugin config:

plugins: [
    new HtmlWebpackPlugin({
        svgoConfig: {
            removeTitle: false,
            removeViewBox: true,
        },
    }),
    new HtmlWebpackInlineSVGPlugin()
]

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.

Known Issues

• none currently