- WordPress’ new TwentySeventeen default theme uses an SVG icon system. It was contributed by Sami Keijonen who had some prior experience in that, and wrote up a bit about it here. The theme has functions that spit out correct/accessible markup for them.
- Webpack now has a SVG sprite loader, which allows you to
import myGreatIcon from './my-great-icon.svg';like you do with other resources in webpack.
- Both aforementioned projects note IE/Edge’s lack of ability to
<use>from a file path and thus recommend svgxuse and svg4everybody respectively.
- I still haven’t seen anyone talk about an SVG icon system where they say, screw it, we’re running HTTP/2, we’re just going with
<img src="icon-x.svg" alt="">. I’ve also never seen an SVG icon system that utilized fragment identifiers (Safari and Android are problematic here, so that’s not terribly surprising).
A Couple SVG Icon Links
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!
Thanks for the link to our webpack loader, Chris! Edge does actually support
In regards to Jeremy’s comment above, after reading this article I had a minor freak out because i use
<use>tags for svg all over my portfolio site. I just checked on Edge 13/14 and all is well. I also need to checkout svgxuse. Thanks for the great article!
Like a guy named Chris Coyer said in one of his books… I load my SVG sprite in AJAX in each page of the website so I can
<use>them in Edge without svgxuse or svg4everybody. This way, the browser will cache the sprite. Great!