refine icon-svg

Author: PanJiaChen

src/components/Icon-svg/index.js

@@ -1,12 +1,12 @@
 <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-svg.vue renamed to src/components/Icon-svg/index.vue

@@ -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/components/Icon-svg/wscn-icon-stack.vue

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

src/main.js

@@ -1,6 +1,5 @@
 <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/styles/index.scss

@@ -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/dashboard/editor/index.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/tab/components/tabPane.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/dragTable.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>