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

Inline SVG extension for the HTML Webpack Plugin

Allows you to inline SVGs that are parsed by html-webpack-plugin.

Now you can easily add inline SVGs to your output html. Combined with techniques such as: Icon System with SVG Sprites you have a simple way of ensuring your svg referenced icons are always visible.

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 html-webpack-inline-svg-plugin

or yarn:

$ yarn add html-webpack-inline-svg-plugin --dev

Usage

Require the plugin in your webpack config:

const HtmlWebpackInlineSVGPlugin = require('html-webpack-inline-svg-plugin');

Add the plugin to your webpack config as follows:

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

Add img tags with inline attribute and .svg 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">

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

<!-- Broken: this plugin will ignore this src as it is not an svg -->
<img inline src="static/i-will-be-ignored.png">

Getting to your SVGs

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