SVG Icon Systems

A talk for the Vienna Webclerks meetup.
Workflows for simple and effective icon systems using SVG, the symbol / use method and Grunticon.

Transcript

1. SVG Icon Systems Max Böck · @mxbck · mxb.at
2. SVG FTW* • Semantics • Accessibility • Better Rendering • Styling & Animation • Customization • N✪ weird Bugs css-tricks.com/icon-fonts-vs-svg/ github.com/blog/2112-delivering-octicons-with-svg poststatus.com/contributing-to-twenty-seventeen-theme/ sarasoueidan.com/blog/icon-fonts-to-svg ianfeather.co.uk/ten-reasons-we-switched-from-an-icon-font-to-svg foxland.fi/switch-away-icon-fonts-svg/ www.lukew.com/ff/entry.asp?1859 mir.aculo.us/2014/10/31/icon-fonts-vs-inline-svg/ twitter.com/jensimmons/status/719378653100912640 witter.com/chriscoyier/status/656827701706256384 *
3. Icon Fonts SVG Icons
5. Commercial Icon Sets Streamline 5000+ Icons www.streamlineicons.com
6. Free & Open Source Google Material Design material.io/icons Font Awesome SVG github.com/encharm/Font-Awesome-SVG-PNG Iconic useiconic.com/open The Noun Project thenounproject.com
7. Pro Tip: SVGsus get it?
8. Get it on the page
9. Symbol / Use <svg> <symbol viewBox=”0 0 30 30” id=”mario”> <path d="M5 13.18v4L12 63v2.1L7 ...” /> </symbol> <symbol id=”luigi”>... <symbol>... </svg> <svg> <use xlink:href=”sprite.svg#mario”></use> </svg> Sprite Sheet Page
10. Browser Support
11. Browser Support
12. IE 9-11 POLYFILL: svgxuse 2KB minified, https://github.com/Keyamoon/svgxuse
13. <span class="icon icon--mario"> <svg role="img" aria-hidden=”true” // aria-label=”Mario”> <use xlmns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/icons/sprite.svg#mario" ></use> </svg> </span> Icon Markup
14. function Icon({ name }){ const iconClass = [‘icon’, `icon--${name}`].join(‘ ‘); const iconPath = `assets/icons/sprite.svg#${name}`; return ( <span className={iconClass}> <svg role="img" aria-hidden=”true”> <use xlink:href={iconPath}></use> </svg> </span> ) } <Icon name=”mario” /> React (simplified)
15. Demo Time!
16. Thank You! @mxbck