Recently, I received an SVG sprite file from our designers to use in my app. The specified convention is to load the sprite at the top of the <body> element and then render icons using a specific code snippet:
<svg class="u-icon-gear-dims">
<use xlink:href="#gear"></use>
</svg>
Although this method works when I inline the SVG sprite directly into my template.html file, it makes the HTML file messy and raises concerns about maintainability.
Currently, I am referencing individual SVGs to render icons, but this approach causes performance issues as there is sometimes a noticeable delay before the icon loads.
I came across a discussion on Stack Overflow about loading an SVG sprite externally, but unfortunately, a satisfactory solution was not provided.
For context, our app uses webpack, and I am currently exploring ways to dynamically load the SVG sprite into a template HTML file.
Is there a way to dynamically load an SVG sprite from a separate file within an HTML document?