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?