A Couple SVG Icon Links

Avatar of Chris Coyier
Chris Coyier on

  • 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).