From ab3cc7ef5afa1d8e112a02c6ac91ecd25fa551ac Mon Sep 17 00:00:00 2001
From: Cole Bemis <colebemis@gmail.com>
Date: Wed, 25 Jan 2017 23:21:52 -0800
Subject: [PATCH] Create Vue app

---
 icons/circle.svg |  1 +
 index.html       | 96 +++++++++++++++++++++++++++++++++++++++++++-----
 2 files changed, 87 insertions(+), 10 deletions(-)
 create mode 100644 icons/circle.svg
diff --git a/icons/circle.svg b/icons/circle.svg
new file mode 100644
index 0000000..03e898a
--- /dev/null
+++ b/icons/circle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"><circle cx="12" cy="12" r="10"/></g></svg>
\ No newline at end of file
diff --git a/index.html b/index.html
index 5581d0b..34b5905 100644
--- a/index.html
+++ b/index.html
@@ -3,23 +3,99 @@
 <head>
   <meta charset="UTF-8">
   <title>Feather</title>
+
+  <style>
+    body {
+      margin: 0;
+    }
+
+    .icon {
+      display: inline-block;
+      line-height: 0;
+    }
+
+    .icon > svg {
+      stroke: currentColor;
+    }
+  </style>
+
+  <script src="https://unpkg.com/vue/dist/vue.js"></script>
 </head>
 <body>
 
-  <div class="svg-container"></div>
+  <div id="app">
+    <icon-container v-for="icon in icons" :name="icon"></icon-container>
+  </div>
+
+  <script type="text/x-template" id="icon-template">
+    <div class="icon"></div>
+  </script>
+
+  <script type="text/x-template" id="icon-container-template">
+    <div class="icon-container">
+      <a :href="`./icons/${name}.svg`" download>
+        <icon :name="name" size="48"></icon>
+      </a>
+    </div>
+  </script>
 
   <script>
-    const iconName = 'square';
+    const data = {
+      icons: [
+        'square',
+        'circle'
+      ]
+    };
 
-    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');
+    Vue.component('icon', {
+      props: {
+        name: {
+          type: String,
+          required: true
+        },
+        size: {
+          type: String,
+          default: '24'
+        }
+      },
+      template: '#icon-template',
+      mounted() {
+        fetch(`./icons/${this.name}.svg`)
+          .then(response => {
+            if (response.ok) {
+              return response.text();
+            }
+            throw new Error(`Cannot find ${this.name}.svg`);
+          })
+          .then(svgText => {
+            const svgDocument = new DOMParser().parseFromString(svgText, 'image/svg+xml');
+            const svgIcon = svgDocument.querySelector('svg').cloneNode(true);
 
-        svgContainer.appendChild(svgIcon);
-      });
+            svgIcon.setAttribute('width', this.size);
+            svgIcon.setAttribute('height', this.size);
+
+            this.$el.appendChild(svgIcon);
+          })
+          .catch(error => {
+            console.error(error);
+          });
+      }
+    });
+
+    Vue.component('icon-container', {
+      props: {
+        name: {
+          type: String,
+          required: true
+        }
+      },
+      template: '#icon-container-template'
+    })
+
+    new Vue({
+      el: '#app',
+      data: data
+    });
   </script>
 </body>
 </html>
\ No newline at end of file
