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
   

   View Slide

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
   *
   

   View Slide

3. Icon Fonts SVG Icons
   

   View Slide

4. View Slide

5. Commercial Icon Sets
   Streamline
   5000+ Icons
   www.streamlineicons.com
   

   View Slide

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
   

   View Slide

7. Pro Tip: SVGsus get it?
   

   View Slide

8. Get it on the page
   

   View Slide

9. Symbol / Use
   
   
   

   View Slide

10. Browser Support
    

    View Slide

11. Browser Support
    

    View Slide

12. IE 9-11 POLYFILL:
    svgxuse
    2KB minified, https://github.com/Keyamoon/svgxuse
    

    View Slide

13. 
    
    xlmns:xlink="http://www.w3.org/1999/xlink"
    xlink:href="assets/icons/sprite.svg#mario"
    >
    
    
    Icon Markup
    

    View Slide

14. function Icon({ name }){
    const iconClass = [‘icon’, `icon--${name}`].join(‘ ‘);
    const iconPath = `assets/icons/sprite.svg#${name}`;
    return (
    
    
    
    
    
    )
    }
    
    React (simplified)
    

    View Slide

15. Demo Time!
    

    View Slide

16. Thank You!
    @mxbck
    

    View Slide