Inline Svg Webpack Plugin
A webpack plugin to replace <img> elements that have an image/svg+xml data url, with their actual svg tags in the emitted assets of your choice.
Combine this with other loaders (the ones that can emit files) to make it useful. Check html-loader's readme for more on that.
Dependencies
How to use it
webpack should already be set up for your project. Check the webpack guides first if you need to.
Install plugin + dependencies
Install the plugin. You probably also want to get url-loader and html-loader.
$ npm install --save-dev inline-svg-webpack-plugin url-loader
update your webpack.config.js
You can use url-loader to inline your svg files as data-urls so the plugin can pick up on them. Make sure you set url-loader's limit option high enough so that all svg images get inlined as data-urls (i guess this is optional).
And don't forget to add the plugin!
'use strict' var InlineSvgPlugin = ; moduleexports // ... module: // ... rules: // ... test: /\.html$/ loader: 'html-loader' test: /\.svg$/ loader: 'url-loader' options: limit: 10485760 mimetype: 'image/svg+xml' plugins: // ... test: /\.html$/ // an asset filter regex. Assets matching this filter get modified.
You dont have to pass the options object to the plugin constructor. If you don't it will default to:
test: /\.html$/