Upgrade to Pro — share decks privately, control downloads, hide ads and more …

SVG Icon Systems

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.

Max Böck

February 27, 2017
Tweet

More Decks by Max Böck

Other Decks in Technology

Transcript

  1. SVG Icon Systems
    Max Böck · @mxbck · mxb.at

    View full-size 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 full-size slide

  3. Icon Fonts SVG Icons

    View full-size slide

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

    View full-size slide

  5. 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 full-size slide

  6. Pro Tip: SVGsus get it?

    View full-size slide

  7. Get it on the page

    View full-size slide

  8. Symbol / Use


    View full-size slide

  9. Browser Support

    View full-size slide

  10. Browser Support

    View full-size slide

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

    View full-size slide



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


    Icon Markup

    View full-size slide

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





    )
    }

    React (simplified)

    View full-size slide

  14. Thank You!
    @mxbck

    View full-size slide