SVG Icon Grid

icon-grid.html

<div id="styleguide-icon-grid"></div>
<object data="/assets/icons.svg" id="svgembed" height=0; width=0></object>

<script>
var grid = document.querySelector('#styleguide-icon-grid');
var tmpl = '<div class="item"><svg class="icon"><use xlink:href="/assets/icons.svg#{id}"></use></svg><span>#{id}</span></div>';

function svgloaded() {
  var svgEmbed = document.querySelector("#svgembed");
  var svg = svgEmbed.getSVGDocument();
  var symbols = svg.querySelectorAll("symbol");

  for(i=0;i<symbols.length;i++) {
    grid.innerHTML += tmpl.split('{id}').join(symbols[i].id);
  }
}

document.addEventListener("DOMContentLoaded", function(){
  var svgEmbed = document.querySelector("#svgembed");
  svgEmbed.addEventListener("load", svgloaded);
},false);
</script>