Skip to content

Instantly share code, notes, and snippets.

@davatron5000
Created January 14, 2015 21:27
Show Gist options
  • Save davatron5000/6d8b44724df94bfcf9af to your computer and use it in GitHub Desktop.
Save davatron5000/6d8b44724df94bfcf9af to your computer and use it in GitHub Desktop.
SVG Icon Grid
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment