Create Icon component

a85b7b63 · Cole Bemis · 4c6b7ad3 · a85b7b63 · a85b7b63 · a85b7b63
Commit a85b7b63 authored Jan 28, 2017 by Cole Bemis
Hide whitespace changes
Inline Side-by-side

Showing with 53 additions and 8 deletions

index.html index.html +0 -7

package.json package.json +2 -0

App.vue src/App.vue +2 -1

Icon.vue src/Icon.vue +49 -0

No files found.
--- 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>

--- 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",

--- a/src/App.vue
+++ b/src/App.vue
 <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',

--- a/src/Icon.vue
+++ b/src/Icon.vue
+<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>
\ No newline at end of file