init

src/components/Hamburger/index.vue

@@ -0,0 +1,36 @@
+<template>
+    <div>
+        <svg t="1492500959545" @click="toggleClick" class="wscn-icon hamburger" :class="{'is-active':isActive}"  style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1691" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M966.8023 568.849776 57.196677 568.849776c-31.397081 0-56.850799-25.452695-56.850799-56.850799l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 543.397081 998.200404 568.849776 966.8023 568.849776z" p-id="1692"></path><path d="M966.8023 881.527125 57.196677 881.527125c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 856.07443 998.200404 881.527125 966.8023 881.527125z" p-id="1693"></path><path d="M966.8023 256.17345 57.196677 256.17345c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.850799 56.850799-56.850799l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.850799l0 0C1023.653099 230.720755 998.200404 256.17345 966.8023 256.17345z" p-id="1694"></path></svg>
+    </div>
+</template>
+
+<script>
+    export default {
+      name: 'hamburger',
+      props: {
+        isActive: {
+          type: Boolean,
+          default: false
+        },
+        toggleClick: {
+          type: Function,
+          default: null
+        }
+      }
+    }
+</script>
+
+<style scoped>
+    .hamburger {
+        display: inline-block;
+        cursor: pointer;
+        width: 20px;
+        height: 20px;
+        transform: rotate(0deg);
+        transition: .38s;
+        transform-origin: 50% 50%;
+    }
+    .hamburger.is-active {
+        transform: rotate(90deg);
+    }
+</style>

src/components/Icon-svg/index.js

@@ -0,0 +1,11 @@
+import Vue from 'vue'
+
+function registerAllComponents(requireContext) {
+  return requireContext.keys().forEach(comp => {
+    const vueComp = requireContext(comp)
+    const compName = vueComp.name ? vueComp.name.toLowerCase() : /\/([\w-]+)\.vue$/.exec(comp)[1]
+    Vue.component(compName, vueComp)
+  })
+}
+
+registerAllComponents(require.context('./', false, /\.vue$/))

src/components/Icon-svg/wscn-icon-stack.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="icon-container" :style="containerStyle">
+    <slot class="icon"></slot>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'wscn-icon-stack',
+    props: {
+      width: {
+        type: Number,
+        default: 20
+      },
+      shape: {
+        type: String,
+        default: 'circle',
+        validator: val => {
+          const validShapes = ['circle', 'square']
+          return validShapes.indexOf(val) > -1
+        }
+      }
+    },
+    computed: {
+      containerStyle() {
+        return {
+          width: `${this.width}px`,
+          height: `${this.width}px`,
+          fontSize: `${this.width * 0.6}px`,
+          borderRadius: `${this.shape === 'circle' && '50%'}`
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .icon-container {
+    display: inline-block;
+    position: relative;
+    overflow: hidden;
+    background: #1482F0;
+
+    .icon {
+      position: absolute;
+      color: #ffffff;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+</style>

src/components/Icon-svg/wscn-icon-svg.vue

@@ -0,0 +1,26 @@
+<template>
+  <svg class="wscn-icon" aria-hidden="true">
+    <use :xlink:href="iconName"></use>
+  </svg>
+</template>
+
+<script>
+  export default {
+    name: 'wscn-icon-svg',
+    props: {
+      iconClass: {
+        type: String,
+        required: true
+      }
+    },
+    computed: {
+      iconName() {
+        return `#icon-${this.iconClass}`
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+
+</style>