Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Load combined svg file into body
<html>
<body>
<!-- load combined svg file (with symbols) into body-->
<script>
(function (doc) {
var scripts = doc.getElementsByTagName('script')
var script = scripts[scripts.length - 1]
var xhr = new XMLHttpRequest()
xhr.onload = function () {
var div = doc.createElement('div')
div.innerHTML = this.responseText
div.style.display = 'none'
script.parentNode.insertBefore(div, script)
}
xhr.open('get', '/svg/icons.svg', true)
xhr.send()
})(document)
</script>
<!-- display single icon from combined file -->
<svg width="40" height="40"><use xlink:href='#icon-name'></svg>
</body>
</html>
@fatso83

This comment has been minimized.

Copy link

fatso83 commented Feb 15, 2017

This has a bug. It will prevent clip-paths from working when using statements. See this stackoverflow question. By changing display: none to width: 0; height: 0 it will work in all cases.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.