Skip to content

Instantly share code, notes, and snippets.

@oknoway
Created November 9, 2015 22:05
Show Gist options
  • Save oknoway/70f15acaa835703c7406 to your computer and use it in GitHub Desktop.
Save oknoway/70f15acaa835703c7406 to your computer and use it in GitHub Desktop.
function loadSVG( url ) {
// AJAX-y load the SVG icon
var req = new XMLHttpRequest();
req.onload = serializeSVG;
req.open( 'get', url, true );
req.send( null );
}
function serializeSVG() {
// Turn the SVG into a serialized string
var ser = new XMLSerializer();
toggleIcon = ser.serializeToString( this.responseXML.documentElement );
insertToggleIcon( toggleIcon );
}
function insertToggleIcon( icon ) {
// insert the toggle icon
var navToggle = document.getElementById( 'nav-toggle' );
navToggle.insertAdjacentHTML( 'afterbegin', '<span class="toggle-icon icon">' + icon + '</span>' );
}
// set toggle icon to svg if supported
if ( Modernizr.svg ) {
loadSVG( wpURLs.stylesheet_directory_uri + '/img/icons/icon_hamburger.svg' );
}
@jpdevries
Copy link

I've been using the <svg> <use> trick lately which is so awesome. I've got a grunt workflow that packs all the fontawesome icons i use into a icons.svg sprite. Each icon has an id in the sprite that is referenced using a hash to include just that part of the image.

Accessibly Load SVG Icons

<div class="dark sticky stuck navigation top">
    <nav class="main-nav row">
        <a href="#">
            <h2>
                <svg class="light icon">
                  <title>Globe Icon</title>
                  <use xlink:href="assets/img/icons.svg#icon-globe"></use>
                </svg>
                Home
            </h2>
        </a>
        <a href="#">
            <h2>
                <svg class="light icon">
                  <title>Bookmark Icon</title>
                  <use xlink:href="assets/img/icons.svg#icon-bookmark"></use>
                </svg>
                Story
            </h2>
        </a>
        <a href="#">
            <h2>
                <svg class="light icon">
                  <title>Group of People Icon</title>
                  <use xlink:href="assets/img/icons.svg#icon-users"></use>
                </svg>
                Discuss
            </h2>
        </a>
        <a href="#">
            <h2>
                Media
                <svg class="light icon">
                  <title>Bullhorn Icon</title>
                  <use xlink:href="assets/img/icons.svg#icon-bullhorn"></use>
                </svg>
            </h2>
        </a>
        <a href="#">
            <h2>
                Contact
                <svg class="light icon">
                  <title>Envelope Icon</title>
                  <use xlink:href="assets/img/icons.svg#icon-envelope"></use>
                </svg>
            </h2>
        </a>
        <a href="#" class="donate">
            <h2>
                Donate
                <svg class="light icon">
                  <title>Heart Icon</title>
                  <use xlink:href="assets/img/icons.svg#icon-heart"></use>
                </svg>
            </h2>
        </a>
    </nav>
    <nav class="sub-nav row">
        <a href="#">
            <h4>
                <svg class="light icon">
                  <title>Gear Icon</title>
                  <use xlink:href="assets/img/icons.svg#icon-cog"></use>
                </svg>
                Settings
            </h4>
        </a>
        <a href="#">
            <h4>
                <svg class="light icon">
                  <title>Pencil Icon</title>
                  <use xlink:href="assets/img/icons.svg#icon-pencil-square"></use>
                </svg>
                Join
            </h4>
        </a>
        <a href="#">
            <h4>
                <svg class="light icon">
                  <title>Right Arrow Icon</title>
                  <use xlink:href="assets/img/icons.svg#icon-sign-in"></use>
                </svg>
                Login
            </h4>
        </a>
    </nav>
</div>

SVG PNG Fallback

        <script>
            (function(){
                if(Modernizr.svg) return false; 

                var icons = document.querySelectorAll('svg.icon');
                for(var i = 0; i < icons.length; i++) {
                    var icon = icons[i];
                    var light = icon.classList.contains('light');
                    var use = icon.querySelector('use');
                    var href = use.getAttribute('xlink:href');
                    var iconName = href.substring(href.indexOf('#') + 1 + 5);

                    var img = document.createElement('img');
                    img.setAttribute('class','icon');
                    img.setAttribute('src','assets/img/src/icons/' + ((light) ? 'white' : 'black') + '/png/256/' + iconName + '.png');

                    icon.outerHTML = img.outerHTML;
                }
            })();
        </script>

Only downside is your SVG Sprite can't be loaded from another domain, yet jonathantneal/svg4everybody#16

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment