vue项目中使用Svg的方法

<template>
 <svg :class="svgClass" aria-hidden="true">
 <use :xlink:href="iconName"/>
 </svg>
</template>

<script>
export default {
 name: 'SvgIcon',
 props: {
 iconClass: {
  type: String,
  required: true,
 },
 className: {
  type: String,
  default: '',
 },
 },
 computed: {
 iconName () {
  return `#icon-${this.iconClass}`
 },
 svgClass () {
  if (this.className) {
  return 'svg-icon ' + this.className
  } else {
  return 'svg-icon'
  }
 },
 },
}
</script>

<style scoped>
.svg-icon {
 width: 1em;
 height: 1em;
 vertical-align: -0.15em;
 fill: currentColor;
 overflow: hidden;
}
</style>

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon' // svg组件

// 注册到全局
Vue.component('svg-icon', SvgIcon)

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

const path = require('path')

function resolve (dir) {
 return path.join(__dirname, './', dir)
}

module.exports = {
 chainWebpack: config => {
 config.plugin('define').tap(args => {
  const argv = process.argv
  const icourt = argv[argv.indexOf('--icourt-mode') + 1]

  args[0]['process.env'].MODE = `"${icourt}"`

  return args
 })
 // svg rule loader
 const svgRule = config.module.rule('svg') // 找到svg-loader
 svgRule.uses.clear() // 清除已有的loader, 如果不这样做会添加在此loader之后
 svgRule.exclude.add(/node_modules/) // 正则匹配排除node_modules目录
 svgRule // 添加svg新的loader处理
  .test(/\.svg$/)
  .use('svg-sprite-loader')
  .loader('svg-sprite-loader')
  .options({
  symbolId: 'icon-[name]',
  })

 // 修改images loader 添加svg处理
 const imagesRule = config.module.rule('images')
 imagesRule.exclude.add(resolve('src/icons'))
 config.module
  .rule('images')
  .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
 },
 configureWebpack: {
 devServer: {
  open: true,
  // https: true,
  proxy: {
  '/user': {
   target: 'https://devadminschool.icourt.cc',
  },
  '/live': {
   target: 'https://devadminschool.icourt.cc',
  },
  },
 },
 },
}

// 默认的svg loader...
webpackConfig.module
 .rule('svg')
 .test(/\.(svg)(\?.*)?$/)
 .use('file-loader')
  .loader('file-loader')
  .options({
  name: genAssetSubPath('img')
  })
  
// 默认的images loader...
webpackConfig.module
  .rule('images')
  .test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
  .use('url-loader')
   .loader('url-loader')
   .options(genUrlLoaderOptions('img'))