Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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)

Issue Analytics

State:
Created 6 years ago
Reactions:4
Comments:7 (5 by maintainers)

Top GitHub Comments

5reactions

kisenkacommented, Oct 6, 2017

Try to implement this on the next week.

2reactions

kisenkacommented, Oct 19, 2017

Shipped with svg-sprite-loader@3.4.0. See corresponding example.

Top Results From Across the Web

SVG sprite html webpack loader and plugin

Webpack loader and plugin to generate a SVG sprite with elements and inject it in html built by html-webpack-plugin - GitHub ...

How to use webpack and a custom html template to serve ...

I'm trying to use new HtmlWebpackInlineSVGPlugin() but with no luck. The final output html file in the dist folder does not change the...

svg-sprite-loader

to inline sprite content directly to the page. All extracted sprites stored in `htmlWebpackPlugin.files.sprites` template variable. 5, It's an object where key ...

svg-sprite-loader

Runtime for browser. Sprites are rendered and injected in pages automatically, you just refer to images via <svg><use xlink:href="#id"></use></svg> . Isomorphic ...

Support SVG's in JS - Malibu

The first thing you need to install the package npm install svg-sprite-loader -D . · Go to webpack.config.js and modify the webpack config...