Using SVG Fragment Identifiers with Webpack

Viewed 283

In my Project I would like to use SVG Fragment identifiers, as proposed in here, meaning:

I want to be able to define a ViewBox in my SVG-File:

<view id="icon-clock-view" viewBox="0 0 32 32" />

I want to access the ViewBox in my CSS like this:

.icon-heart {
      background: url(mySvg.svg#icon-heart-view) no-repeat;
}

Here is a CodePen where this works perfectly. But as soon as i bundle it with webpack, the URL can not be resolved (net::ERR_INVALID_URL).

If I load the svg resource from a non-local source (background: url("https://[path].svg) it is working, so I think it seems to be the file-loader i included in my project cant cope with identfiers like #icon-heart-view.

What I found out already:

  • the svg-url-loader but this does not work either.
  • there also is an npm module called svg-sprite, which creates svg spritesheets. But as i only have problems with LOADING the svg, this seems to be a little over-the-top.

Is there a webpack loader that can cope with SVG Fragment Identifiers?

0 Answers
Related