- 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).
At Pivotal we've created an SVG icon system with React for use on our suite of products. This article is about my approach to styling the SVG icon system with CSS to make it easy and effective to use.
Alignment and icons (of any sort) will probably always be a bit tricky. It depends on two things that will be different on every site: the font and the icons. Elliot was able to get perfect alignment with Arial by pulling the icons down with
bottom: -0.125em; because Arial sites right along the baseline and the icons themselves were designed with a 12.5% ring of white space around the edges. It's a fairly common practice to design SVG icons with space along the edges (as annoying as it might be for alignment) because without the space, you might get awkward clipping on the edges with certain browsers/resolutions/zooming/etc (sorry I don't have more detail handy).
Say you're working on a website that uses an icon system. Lots of people who work on the site interact with the icon system. Designers create new icons, they tweak existing ones, they have ideas on what they want the icons to do. Developers building out the pages of the site use the system.
Say you're the front-end developer. You're implementing this system. You're the middle man. You're the creator and consumer of this system.
What do you ask of the designers?
I recently went to Michael Jackson and Ryan Florence’s ReactJS Training. I was really excited to attend, partially because I had so many questions about SVG and React. There are a lot of bits about working with React and SVG, and especially manipulating it, that aren’t quite supported yet. One of the major gaps for me was the
<use></use> element, as most SVG icon systems are built with
I asked Michael if he thought better support might be coming for some of these features, but he showed me a much better way of working with it, circumventing this method entirely. We'll go over this technique so that you can get started writing scalable SVG Icon Systems in React, as well as some tricks I'd propose could work nicely, too.
I've talked a good bit about SVG's
<use></use> around here and using it to build an icon system. The beauty of
<use></use> is that you can reference just a part of some SVG defined elsewhere and draw just that part somewhere else. That ability allows you to build a whole system out of it, solving the "many images in one request, because that's super efficient" problem that we've solved in the past with CSS sprites and icon fonts.
<use></use> means inline SVG. It doesn't help you when you want to use a part of a larger SVG in SVG-as-
<img /> or SVG-as-
background-image. That's where fragment identifiers come in.