refactor: change icon-svg to svg-icon

src/components/Icon-svg/index.vue → src/components/SvgIcon/index.vue

@@ -6,7 +6,7 @@
 
 <script>
 export default {
-  name: 'icon-svg',
+  name: 'svg-icon',
   props: {
     iconClass: {
       type: String,

src/icons/index.js

 import Vue from 'vue'
-import IconSvg from '@/components/Icon-svg'// svg组件
+import SvgIcon from '@/components/SvgIcon'// svg组件
 import generateIconsView from '@/views/svg-icons/generateIconsView.js'// just for views/icons , you can delete it
 // 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$/)

src/views/dashboard/admin/index.vue

@@ -34,12 +34,12 @@
           <div class="info-item">
             <count-to class="info-item-num" :startVal='0' :endVal='statisticsData.article_count' :duration='3400'></count-to>
             <span class="info-item-text">文章</span>
-            <icon-svg icon-class="trendChart1" class="dashboard-editor-icon"></icon-svg>
+            <svg-icon icon-class="trendChart1" class="dashboard-editor-icon"></svg-icon>
           </div>
           <div class="info-item">
             <count-to class="info-item-num" :startVal='0' :endVal='statisticsData.pageviews_count' :duration='3600'></count-to>
             <span class="info-item-text">浏览量</span>
-            <icon-svg icon-class="trendChart2" class="dashboard-editor-icon"></icon-svg>
+            <svg-icon icon-class="trendChart2" class="dashboard-editor-icon"></svg-icon>
           </div>
         </el-card>
       </el-col>

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

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

src/views/example/table/dragTable.vue

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

src/views/example/table/inlineEditTable.vue

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

src/views/example/table/table.vue

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

src/views/layout/components/SidebarItem.vue

@@ -4,13 +4,13 @@
 
       <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" class='submenu-title-noDropdown'>
-          <icon-svg v-if='item.icon' :icon-class="item.icon"></icon-svg><span>{{item.children[0].name}}</span>
+          <svg-icon v-if='item.icon' :icon-class="item.icon"></svg-icon><span>{{item.children[0].name}}</span>
         </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"></icon-svg><span>{{item.name}}</span>
+          <svg-icon v-if='item.icon' :icon-class="item.icon"></svg-icon><span>{{item.name}}</span>
         </template>
         <template v-for="child in item.children" v-if='!child.hidden'>
 
@@ -18,7 +18,7 @@
 
           <router-link v-else :to="item.path+'/'+child.path">
             <el-menu-item :index="item.path+'/'+child.path">
-              <icon-svg v-if='child.icon' :icon-class="child.icon"></icon-svg><span>{{child.name}}</span>
+              <svg-icon v-if='child.icon' :icon-class="child.icon"></svg-icon><span>{{child.name}}</span>
             </el-menu-item>
           </router-link>
 

src/views/login/index.vue

@@ -5,18 +5,18 @@
 
       <el-form-item prop="username">
         <span class="svg-container svg-container_login">
-          <icon-svg icon-class="user" />
+          <svg-icon icon-class="user" />
         </span>
         <el-input name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="邮箱" />
       </el-form-item>
 
       <el-form-item prop="password">
         <span class="svg-container">
-          <icon-svg icon-class="password" />
+          <svg-icon icon-class="password" />
         </span>
         <el-input name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on"
           placeholder="密码" />
-        <span class='show-pwd' @click='showPwd'><icon-svg icon-class="eye" /></span>
+        <span class='show-pwd' @click='showPwd'><svg-icon icon-class="eye" /></span>
       </el-form-item>
 
       <el-button type="primary" style="width:100%;margin-bottom:30px;" :loading="loading" @click.native.prevent="handleLogin">登录</el-button>

src/views/login/socialsignin.vue

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

src/views/svg-icons/index.vue

@@ -6,7 +6,7 @@
           <div slot="content">
             {{generateIconCode(item)}}
           </div>
-          <icon-svg :icon-class="item" />
+          <svg-icon :icon-class="item" />
         </el-tooltip>
         <span>{{item}}</span>
       </div>
@@ -32,7 +32,7 @@ export default {
   },
   methods: {
     generateIconCode(symbol) {
-      return `<icon-svg :icon-class="${symbol}" />`
+      return `<svg-icon :icon-class="${symbol}" />`
     },
     handleClipboard(text, event) {
       clipboard(text, event)