Last active
August 29, 2015 14:05
-
-
Save timboslice69/b12b3f4640fbda450b87 to your computer and use it in GitHub Desktop.
Replacing xlink svgs with symbol contents on load
This file contains hidden or 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
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title></title> | |
| <script> | |
| window.onload = function(){ | |
| var symbol, parent, elements = document.getElementsByTagName("use"); | |
| while (elements.length > 0){ | |
| symbol = document.getElementById(elements[0].attributes['xlink:href'].value.replace('#', '')); | |
| parent = elements[0].parentNode; | |
| parent.setAttribute('viewBox', symbol.attributes.viewBox.value); | |
| parent.innerHTML = symbol.innerHTML; | |
| } | |
| }; | |
| </script> | |
| <style> | |
| svg.icon { | |
| width: 22px; | |
| height: 32px; | |
| } | |
| svg.icon path { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <svg style="display: none;" id="icons" viewBox="0 0 32 32"><symbol viewBox="0 0 32 32" id="checkmark-circle"><title>checkmark-circle</title> <g id="svgstoref28fee3436d7ebd3feb0e16efa3c98f8icomoon-ignore"> <line stroke-width="1" x1="" y1="" x2="" y2="" stroke="#449FDB" opacity=""/> </g> <path d="M16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zM13 26l-6.625-8.625 2.938-3.063 3.688 4.688 11.563-9.438 1.438 1.438-13 15z" fill="#333333"/> </symbol><symbol viewBox="0 0 32 32" id="facebook"><title>facebook</title> <g id="svgstoref165dcfbe6d204c894ea5e1e0673b865icomoon-ignore"> <line stroke-width="1" x1="" y1="" x2="" y2="" stroke="#449FDB" opacity=""/> </g> <path d="M17.996 32h-5.996v-16h-4v-5.514l4-0.002-0.007-3.248c0-4.498 1.22-7.236 6.519-7.236h4.412v5.515h-2.757c-2.064 0-2.163 0.771-2.163 2.209l-0.008 2.76h4.959l-0.584 5.514-4.37 0.002-0.004 16z" fill="#333333"/> </symbol><symbol viewBox="0 0 32 32" id="google"><title>google</title> <g id="svgstoredc5f098399880f67e12d233d760a149cicomoon-ignore"> <line stroke-width="1" x1="" y1="" x2="" y2="" stroke="#449FDB" opacity=""/> </g> <path d="M24.673 2c0 0-6.28 0-8.373 0-3.754 0-7.287 2.844-7.287 6.138 0 3.366 2.559 6.083 6.378 6.083 0.266 0 0.524-0.005 0.776-0.024-0.248 0.475-0.425 1.009-0.425 1.564 0 0.936 0.503 1.694 1.14 2.313-0.481 0-0.945 0.014-1.452 0.014-4.649-0-8.228 2.961-8.228 6.032 0 3.024 3.923 4.916 8.573 4.916 5.301 0 8.228-3.008 8.228-6.032 0-2.425-0.715-3.877-2.928-5.442-0.757-0.536-2.204-1.839-2.204-2.604 0-0.897 0.256-1.34 1.607-2.395 1.385-1.082 2.365-2.603 2.365-4.372 0-2.106-0.938-4.159-2.699-4.837h2.655l1.874-1.354zM21.748 22.483c0.066 0.28 0.103 0.569 0.103 0.863 0 2.444-1.575 4.353-6.093 4.353-3.214 0-5.535-2.035-5.535-4.478 0-2.395 2.879-4.389 6.093-4.354 0.75 0.008 1.449 0.129 2.083 0.334 1.745 1.213 2.996 1.899 3.349 3.281zM16.603 13.368c-2.157-0.065-4.207-2.413-4.58-5.246s1.074-5.001 3.231-4.937c2.157 0.065 4.207 2.338 4.58 5.171s-1.075 5.077-3.231 5.012z" fill="#333333"/> </symbol><symbol viewBox="0 0 32 32" id="image"><title>image</title> <path d="M0 4v26h32v-26h-32zM30 28h-28v-22h28v22zM22 11c0-1.657 1.343-3 3-3s3 1.343 3 3c0 1.657-1.343 3-3 3-1.657 0-3-1.343-3-3zM28 26h-24l6-16 8 10 4-3z" fill="#999999"/> </symbol><symbol viewBox="0 0 32 32" id="loop"><title>loop</title> <g id="svgstore0b074ae24d1c16bf32d444c291ce85b5icomoon-ignore"> <line stroke-width="1" x1="" y1="" x2="" y2="" stroke="#449FDB" opacity=""/> </g> <path d="M27.313 4.687c-2.895-2.896-6.895-4.687-11.313-4.687-6.859 0-12.709 4.316-14.984 10.381l3.746 1.405c1.706-4.548 6.094-7.786 11.238-7.786 3.314 0 6.313 1.344 8.485 3.515l-4.485 4.485h12v-12l-4.687 4.687zM16 28c-3.314 0-6.313-1.343-8.485-3.515l4.485-4.485h-12v12l4.687-4.687c2.895 2.896 6.894 4.687 11.313 4.687 6.859 0 12.709-4.316 14.984-10.381l-3.746-1.405c-1.706 4.548-6.094 7.786-11.238 7.786z" fill="#333333"/> </symbol><symbol viewBox="0 0 32 32" id="menu"><title>menu</title> <g id="svgstored81370fa18da299c9944151f152a8981icomoon-ignore"> <line stroke-width="1" x1="" y1="" x2="" y2="" stroke="#449FDB" opacity=""/> </g> <path d="M0 12h22v4h-22v-4zM0 6h22v4h-22v-4zM0 18h22v4h-22v-4zM0 24h22v4h-22v-4zM24 18l4 6 4-6h-8zM32 16l-4-6-4 6h8z" fill="#333333"/> </symbol><symbol viewBox="0 0 32 32" id="menu2"><title>menu2</title> <g id="svgstoree99c82802b50c0f3de13a77b6a242e3bicomoon-ignore"> <line stroke-width="1" x1="" y1="" x2="" y2="" stroke="#449FDB" opacity=""/> </g> <path d="M2 6h28v6h-28zM2 14h28v6h-28zM2 22h28v6h-28z" fill="#333333"/> </symbol><symbol viewBox="0 0 32 32" id="pause"><title>pause</title> <g id="svgstoree697bc985dd9f8e2de56da8200cfa21ficomoon-ignore"> <line stroke-width="1" x1="" y1="" x2="" y2="" stroke="#449FDB" opacity=""/> </g> <path d="M4 4h10v24h-10zM18 4h10v24h-10z" fill="#333333"/> </symbol><symbol viewBox="0 0 32 32" id="play"><title>play</title> <g id="svgstore231f0d09881fe737ee951e404febf9a0icomoon-ignore"> <line stroke-width="1" x1="" y1="" x2="" y2="" stroke="#449FDB" opacity=""/> </g> <path d="M6 4l20 12-20 12z" fill="#333333"/> </symbol><symbol viewBox="0 0 32 32" id="shield"><title>shield</title> <g id="svgstore74a76f1f60725462282e0857832051abicomoon-ignore"> <line stroke-width="1" x1="" y1="" x2="" y2="" stroke="#449FDB" opacity=""/> </g> <path d="M30 0l-14 4-14-4c0 0-0.141 1.616 0 4l14 4.378 14-4.378c0.141-2.384 0-4 0-4zM2.256 6.097c0.75 7.834 3.547 21.007 13.744 25.903 10.197-4.896 12.995-18.069 13.744-25.903l-13.744 5.167-13.744-5.167z" fill="#333333"/> </symbol><symbol viewBox="0 0 32 32" id="spam"><title>spam</title> <g id="svgstorec54ca954b40e9963aaa5e2d166d581e8icomoon-ignore"> <line stroke-width="1" x1="" y1="" x2="" y2="" stroke="#449FDB" opacity=""/> </g> <path d="M32 23l-9-23h-14l-9 9v14l9 9h14l9-9v-14l-9-9zM18 26h-4v-4h4v4zM18 18h-4v-12h4v12z" fill="#333333"/> </symbol><symbol viewBox="0 0 32 32" id="stack"><title>stack</title> <g id="svgstore7fab08effeed9be0c5ce302adb532fa9icomoon-ignore"> <line stroke-width="1" x1="" y1="" x2="" y2="" stroke="#449FDB" opacity=""/> </g> <path d="M32 10l-16-8-16 8 16 8 16-8zM16 4.655l10.689 5.345-10.689 5.345-10.689-5.345 10.689-5.345zM28.795 14.398l3.205 1.602-16 8-16-8 3.205-1.602 12.795 6.398zM28.795 20.398l3.205 1.602-16 8-16-8 3.205-1.602 12.795 6.398z" fill="#333333"/> </symbol></svg> | |
| <svg class="icon"> | |
| <use xlink:href="#checkmark-circle" ></use> | |
| </svg> | |
| <svg class="icon"> | |
| <use xlink:href="#shield"></use> | |
| </svg> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment