SVG Icon System

[Kriesse]

We’ll need an icon system that allows us to easily add and update icons and re-use them across projects.

I'd like a system where we

1. keep all icons as individual files in one folder, e.g. /svg
2. automatically optimize and combine those icons as <symbol>s into one big SVG sprite
3. Those <symbol>s can then be referenced in in the markup via <use>, which also allows styling via CSS

See this article for details*: https://css-tricks.com/svg-sprites-use-better-icon-fonts/

Maybe we also don’t need the whole sprite system, but can do something like this? https://css-tricks.com/creating-svg-icon-system-react/

I'd need help with both approaches. Feedback welcome!

/cc @laurengarcia

*some good extended reading on svg sprites and styling them: https://css-tricks.com/svg-symbol-good-choice-icons/ https://css-tricks.com/gotchas-on-getting-svg-into-production/ http://tympanus.net/codrops/2015/07/16/styling-svg-use-content-css/

[laurengarcia]

Cool, this is an interesting pattern. I like the idea of using sprites vs icon fonts just for the ability to use aria properties alone.

I'm curious (and maybe a little skeptical) how yo-yo and the use element will work together since it sounds like use element is a little sketchy. The svg-react article says React doesn't need use, and I can probably figure out a way for us not to need it either. The pattern of having the SVGs be re-usable components (as in the svg-react article) is cool, although obviously we'd have to translate from JSX to plain vanilla JS/HTML.

I wouldn't want to spend a horrible amount of time on this, but if it is doable within a reasonable timeframe then I am down.

[Kriesse]

I started to work on an svg icon system in this branch, following this pattern.

Still to do:

• [ ] figure out how to expose the svg sprite to users of the dat-design module, so it can be easily included in their projects.
• [ ] figure out how to create icon components that come with options for classes and aria attributes. I like the React version described here, but not sure how to get there.

@laurengarcia Can you help me out here^? Maybe all of this shouldn't happen in this module anyway, but per each project that uses it?

• [ ] For the styleguide website: make an include out of the svg sprite, so all of this updates automatically when icons are built.
• [ ] update documentation in styleguide and README
• [x] complete and clean up source icons, make them easy to style