Grunticon SVG inliner - automatically replace grunticon-produced SVG backgrounds with inline SVGs. Framework-agnostic.

grunticon-svg-inliner.js

(function () {
    var waiting = setInterval( function () {
        var nodes = document.querySelectorAll('.inline-svg[class^="icon-"], .inline-svg[class*=" icon-"]');
        for ( var i = 0; i < nodes.length; i++ ) {
            // Pull the background in (this should always be a background image)
            var background = document.defaultView.getComputedStyle(nodes[i])['background-image'];

            // Check to see if an element has a background - if so, background has loaded
            if (background && background !== 'none') {
                if ( waiting ) clearInterval( waiting );

                // Strip out the url bits
                var contents = /<svg.+svg>/i.exec( decodeURIComponent( background.substring( 4, background.length - 1 ) ) );
                
                if ( contents && contents.length ) {
                    contents = contents[0];

                    // Kill off embedded stylesheets because they're not needed and can override the global styles
                    var styles = /<style.+style>/i.exec( contents );
                    if ( styles && styles.length ) contents = contents.replace( styles[0], '' );

                    nodes[i].innerHTML = contents;
                    nodes[i].style.backgroundImage = 'none';
                }
            }
        }
    }, 2 );
})();

Minified:

!function(){var e=setInterval(function(){for(var n=document.querySelectorAll('.inline-svg[class^="icon-"], .inline-svg[class*=" icon-"]'),t=0;t<n.length;t++){var l=document.defaultView.getComputedStyle(n[t])["background-image"];if(l&&"none"!==l){e&&clearInterval(e);var a=/<svg.+svg>/i.exec(decodeURIComponent(l.substring(4,l.length-1)));if(a&&a.length){a=a[0];var c=/<style.+style>/i.exec(a);c&&c.length&&(a=a.replace(c[0],"")),n[t].innerHTML=a,n[t].style.backgroundImage="none"}}}},2)}();