Drop SVG sprite for font on docs homepage

[mdo]

Drop usage of large SVG sprite on homepage and in copy buttons, replacing them with the icon fonts. Goal is to improve performance and page load since the sprite is so large.

TODO:

• Fix line-height discrepancy
• Redirect font page to Sprite page
• Fix Sprite page SVG 404
• Fix clipboard icon TypeError on click

Preview:

• https://deploy-preview-824--bootstrap-icons.netlify.app/
• https://deploy-preview-824--bootstrap-icons.netlify.app/sprite/

[XhmikosR]

Not sure if this improves things a lot. I mean, it certainly reduces the total bytes downloaded, but I believe the culprit is the HTML size/number of DOM elements, which is still the same. That being said, from a quick look, it shouldn't hurt.

Avoid an excessive DOM size | 7,236 elements

Give me a few days to test this out :)

[mdo]

No rush! Appreciate the eyes on it. I'd also be in favor of keeping SVGs and showing things differently on the homepage. Maybe show latest release or specific categories? Or show them all by categories? Open to ideas.

[XhmikosR]

@mdo LGTM, let's land it. My only suggestion would be to maybe add a new sprite page later so that we have a visual test for the sprite?

[XhmikosR]

@mdo I say we move with #706 and then I'll adapt this PR to include a sprite page (open to suggestions for the URL)

[XhmikosR]

@mdo I pushed some patches, now it looks better I think. If it LGTY too, let's land this :)

[XhmikosR]

We save ~2000 (-16%) DOM elements and ~1.3MB (-45%) uncompressed / ~200KB (-35%) brotli transfer size for homepage.

Still far from perfect, but until we figure out a way to use pagination or something else, this should improve things noticeably, especially on slow devices/browsers.