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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
This has a bug. It will prevent clip-paths from working when using statements. See this stackoverflow question. By changing
display: none
towidth: 0; height: 0
it will work in all cases.