Created
August 6, 2014 15:26
-
-
Save w0rm/621a56a353f7b2a6b0db to your computer and use it in GitHub Desktop.
Load combined svg file into body
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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 has a bug. It will prevent clip-paths from working when using statements. See this stackoverflow question. By changing
display: nonetowidth: 0; height: 0it will work in all cases.