refacor: change

src/components/ElIcon/index.vue

@@ -1,39 +0,0 @@
-<template>
-  <i :class="iconName" :style="appendStyle" />
-</template>
-
-<script>
-export default {
-  name: 'ElIcon',
-  props: {
-    iconClass: {
-      type: String,
-      required: true
-    },
-    iconColor: {
-      type: String,
-      required: false,
-      default: ''
-    }
-  },
-  computed: {
-    iconName() {
-      return `sub-el-icon el-icon-${this.iconClass}`
-    },
-    appendStyle() {
-      if (this.iconColor) {
-        return 'color: ' + this.iconColor + ';'
-      } else {
-        return ''
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-.sub-el-icon {
-  width: 1em;
-  height: 1em;
-}
-</style>

src/icons/index.js

@@ -1,10 +1,8 @@
 import Vue from 'vue'
 import SvgIcon from '@/components/SvgIcon'// svg component
-import ElIcon from '@/components/ElIcon'
 
 // register globally
 Vue.component('svg-icon', SvgIcon)
-Vue.component('el-icon', ElIcon)
 
 const req = require.context('./svg', false, /\.svg$/)
 const requireAll = requireContext => requireContext.keys().map(requireContext)

src/layout/components/Sidebar/Item.vue

@@ -1,6 +1,4 @@
 <script>
-import variables from '@/styles/variables.scss'
-
 export default {
   name: 'MenuItem',
   functional: true,
@@ -9,25 +7,21 @@ export default {
       type: String,
       default: ''
     },
-    elicon: {
-      type: String,
-      default: ''
-    },
     title: {
       type: String,
       default: ''
     }
   },
   render(h, context) {
-    const { icon, elicon, title } = context.props
+    const { icon, title } = context.props
     const vnodes = []
 
     if (icon) {
+      if (icon.includes('el-icon')) {
+        vnodes.push(<i class={[icon, 'sub-el-icon']} />)
+      } else {
         vnodes.push(<svg-icon icon-class={icon}/>)
       }
-
-    if (elicon) {
-      vnodes.push(<el-icon icon-class={elicon} icon-color={variables.menuText}/>)
     }
 
     if (title) {

src/layout/components/Sidebar/SidebarItem.vue

@@ -3,14 +3,14 @@
     <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
       <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
         <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
-          <item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :elicon="onlyOneChild.meta.elicon||item.meta && item.meta.elicon" :title="onlyOneChild.meta.title" />
+          <item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" />
         </el-menu-item>
       </app-link>
     </template>
 
     <el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
       <template slot="title">
-        <item v-if="item.meta" :icon="item.meta && item.meta.icon" :elicon="item.meta && item.meta.elicon" :title="item.meta.title" />
+        <item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" />
       </template>
       <sidebar-item
         v-for="child in item.children"

src/router/index.js

@@ -25,7 +25,7 @@ import nestedRouter from './modules/nested'
  * meta : {
     roles: ['admin','editor']    control the page roles (you can set multiple roles)
     title: 'title'               the name show in sidebar and breadcrumb (recommend set)
-    icon: 'svg-name'             the icon show in the sidebar
+    icon: 'svg-name'/'el-icon-x' the icon show in the sidebar
     noCache: true                if set true, the page will no be cached(default is false)
     affix: true                  if set true, the tag will affix in the tags-view
     breadcrumb: false            if set false, the item will hidden in breadcrumb(default is true)
@@ -197,7 +197,7 @@ export const asyncRoutes = [
     name: 'Example',
     meta: {
       title: 'Example',
-      icon: 'example'
+      icon: 'el-icon-s-help'
     },
     children: [
       {

src/styles/sidebar.scss

@@ -60,6 +60,9 @@
     .sub-el-icon {
       margin-right: 13px;
       margin-left: -1px;
+      color: currentColor;
+      width: 1em;
+      height: 1em;
     }
 
     .el-menu {