Create Vue app

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

Showing with 87 additions and 10 deletions

circle.svg icons/circle.svg +1 -0

index.html index.html +86 -10

No files found.
--- a/icons/circle.svg
+++ b/icons/circle.svg
+<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
--- 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'
+      ]
+    };
+
+    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);
+
+            svgIcon.setAttribute('width', this.size);
+            svgIcon.setAttribute('height', this.size);
+
+            this.$el.appendChild(svgIcon);
+          })
+          .catch(error => {
+            console.error(error);
+          });
+      }
+    });

-    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-container', {
+      props: {
+        name: {
+          type: String,
+          required: true
+        }
+      },
+      template: '#icon-container-template'
+    })

-        svgContainer.appendChild(svgIcon);
-      });
+    new Vue({
+      el: '#app',
+      data: data
+    });
  </script>
 </body>
 </html>
\ No newline at end of file