在项目中使用svg图标的几种方式

svg-sprite-loader插件

svg-sprite-loader，用来根据导入的svg文件自动生成symbol标签并插入html。接下来就可以在模板中方便地使用 svg-sprite

安装插件

npm install svg-sprite-loader--save-dev

webpack配置

在vue.config.js中

// set svg-sprite-loader
    config.module.rule('svg').exclude.add(resolve('src/icons')).end()
    config.module.rule('icons').test(/\.svg$/).include.add(resolve('src/icons')).end().use('svg-sprite-loader').loader('svg-sprite-loader').options({
        symbolId:'icon-[name]'}).end()

在src/componenets下新建文件夹SvgIcon/index.vue

<template><div v-if="isExternal":style="styleExternalIcon"class="svg-external-icon svg-icon" v-on="$listeners"/><svg v-else:class="svgClass" aria-hidden="true" v-on="$listeners"><use:xlink:href="iconName"/></svg></template><script>// doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usageimport{ isExternal}from'@/utils/validate'exportdefault{
  name:'SvgIcon',
  props:{
    iconClass:{
      type: String,
      required:true},
    className:{
      type: String,default:''}},
  computed:{isExternal(){returnisExternal(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%`}}}}</script><style scoped>.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;}</style>

在src下新建icons文件夹, 及icons文件夹下svg文件夹、index.js文件,

import Vuefrom'vue'import SvgIconfrom'@/components/SvgIcon'// svg component// register globally
Vue.component('svg-icon', SvgIcon)const req= require.context('./svg',false,/\.svg$/)constrequireAll= requireContext=> requireContext.keys().map(requireContext)requireAll(req)

在main.js中引入并注册

import'./icons'// icon

使用

<svg-icon icon-class="peoples"class-name="card-panel-icon"/>