vue中使用svg

1、安装 svg-sprite-loader 依赖

npm install svg-sprite-loader

安装成功后在 vue-config.js 中添加配置：

module.exports = {
  chainWebpack(config) {
     //配置svg
      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()
  },

2、封装 svg 组件

创建组件 components/svgIcon.vue

<template>
  <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" ></div>
  <svg v-else :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconName" />
  </svg>
</template>
 
<script>
import { isExternal } from '@/utils/validate'
import '@/icons'
 
export default {
  name: 'svg-icon',
  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%`
      }
    }
  }
}
</script>
 
<style scoped>
.svg-icon {
  /* width: 1rem;
  height: 1rem; */
  vertical-align: middle;
  fill: currentColor;
  overflow: hidden;
}
 
.svg-external-icon {
  background-color: currentColor;
  mask-size: cover!important;
  display: inline-block;
}
</style>

isExternal校验

/**校验传入的iconClass是否为外部链接
 * @param {string} path
 * @returns {Boolean}
 */
export function isExternal(path) {
  return /^(https?:|mailto:|tel:)/.test(path)
}

3、在 src目录下创建 icons 文件

icons下index.js文件

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

在 main.js 入口文件中 全局引入 icons。

// main.js
import "./icons";

icons下创建svg目录，用来存放项目所使用的所有图标 svg 文件

4、使用svg组件

 <svg-icon icon-class="svgName" class="svgClass" />
//svgName为.svg后缀前的文件名
 
// 引入组件
import svgIcon from '@/components/svgIcon'
components: {
    svgIcon
}

5、更改svg样式

在svg文件里添加一张svgName.svg图片，iconClass跟图片名称保持一致，class可以自己添加类。
注意：需要把svg图片文件的(需要修改的)fill以及stroke修改成currentColor或者直接删除。
比如下面的svg文件就stroke=“currentColor”

<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="14px" viewBox="0 0 16 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="test" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
        <g id="17-test" transform="translate(-1153.000000, -537.000000)" stroke="currentColor">
            <g id="icon-test" transform="translate(1154.000000, 538.000000)">
                <path d="M14.4576763,0 L6.15140056,0 C5.87525819,-1.94537167e-16 5.65140056,0.223857625 5.65140056,0.5 L5.65140056,5.98362814 C5.65140056,6.25977051 5.42754294,6.48362814 5.15140056,6.48362814 L3,6.48362814 L3,6.48362814" id="路径-4"></path>
                <path d="M5.48334313,2.84002654 L2.79482046,2.84002654 C2.68270744,2.84002654 2.5738475,2.877706 2.48572375,2.94701353 L0.190903296,4.75184293 C0.0703681963,4.84664132 -1.85064764e-15,4.99150847 -1.77635684e-15,5.14485594 L-1.77635684e-15,10.1645815 C-1.36303406e-15,10.4407239 0.223857625,10.6645815 0.5,10.6645815 L3.10371973,10.6645815 L3.10371973,10.6645815 M6.10371973,10.6645815 L9.30163607,10.6645815 M12.3016361,10.6645815 L14.554688,10.6645815" id="形状"></path>
                <path d="M6.10371973,10.6645815 L6.10371973,10.8706025 C6.10371973,11.6990296 5.43214685,12.3706025 4.60371973,12.3706025 C3.7752926,12.3706025 3.10371973,11.6990296 3.10371973,10.8706025 L3.10371973,10.6645815" id="路径"></path>
                <path d="M12.3016361,10.6645815 L12.3016361,10.8706025 C12.3016361,11.6990296 11.6300632,12.3706025 10.8016361,12.3706025 C9.97320895,12.3706025 9.30163607,11.6990296 9.30163607,10.8706025 L9.30163607,10.6645815" id="路径备份"></path>
                <line x1="9.97537131" y1="5.5" x2="14.4921377" y2="5.5" id="路径-8"></line>
            </g>
        </g>
    </g>
</svg>

完成上面操作后页面使用以及样式修改

.svgClass {
  width: 14px;
  height: 14px;
  color: green;
}