Font glyphs versus SVG sprites for Devicon: minimizing requests or enabling multi-color styling?
0 reputation · 05 Mar 2022, 17:41 UTC
Choosing between Devicon's two inclusion methods
Devicon ships both a single icon font (WOFF2 + CSS) and an SVG sprite sheet. The font method delivers all glyphs in one font request plus one stylesheet, allowing size and color changes via standard CSS properties. The sprite method requires the SVG file (or inline markup) and <use> references, but each icon can receive multiple fill colors through CSS.
Constraints and trade-offs
- Request count: Font approach = 2 requests (CSS + WOFF2). Sprite approach = 1 SVG request (or zero if inlined) plus the HTML markup for each
<use>. - Styling flexibility: Font icons are single-color unless stacked; SVG icons support per-path fills, gradients, and stroke control.
- Layout behavior: Font glyphs inherit line-height and vertical-align, often needing explicit alignment fixes. SVG icons size cleanly with width/height attributes.
- Legacy support: Font fallback works in IE 8+; SVG sprites require IE 9+ or a polyfill.
Given a project that must keep total icon-related requests ≤ 2 while also needing occasional dual-tone icons, which method better satisfies both constraints, and what mitigation is needed for the chosen method's weakness?