Several Webflow sites I have built in the past where they are icon heavy suffer from too many HTTP requests. When adding an SVG as an image it creates an http request for each one.
My solution to this is using SVG sprites, I do this by creating an embed for each icon eg:
<svg viewBox="0 0 100 100" class="icon pencil"> <use xlink:href="#shape-codepen"></use></svg>
Unfortunately this is hard to implement in Webflow for 2 main reasons.
This means no way to have a menu with svg use icons inside it.
Andy Neale
.svg){kind=logo}
Andy, have a look at my recommended solution here- I think it solves this and a number of other styling and inline-embedding challenges for SVG's.
https://wishlist.webflow.com/ideas/WEBFLOW-I-1528
However one thing I'm not certain of is whether there is a fundamental conflict between SVG's xlink:href and a containing HTML A href. Ultimately that still has the potential for the link-within-link conflict, and may be unsupported by some browsers, or the HTML standard itself? Haven't found any references to this on Google though.
Attachments Open full size
I want to start using several repeating icons across a site as well; using a sprite would dramatically decrease kbs, and better still t the sprite source can be changed and update the iconography across the site with one simple update.
Attachments Open full size