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: nonetowidth: 0; height: 0it will work in all cases.