From dcd3e316589e5d04e9286341110c672bfe3da2f0 Mon Sep 17 00:00:00 2001
From: Pan <panfree23@gmail.com>
Date: Fri, 24 Nov 2017 14:08:06 +0800
Subject: [PATCH] refactor:refine SvgIcon

---
 src/components/Icon-svg/index.vue             | 22 ----------
 src/components/SvgIcon/index.vue              | 42 +++++++++++++++++++
 src/icons/index.js                            |  4 +-
 src/styles/index.scss                         |  9 ----
 .../layout/components/Sidebar/SidebarItem.vue |  4 +-
 src/views/login/index.vue                     |  4 +-
 6 files changed, 48 insertions(+), 37 deletions(-)
 delete mode 100644 src/components/Icon-svg/index.vue
 create mode 100644 src/components/SvgIcon/index.vue

diff --git a/src/components/Icon-svg/index.vue b/src/components/Icon-svg/index.vue
deleted file mode 100644
index 44881b1..0000000
--- a/src/components/Icon-svg/index.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<template>
-  <svg class="svg-icon" aria-hidden="true">
-    <use :xlink:href="iconName"></use>
-  </svg>
-</template>
-
-<script>
-  export default {
-    name: 'icon-svg',
-    props: {
-      iconClass: {
-        type: String,
-        required: true
-      }
-    },
-    computed: {
-      iconName() {
-        return `#icon-${this.iconClass}`
-      }
-    }
-  }
-</script>
diff --git a/src/components/SvgIcon/index.vue b/src/components/SvgIcon/index.vue
new file mode 100644
index 0000000..e331a27
--- /dev/null
+++ b/src/components/SvgIcon/index.vue
@@ -0,0 +1,42 @@
+<template>
+  <svg :class="svgClass" aria-hidden="true">
+    <use :xlink:href="iconName"></use>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'svg-icon',
+  props: {
+    iconClass: {
+      type: String,
+      required: true
+    },
+    className: {
+      type: String
+    }
+  },
+  computed: {
+    iconName() {
+      return `#icon-${this.iconClass}`
+    },
+    svgClass() {
+      if (this.className) {
+        return 'svg-icon ' + this.className
+      } else {
+        return 'svg-icon'
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.svg-icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+</style>
diff --git a/src/icons/index.js b/src/icons/index.js
index c3b692d..14e2e13 100644
--- a/src/icons/index.js
+++ b/src/icons/index.js
@@ -1,8 +1,8 @@
 import Vue from 'vue'
-import IconSvg from '@/components/Icon-svg'// svg组件
+import SvgIcon from '@/components/SvgIcon'// svg组件
 
 // register globally
-Vue.component('icon-svg', IconSvg)
+Vue.component('svg-icon', SvgIcon)
 
 const requireAll = requireContext => requireContext.keys().map(requireContext)
 const req = require.context('./svg', false, /\.svg$/)
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 4e9bba9..67d2d8b 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -55,12 +55,3 @@ a:hover {
 .app-container {
   padding: 20px;
 }
-
-.svg-icon {
-  width: 1em;
-  height: 1em;
-  vertical-align: -0.15em;
-  fill: currentColor;
-  overflow: hidden;
-}
-
diff --git a/src/views/layout/components/Sidebar/SidebarItem.vue b/src/views/layout/components/Sidebar/SidebarItem.vue
index 0789c0b..ca80e9b 100644
--- a/src/views/layout/components/Sidebar/SidebarItem.vue
+++ b/src/views/layout/components/Sidebar/SidebarItem.vue
@@ -3,12 +3,12 @@
     <template v-for="item in routes">
       <router-link v-if="!item.hidden&&item.noDropdown&&item.children.length>0" :to="item.path+'/'+item.children[0].path">
         <el-menu-item :index="item.path+'/'+item.children[0].path">
-          <icon-svg v-if='item.icon' :icon-class="item.icon" /> {{item.children[0].name}}
+          <svg-icon v-if='item.icon' :icon-class="item.icon" /> {{item.children[0].name}}
         </el-menu-item>
       </router-link>
       <el-submenu :index="item.name" v-if="!item.noDropdown&&!item.hidden">
         <template slot="title">
-          <icon-svg v-if='item.icon' :icon-class="item.icon" /> {{item.name}}
+          <svg-icon v-if='item.icon' :icon-class="item.icon" /> {{item.name}}
         </template>
         <template v-for="child in item.children" v-if='!child.hidden'>
           <sidebar-item class='menu-indent' v-if='child.children&&child.children.length>0' :routes='[child]'> </sidebar-item>
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 103c24f..07c313b 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -5,13 +5,13 @@
       <h3 class="title">vue-element-admin</h3>
       <el-form-item prop="username">
         <span class="svg-container svg-container_login">
-          <icon-svg icon-class="yonghuming" />
+          <svg-icon icon-class="yonghuming" />
         </span>
         <el-input name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="username" />
       </el-form-item>
       <el-form-item prop="password">
         <span class="svg-container">
-          <icon-svg icon-class="mima"></icon-svg>
+          <svg-icon icon-class="mima"></svg-icon>
         </span>
         <el-input name="password" type="password" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on"
           placeholder="password"></el-input>