this is an improved fork of
yarn add webpack-html-plugin-svg-inline
- webpack-html-plugin-svg-inline will transfer all the props, except inline and src to the inlined node.
- webpack-html-plugin-svg-inline will work with webpack-dev-server, ie during developement, as long the original plugin will work only for production builds.
Inline SVG extension for the HTML Webpack Plugin
Convert .svg files into inline SVG tags within the output html of templates parsed by html-webpack-plugin.
By inlining SVGs you can combine them with techniques such as: Icon System with SVG Sprites.
As of version 1.0.0 this plugin processes SVG files after all template and image files have been written to their corresponding output directory. This allows it to work alongside loaders, after webpack resolves all file locations.
Please note: to use aliases you will need to install loaders to resolve your svg paths and parse the templates html. More info is provided below: Getting to your SVGs.
Install the plugin with npm:
$ npm install --save-dev webpack-html-plugin-svg-inline
$ yarn add webpack-html-plugin-svg-inline --dev
Require the plugin in your webpack config:
const HtmlWebpackInlineSVGPlugin = ;
Add the plugin to your webpack config as follows:
img tags with
inline attribute and
.svg 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 --><!-- Ignored: this img will not be touched as it has no inline attribute --><!-- Broken: the plugin will ignore this src as it is not an svg -->
Getting to your SVGs
Breaking change: As of version 1.0.0 the plugin waits for webpack to resolve image locations and write them to disk. If you were using a version prior to 1.0.0 then it is likely you'll need to update the src paths to your inline SVGs to reflect this change. See below for more info.
There are two ways of working with your
<img> src attributes and this plugin.
- If you are not working with loaders to allow webpack to parse and resolve the
srcattributes within your html-webpack-plugin templates. Use paths that are relative to your svg images from the output location of the template that is referencing it.
- Alternatively use loaders such as html-loader to parse the html templates, and file-loader or something similar, to resolve the paths of your
srcattributes. As the plugin works after webpack has emitted all its assets and html-webpack-plugin has output your templates, it will read the SVGs that webpack places in your output directory, and replace any inlined img tags with this content.
my-project -- package.json -- webpack-config.js -- <node_modules> -- <src> ---- index.html ---- <images> ------ icons.svg ------ foo.svg
With the above structure inlining icons.svg would look like:
<img inline src="images/icons.svg">
If an alias was in place for the images directory, i.e.
'img': path.join(__dirname, 'src', 'images')
Then the svg can be inlined with:
<img inline src="~img/icons.svg">. This method would require the use of loaders on your templates as shown above in point 2.
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.
- Optimises / minimizes the output SVG
- Allows for deep nested SVGs
- Supports webpack aliases for file locations
- Ignores broken tags - incase you are outputting templates for various parts of the page
- Performs no html decoding so supports language tags, i.e.
<?php echo 'foo bar'; ?>
- none currently
You're free to contribute to this project by submitting issues and/or pull requests. This project is test-driven, so keep in mind that every change and new feature should be covered by tests.
This project is licensed under MIT.