Category: icon system

A Couple SVG Icon Links

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 imp...

Align SVG Icons to Text and Say Goodbye to Font Icons

Elliot Dahl: 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 th...

Icons and Teams

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 f...

Creating an SVG Icon System with React

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