Create Icon component

colebemis · colebemis · commit a85b7b6369f3 · 2017-01-28T22:01:30.000-08:00
diff --git a/index.html b/index.html
@@ -9,14 +9,7 @@
       margin: 0;
     }
 
-    .icon {
-      display: inline-block;
-      line-height: 0;
-    }
 
-    .icon > svg {
-      stroke: currentColor;
-    }
   </style>
 </head>
 <body>
diff --git a/package.json b/package.json
@@ -9,6 +9,8 @@
     "babel-loader": "^6.2.10",
     "babel-preset-es2015": "^6.22.0",
     "css-loader": "^0.26.1",
+    "stylus": "^0.54.5",
+    "stylus-loader": "^2.4.0",
     "vue": "^2.1.10",
     "vue-loader": "^10.1.2",
     "vue-template-compiler": "^2.1.10",
diff --git a/src/App.vue b/src/App.vue
@@ -1,9 +1,10 @@
 <template>
-  <div>Hello World</div>
+  <div><icon name="square" size="48"></icon></div>
 </template>
 
 <script>
   import {mapState} from 'vuex';
+  import Icon from './Icon';
 
   export default {
     name: 'App',
diff --git a/src/Icon.vue b/src/Icon.vue
@@ -0,0 +1,49 @@
+<template>
+  <div class="icon"></div>
+</template>
+
+<script>
+  export default {
+    name: 'Icon',
+    props: {
+      name: {
+        type: String,
+        required: true
+      },
+      size: {
+        type: String,
+        default: '24'
+      }
+    },
+    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);
+        });
+    }
+  }
+</script>
+
+<style lang="stylus">
+  .icon
+    display inline-block
+    line-height 0
+
+  .icon > svg
+    stroke currentColor
+</style>
