refine icon-svg

src/components/Icon-svg/index.js

-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-svg.vue → src/components/Icon-svg/index.vue

 <template>
-  <svg class="wscn-icon" aria-hidden="true">
+  <svg class="svg-icon" aria-hidden="true">
     <use :xlink:href="iconName"></use>
   </svg>
 </template>
 
 <script>
   export default {
-    name: 'wscn-icon-svg',
+    name: 'icon-svg',
     props: {
       iconClass: {
         type: String,
@@ -20,7 +20,3 @@
     }
   }
 </script>
-
-<style lang="scss" scoped>
-
-</style>

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

-<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/main.js

@@ -10,19 +10,21 @@ import 'assets/custom-theme/index.css'; // 换肤版本element-ui css
 import NProgress from 'nprogress'; // Progress 进度条
 import 'nprogress/nprogress.css';// Progress 进度条 样式
 import 'normalize.css/normalize.css';// normalize.css 样式格式化
-import 'components/Icon-svg/index'; // 封装的svg组件
 import 'assets/iconfont/iconfont'; // iconfont 具体图标见https://github.com/PanJiaChen/vue-element-admin/wiki
 import * as filters from './filters'; // 全局vue filter
 import Multiselect from 'vue-multiselect';// 使用的一个多选框组件，element-ui的select不能满足所有需求
 import 'vue-multiselect/dist/vue-multiselect.min.css';// 多选框组件css
 import Sticky from 'components/Sticky'; // 粘性header组件
+import IconSvg from 'components/Icon-svg';// svg 组件
 import vueWaves from './directive/waves';// 水波纹指令
 import errLog from 'store/errLog';// error log组件
 import './mock/index.js';  // 该项目所有请求使用mockjs模拟
 
+
 // register globally
 Vue.component('multiselect', Multiselect);
 Vue.component('Sticky', Sticky);
+Vue.component('icon-svg', IconSvg)
 Vue.use(ElementUI);
 Vue.use(vueWaves);
 

src/styles/index.scss

@@ -116,7 +116,7 @@ code {
 .text-center{
   text-align: center
 }
-.wscn-icon {
+.svg-icon {
   width: 1em;
   height: 1em;
   vertical-align: -0.15em;

src/views/dashboard/editor/index.vue

 <template>
     <div class="dashboard-editor-container">
-
         <a href="https://github.com/PanJiaChen/vue-element-admin" target="_blank" class="github-corner" aria-label="View source on Github">
             <svg width="80" height="80" viewBox="0 0 250 250" style="fill:#4AB7BD; color:#fff; position: absolute; top: 50px; border: 0; right: 0;"
                 aria-hidden="true">
@@ -11,7 +10,6 @@
                     fill="currentColor" class="octo-body"></path>
             </svg>
         </a>
-
         <el-row class="btn-group">
             <el-col :span="4" class='text-center'>
                 <router-link class="pan-btn blue-btn" to="/components/index">Components</router-link>
@@ -38,19 +36,19 @@
                 <el-card class="box-card">
                     <div slot="header" class="box-card-header">
                         <pan-thumb class="panThumb" :image="avatar"> 你的权限:
-                            <span class="pan-info-roles" v-for="item in roles">{{item}}</span>
+                            <span class="pan-info-roles" :key='item' v-for="item in roles">{{item}}</span>
                         </pan-thumb>
                     </div>
                     <span class="display_name">{{name}}</span>
                     <div class="info-item">
                         <countTo class="info-item-num" :startVal='0' :endVal='statisticsData.article_count' :duration='3400'></countTo>
                         <span class="info-item-text">文章</span>
-                        <wscn-icon-svg icon-class="a" class="dashboard-editor-icon" />
+                        <icon-svg icon-class="a" class="dashboard-editor-icon"></icon-svg>
                     </div>
                     <div class="info-item">
                         <countTo class="info-item-num" :startVal='0' :endVal='statisticsData.pageviews_count' :duration='3600'></countTo>
                         <span class="info-item-text">浏览量</span>
-                        <wscn-icon-svg icon-class="b" class="dashboard-editor-icon" />
+                        <icon-svg icon-class="b" class="dashboard-editor-icon"></icon-svg>
                     </div>
                 </el-card>
             </el-col>

src/views/example/tab/components/tabPane.vue

@@ -28,7 +28,7 @@
 
     <el-table-column width="80px" label="重要性">
       <template scope="scope">
-        <wscn-icon-svg v-for="n in +scope.row.importance" icon-class="wujiaoxing" class="meta-item__icon" :key="n" />
+        <icon-svg v-for="n in +scope.row.importance" icon-class="wujiaoxing" class="meta-item__icon" :key="n"></icon-svg>
       </template>
     </el-table-column>
 

src/views/example/table/dragTable.vue

@@ -29,7 +29,7 @@
 
       <el-table-column width="80px" label="重要性">
         <template scope="scope">
-          <wscn-icon-svg v-for="n in +scope.row.importance" icon-class="wujiaoxing" class="meta-item__icon" :key="n" />
+          <icon-svg v-for="n in +scope.row.importance" icon-class="wujiaoxing" class="meta-item__icon" :key="n"></icon-svg>
         </template>
       </el-table-column>
 
@@ -47,7 +47,7 @@
 
       <el-table-column align="center" label="拖拽" width="95">
         <template scope="scope">
-          <wscn-icon-svg class='drag-handler' icon-class="tuozhuai" />
+          <icon-svg class='drag-handler' icon-class="tuozhuai" ></icon-svg>
         </template>
       </el-table-column>
 

src/views/example/table/inlineEditTable.vue

@@ -23,7 +23,7 @@
 
       <el-table-column width="100px" label="重要性">
         <template scope="scope">
-          <wscn-icon-svg v-for="n in +scope.row.importance" icon-class="wujiaoxing" class="meta-item__icon" :key="n" />
+          <icon-svg v-for="n in +scope.row.importance" icon-class="wujiaoxing" class="meta-item__icon" :key="n" ></icon-svg>
         </template>
       </el-table-column>
 

src/views/example/table/table.vue

@@ -60,7 +60,7 @@
 
       <el-table-column width="80px" label="重要性">
         <template scope="scope">
-          <wscn-icon-svg v-for="n in +scope.row.importance" icon-class="wujiaoxing" class="meta-item__icon" :key="n" />
+          <icon-svg v-for="n in +scope.row.importance" icon-class="wujiaoxing" class="meta-item__icon" :key="n" ></icon-svg>
         </template>
       </el-table-column>
 

src/views/layout/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">
-                    <wscn-icon-svg v-if='item.icon' :icon-class="item.icon" /> {{item.children[0].name}}
+                    <icon-svg v-if='item.icon' :icon-class="item.icon" ></icon-svg>{{item.children[0].name}}
                 </el-menu-item>
             </router-link>
             <el-submenu :index="item.name" v-if="!item.noDropdown&&!item.hidden">
                 <template slot="title">
-                    <wscn-icon-svg v-if='item.icon' :icon-class="item.icon" /> {{item.name}}
+                    <icon-svg v-if='item.icon' :icon-class="item.icon" ></icon-svg> {{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>
@@ -36,7 +36,7 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-    .wscn-icon {
+    .svg-icon {
         margin-right: 10px;
     }
     .hideSidebar .menu-indent{

src/views/login/index.vue

 <template>
-    <div class="login-container">
-        <el-form autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left"
-                 label-width="0px"
-                 class="card-box login-form">
-            <h3 class="title">系统登录</h3>
-            <el-form-item prop="email">
-                <span class="svg-container"><wscn-icon-svg icon-class="jiedianyoujian"/></span>
-                <el-input name="email" type="text" v-model="loginForm.email" autoComplete="on"
-                          placeholder="邮箱"></el-input>
-            </el-form-item>
-            <el-form-item prop="password">
-                <span class="svg-container"><wscn-icon-svg icon-class="mima"/></span>
-                <el-input name="password" type="password" @keyup.enter.native="handleLogin" v-model="loginForm.password"
-                          autoComplete="on" placeholder="密码"></el-input>
-            </el-form-item>
-            <el-form-item>
-                <el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
-                    登录
-                </el-button>
-            </el-form-item>
-            <div class='tips'>admin账号为:admin@wallstreetcn.com 密码随便填</div>
-            <div class='tips'>editor账号:editor@wallstreetcn.com 密码随便填</div>
-        </el-form>
-        <el-dialog title="第三方验证" :visible.sync="showDialog">
-            邮箱登录成功,请选择第三方验证
-            <socialSign></socialSign>
-        </el-dialog>
-    </div>
+  <div class="login-container">
+    <el-form autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left" label-width="0px"
+      class="card-box login-form">
+      <h3 class="title">系统登录</h3>
+      <el-form-item prop="email">
+        <span class="svg-container"><icon-svg icon-class="jiedianyoujian"></icon-svg></span>
+        <el-input name="email" type="text" v-model="loginForm.email" autoComplete="on" placeholder="邮箱"></el-input>
+      </el-form-item>
+      <el-form-item prop="password">
+        <span class="svg-container"><icon-svg icon-class="mima"></icon-svg></span>
+        <el-input name="password" type="password" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on"
+          placeholder="密码"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
+          登录
+        </el-button>
+      </el-form-item>
+      <div class='tips'>admin账号为:admin@wallstreetcn.com 密码随便填</div>
+      <div class='tips'>editor账号:editor@wallstreetcn.com 密码随便填</div>
+    </el-form>
+    <el-dialog title="第三方验证" :visible.sync="showDialog">
+      邮箱登录成功,请选择第三方验证
+      <socialSign></socialSign>
+    </el-dialog>
+  </div>
 </template>
 
 <script>

src/views/login/socialsignin.vue

 <template>
     <div class="social-signup-container">
         <div class="sign-btn" @click="wechatHandleClick('wechat')">
-            <span class="wx-svg-container"><wscn-icon-svg icon-class="weixin" class="icon"/></span>
-            微信
+            <span class="wx-svg-container"><icon-svg icon-class="weixin" class="icon"></icon-svg></span> 微信
         </div>
         <div class="sign-btn" @click="tencentHandleClick('tencent')">
-            <span class="qq-svg-container"><wscn-icon-svg icon-class="QQ" class="icon"/></span>
-            QQ
+            <span class="qq-svg-container"><icon-svg icon-class="QQ" class="icon"></icon-svg></span> QQ
         </div>
     </div>
 </template>