refactor:refine SvgIcon

PanJiaChen · PanJiaChen · commit dcd3e316589e · 2017-11-29T09:55:33.000+08:00
diff --git a/src/components/Icon-svg/index.vue b/src/components/Icon-svg/index.vue
diff --git a/src/components/SvgIcon/index.vue 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
@@ -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
@@ -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
@@ -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
@@ -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>
