vue项目svg使用

在以往项目实践中，经常使用iconfont，但是其中有个问题就是当我们项目逐渐扩大，需要图标越来越多时，每次有新图标都要下载后手动更新icon文件，有些麻烦。今天整理下svg在项目中的优雅使用，每次更新图标，只需把新图标扔进对应的svg文件夹，无需替换所有文件，且在项目中一次引用，随时使用，也是真的简单方便啦。。。
（1）下载svg图片；项目中创建src/icons/svg文件，用来存放svg
（2）因为使用vue-cli3.0创建的项目，需要在vue.config.js中进行配置，改掉原有项目对svg的配置，加上自己对svg的处理配置

//vue.config.js文件
const path = require('path')
// 传递一个相对路径，会处理得到一个相对路径
function resolve(dir) {
     
    return path.join(__dirname, dir)
}
module.exports = {
     
    chainWebpack(config) {
     
        //1，对svg规则进行配置，让他排除对icons文件的处理
        config.module.rule('svg') //在module的rule中找到关于svg的
            .exclude.add(resolve('src/icons')) //在排除设置里，添加一条需要排除内容的绝对路径
            .end() //退回到上一级
        // 2，添加对icons规则，对svg文件进行处理
        config.module
            .rule('icons')
            .test(/\.svg$/)
            .include.add(resolve('src/icons'))
            .end()
            .use('svg-sprite-loader')
            .loader('svg-sprite-loader')
            .options({
     
                symbolId: 'icon-[name]' //icon图标使用时的命名
            })
            .end()
    }
}

此时其实已经可以使用了

//template中
<svg>
    <use xlink:href="#icon-qq"></use>
</svg>
//在script中
import "@/icons/svg/qq.svg";

但是这样使用有个问题，如果图片多了，每次使用都要引入的话，失去了这样做的意义，而且使用时，样式控制和名称指定并不方便，为了更优雅的代码，可以继续敲下去。。。
（3）在icons文件夹下创建一个index.js文件，并在main.js中使用

//icons/index.js文件
//require.context 是require下的用一个方法，用于指定上下文；参数（指定的上下文，是否有下层文件，正则匹配后缀名）
const req = require.context('./svg', false, /\.svg$/)
req.keys().map(req); //会加载文件中符合规定的所有文件，最后展示为如下形式['qq.svg','wb.svg']

//main.js文件
import 'icons'

现在已经加载出所有的svg图片，在组件中使用时，不需要引入也可以根据名称直接使用，但是，如果想要更方便的修改svg的大小样式，对svg进行组件封装
（4）封装组件，在components文件夹里创建svgIcon.vue文件

<template>
  <svg :class="svgClass" aria-hidden="true" v-on="$listeners">
    <use :xlink:href="iconName"></use>
  </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 lang="less" scoped>
.svg-icon {
     
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

还需全局注入组件

//在icons/index.js中引用这个组件
import Vue from 'vue';
import SvgIcon from '@/components/SvgIcon.vue';

//全局的引入svgicon组件
Vue.component('svg-icon', SvgIcon)

（5）在组件中可以直接使用了,可以添加class设置自己需要的样式

<svg-icon icon-class="qq" class="my-style"></svg-icon>

以上就是vue-cli3.0项目中svg使用，没事就试试吧。。。