Vue项目实战（09）- svg图标的使用

1. 引言

在前面的章节，已经讲解了部分vue-element-admin的知识：

• 《Vue项目实战（01）-vue-element-admin项目结构分析》
• 《Vue项目实战（02）-Vuex状态管理模式》
• 《Vue项目实战（03）-alias》
• 《Vue项目实战（04）-axios封装》
• 《Vue项目实战（05）-多环境配置》
• 《Vue项目实战（06）- 钩子方法触发失败的解决》
• 《Vue项目实战（07）- 登录权限分析》
• 《Vue项目实战（08）- css预处理器》

本文主要讲解vue-element-admin是如何使用svg图标的。

2. 项目使用svg图标 2.1 下载svg图标

① svg图标可以去https://www.iconfont.cn查找合适的icon，选择svg下载。

② 下载完成后，在vue-element-admin项目，可以看到图标放到了src/icons/svg目录

2.2 注册svg组件

③ 在上图，可以看到在src/icons目录下有一个index.js文件，其功能就是把组件注册到全局，具体代码如下（使用webpack的require.context自动引入src/icons下面所有的图标）：

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg component

// register globally
Vue.component('svg-icon', SvgIcon)

const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

④ 可以看到上面的代码引入了SvgIcon组件（目录src/components/SvgIcon ）,具体的代码如下：

  
  
    
  



// doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage
import { isExternal } from '@/utils/validate'

export default {
  name: 'SvgIcon',
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String,
      default: ''
    }
  },
  computed: {
    isExternal() {
      return isExternal(this.iconClass)
    },
    iconName() {
      return `#icon-${this.iconClass}`
    },
    svgClass() {
      if (this.className) {
        return 'svg-icon ' + this.className
      } else {
        return 'svg-icon'
      }
    },
    styleExternalIcon() {
      return {
        mask: `url(${this.iconClass}) no-repeat 50% 50%`,
        '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
      }
    }
  }
}



.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.svg-external-icon {
  background-color: currentColor;
  mask-size: cover!important;
  display: inline-block;
}

⑤ 在main.js中引入icon（目录src/main.js）：

2.3 使用svg组件

举个例子，在登录页面（目录： src/views/login/index.vue)，可以看到使用了svg图标，使用方式如下（这里使用了使用 src/icons/svg/user.svg 文件）：

3. 总结

到这里，vue-element-admin使用svg图标的流程讲解完毕，本文完！