- 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
Chris Coyier
on
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today.
Thanks for the link to our webpack loader, Chris! Edge does actually support
<use>with an external path in 13, so hopefully those polyfills aren’t needed for long. That being said, I’ll need to check out svgxuse. Their readme claims they don’t do any kind of polling, so I’m curious how they’d respond to an icon being changed by javascript.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!