Svg-sprite-loader: Get svg-sprite-loader to work with html-webpack-plugin

Created on 27 Sep 2017 · 7Comments · Source: JetBrains/svg-sprite-loader

Do you want to request a feature, report a bug or ask a question?
I would like either an example if this is already possible, otherwise a new feature :)

What is the current behavior?

What is the expected behavior?
I want to inline my SVG icons in my index.html at build-time using webpack (html-webpack-plugin). For example:

<body>
<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     style="position: absolute; width: 0; height: 0" 
     id="__SVG_SPRITE_NODE__">
  <symbol viewBox="0 0 21 18" id="eb-icon-alert">
    <path d="M20.7,15.6L11.8,1c-0.7-1.3-1.8-1.3-2.5,0L0.3,15.6C-0.4,16.9,0.2,18,1.7,18h17.7C20.8,18,21.4,16.9,20.7,15.6z M11.5,15h-2  v-2h2V15z M11.3,12H9.7L9.5,6h2L11.3,12z"></path>
  </symbol>
</svg>

The above output is created manually using svgstore.

If the current behavior is a bug, please provide the steps to reproduce, at least part of webpack config with loader configuration and piece of your code.
The best way is to create repo with minimal setup to demonstrate a problem (package.json, webpack config and your code).
It you don't want to create a repository - create a gist with multiple files

If this is a feature request, what is motivation or use case for changing the behavior?
I don't want any extra requests in production to fetch the icons as a separate resource and then injecting them. Also, inline SVGs are the only cross-browser way to customize them using CSS.

Please tell us about your environment:

Node.js version: 8.6.0
webpack version: 3.6.0
svg-sprite-loader version: 3.2.5
OS type & version: macOS High Sierra

Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)

feature interop

Source