vue集成svg

1.安装 svg-sprite-loader

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

2.修改配置

• cli-2 修改build下的webpack.base.conf.js文件

    {
        test: /\.svg$/,
        loader: 'svg-sprite-loader',
        options: {
          symbolId: 'icon-[name]'
        },
        include: [resolve('src/icons')]//这个地址为项目中svg文件的入口文件
      }

• cli-3及以上在根目录新建vue.config.js文件

chainWebpack: config => {
    config.module
      .rule('svg')
      .uses.clear()
    config.module
      .rule('svg1')
      .test(/\.svg$/)
      .use('svg-sprite')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()
      .include
      .add(path.join(__dirname,'src/icons'))//这个地址为项目中svg文件的入口文件
      .end()
  }

3.在components中新建svg公共组件（示例）

// svgIcon.vue
<template>
  <svg :class="svgClass" aria-hidden="true" :width="swidth" :height="sheight">
    <use :xlink:href="iconName" />
  </svg>
</template>

<script>
export default {
  name: "SvgIcon",
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String,
      default: ""
    },
    size: {
      type: [String, Number],
      default: 20
    }
  },
  computed: {
    iconName() {
      return `#icon-${this.iconClass}`;
    },
    svgClass() {
      if (this.className) {
        return "svg-icon " + this.className;
      } else {
        return "svg-icon";
      }
    },
    swidth() {
      if (this.size < 0 || isNaN(this.size)) {
        return 20;
      }
      return this.size;
    },
    sheight() {
      if (this.size < 0 || isNaN(this.size)) {
        return 20;
      }
      return this.size;
    }
  }
};
</script>

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

4.新建svg目录（示例）

• 在src下新建icons文件夹
• 在icons文件夹下新建index.js入口文件，该地址对应的是配置中的svg的路径

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)

• 在icons下新建svg文件夹，将svg全部放到这个文件夹里面

5.使用

//修改的svg文件，edit就是svg文件夹中存放的svg的名称
<svg-icon
 icon-class="edit"
 size="35"
 />