Inject svg using javascript

3afa82d3 · Cole Bemis · 48269adf · 3afa82d3
Commit 3afa82d3 authored Jan 25, 2017 by Cole Bemis
Hide whitespace changes
Inline Side-by-side

Showing with 18 additions and 3 deletions

index.html index.html +18 -3

No files found.
--- a/index.html
+++ b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <title>Feather</title>
+  <meta charset="UTF-8">
+  <title>Feather</title>
 </head>
 <body>
-    <a href="svg/air-play.svg">Download air-play</a>
+
+  <div class="svg-container"></div>
+
+  <script>
+    const iconName = 'square';
+
+    fetch(`./icons/${iconName}.svg`)
+      .then(response => response.text())
+      .then(svgText => {
+        const svgDocument = new DOMParser().parseFromString(svgText, 'image/svg+xml');
+        const svgIcon = svgDocument.querySelector('svg').cloneNode(true);
+        const svgContainer = document.querySelector('.svg-container');
+
+        svgContainer.appendChild(svgIcon);
+      });
+  </script>
 </body>
 </html>
\ No newline at end of file