svg-sprite-loader

svg-sprite-loader copied to clipboard

Do you want to request a feature, report a bug or ask a question? Question

What is the current behavior? Extract mode is moving the sprite sheet to the build folder and hashing the filename, which is what I want

What is the expected behavior? I'd then like to be able to link to the svgs in the html, but can't because of the hashed file name.

What's the best practice here? Inlining the svgs using the html webpack plugin interop and an ejs template works, but I'm not sure I want them inlined at the start of the document. Is there any way to keep the sprite sheet external and link to it?

Thanks!

Please tell us about your environment:

• Node.js version: 8.12.0
• webpack version: 4.35.2
• svg-sprite-loader version: 4.1.6
• OS type & version: windows 10

The only solution I see for now is to not use hashing and use the default sprite.svg:

<svg>
  <use xlink:href="sprite.svg#my-sprite"></use>
</svg>

but we loose all the advantages of hashing (most notably caching in the browser). A workaround is to post process the generated html and manually add an id as query parameter:

content = content.replace(
  /sprite.svg/g,
  `sprite.svg?${shortid.generate()}`
);

Obviously post processing this is not ideal. Ideally xlink:href should receive the sprite file path from svg-sprite-loader somehow.