The goal of this plugin + loader is to avoid those http requests when injecting symbol reference in the DOM.

Installation

npm install -D svg-sprite-html-webpack
`

Compatibility

#### Webpack configuration :
#### Warning: Since Webpack 4, SvgSpriteHtmlWebpackPlugin must be declare after HtmlWebpackPlugin
`javascript
const HtmlWebpackPlugin = require('html-webpack-plugin');
const SvgSpriteHtmlWebpackPlugin = require('svg-sprite-html-webpack');

const webpackConfig = {
...
module: {
rules: [
...
{
test: /\.svg$/,
exclude: /node_modules/,
use: SvgSpriteHtmlWebpackPlugin.getLoader(),
},
]
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
}),
new SvgSpriteHtmlWebpackPlugin(),
...
]
}
`

#### Code in your browser app
`javascript
import checkmark from './icons/checkmark.svg';

const rendered =


;
`

#### In JSX
`javascript
import React from 'react';
import checkmark from './icons/checkmark.svg';

const icon = (



);
`

SvgSpriteHtmlWebpackPlugin options

$3

example (default behaviour):
`javascript
const webpackConfig = {
...
new SvgSpriteHtmlWebpackPlugin({
append: false
}),
...
`
Code in your html file :
`html


...

`

reverse example:
`javascript
const webpackConfig = {
...
new SvgSpriteHtmlWebpackPlugin({
append: true
}),
...
`
Code in your html file :
`html

...


`

$3

By default symbol id generated will be the name of svg file without extension.
If you include several folder which includes files with the same name, you can use generateSymbolId option to generate symbol id depending of file path or content hash.

> Note: you can import with javascript a file already included with this option. It will use the id of the included file without inject svg in sprite twice.

> Warning: if you include 2 files with different name but with exactly the same content, only one file will be injected in svg sprite.

example :
`javascript
const HtmlWebpackPlugin = require('html-webpack-plugin');
const SvgSpriteHtmlWebpackPlugin = require('svg-sprite-html-webpack');

const webpackConfig = {
...
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
}),
new SvgSpriteHtmlWebpackPlugin({
includeFiles: [
'src/icons/*.svg',
],
}),
...
]
}
`
Code in your html file :
`html




`

$3

example :
`javascript
const HtmlWebpackPlugin = require('html-webpack-plugin');
const SvgSpriteHtmlWebpackPlugin = require('svg-sprite-html-webpack');

const webpackConfig = {
...
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
}),
new SvgSpriteHtmlWebpackPlugin({
generateSymbolId: function(svgFilePath, svgHash, svgContent) {
return svgHash.toString();
},
}),
...
]
}
``