在vue中使用svg-sprite-loader

参考地址：友情博客地址链接

**

*

正文：

**
1.引入依赖

npm install svg-sprite-loader --save

2.在assets文件夹下创建icons文件夹用来存放svg文件夹和index.js文件

3.在components下创建组件SvgIcon.vue

<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: 1.5em;
  height: 1.5em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

4.在main.js中导入

import '@/assets/icons/index'//自定义svg

5.在vue.config.js中配置

const path = require('path')

let proxyObj = {}

proxyObj['/'] = {
  //websocket
  ws: false,
  //目标地址
  target: 'http://localhost:9999',
  //发送请求头中host会设置成target
  changeOrigin: true,
  //不重写请求地址
  pathRewrite: {
    '^/': '/'
  }
}

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

module.exports = {
  productionSourceMap: false,
  chainWebpack: config => {
    config.module.rules.delete("svg"); //重点:删除默认配置中处理svg,
    config.module
      .rule('svg-sprite-loader')
      .test(/\.svg$/)
      .include
      .add(resolve('src/assets/icons')) //处理svg目录（根据你建的文件路径）
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
  },
  devServer: {
    host: 'localhost',
    port: 8088,
    proxy: proxyObj
  },
  configureWebpack: {
    devtool: 'source-map'
  }
}

使用：

 <svg-icon :icon-class="xxxxx名称"></svg-icon>