Icons are great and all, but as we've been shown time and time again, they often don't do the job all by themselves. Even if you do a good job with the accessibility part and make sure there is accompanying text there for assistive technology, in an ironic twist, you might be confusing people who browse visually, like the situation Matt Wilcox describes with his mother in this linked article.… Read article
- 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
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 … Read article
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 … Read article
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.
But … Read article