SVG Icon Systems

363ae3986ffcb775ca374c83576121d1?s=47 Max Böck
February 27, 2017

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.

363ae3986ffcb775ca374c83576121d1?s=128

Max Böck

February 27, 2017
Tweet

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

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