Question

I have an SVG sprite file which was supplied by designers for my app. The convention they'd like me to use to render their SVG icons is to load the sprite at the top of the <body> element and then render icons like this:

<svg class="u-icon-gear-dims">
    <use xlink:href="#gear"></use>
</svg>

This works when I add the SVG sprite inline, that is, plop the entire contents of the SVG sprite into my template.html file. Adding the sprite inline makes the html file ugly but, more significantly, having to manually do it raises maintainability concerns.

I'm currently referencing the individual SVGs directly to render icons, but this has performance implications as there is often a split second delay when the icon has not yet been loaded.

I found this SO topic, but there does not appear to be a viable answer.

FWIW, our app uses webpack and I'm currently trying to load the SVG sprite into a template HTML file.

How can I dynamically load an SVG sprite from a file in an HTML file?

Answer 1

Are you using PHP? There are methods for including SVG markup inline using backend languages. https://sheelahb.com/blog/how-to-get-php-to-play-nicely-with-svg-files/

Dynamically loading a sprite SVG file

1 个答案: