As we know, Hugo can resize, convert image format, and minify images, including svgs. Hugo also provides the option of combining CSS and JS files. It would be great if Hugo could generate SVG Sprites from a single file of all the used SVG icons on the website.
I use inline svg, which significantly increases the size of the html, or I utilize a 3rd party to make svg sprites for all icons used and save them in a static folder. an svg code that looks something like this:
In svg sprite is converted to:
<path ... path for icon 1></path>
<path ... path for icon 2></path>
It’s difficult to keep track of roughly 200 bespoke icons and heroicons on each website. Hugo’s ability to produce svg sprite files from “layouts/partial/icons.html” or “assets/svgs” and build the file for only the icons used on a website would be extremely beneficial to the improvement of performance quality.
The argument against inline svg is that it reduces the code to text ratio and increases the size of the HTML content significantly, which has an impact on performance and SEO.
I found myself in this dilemma recently. I decided to split my icons into different SVG sprites and loading them as partials depending on which page(s) they are required. It would be tedious work for your site (I only have like 10 SVG icons), but if Hugo had this feature, it would be very nice!
I understand your request. Having one SVG sprite and letting hugo pick those only in use. I second this feature if it were possible to implement it. Sad this discussion never got a response. I found this post via Google Search.