Vue-cli3引入封装Svg图标

前言

在前端项目中使用图标，除了字体图标以外，最喜欢用的应该就是svg图标了，不仅放大不失真，而且可以和字体图标一样随意更改颜色。之前都是使用的vue-cli2项目引入svg图标，后来开始使用vue-cli3了，配置有些不同，但大体相似，在此做个记录，避免重复造轮子。

使用方法

安装插件

安装svg-sprite-loader

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

创建组件

在components文件夹下创建svgIcon文件夹，并在svgIcon文件夹中创建一个新的组件，名字为SvgIcon.vue，内容如下：

xxxxxxxxxx
43
1
<template>
2
  <svg :class="svgClass" aria-hidden="true">
3
    <use  :xlink:href="iconName" />
4
  </svg>
5
</template>
6

7
<script>
8
export default {
9
  name: 'svgIcon',
10
  props: {
11
    svgName: {
12
      type: String,
13
      required: true
14
    },
15
    className: {
16
      type: String,
17
      default: ''
18
    }
19
  },
20
  computed: {
21
    svgClass () { // svg 的class
22
      if (this.className) {
23
        return `svg-icon ${this.className}`
24
      } else {
25
        return 'svg-icon'
26
      }
27
    },
28
    iconName () { // svg xlink-href 指向的文件名
29
      return `#icon-${this.svgName}`
30
    }
31
  }
32
}
33
</script>
34

35
<style scoped>
36
  .svg-icon{
37
    width: 1em;
38
    height: 1em;
39
    vertical-align: -0.15em;
40
    fill: currentColor;
41
    overflow: hidden;
42
  }
43
</style>

创建图标文件夹

在src文件夹下创建icons文件夹，并在icons文件夹里创建svg文件夹，将需要的svg图标放在svg文件夹中。

随后在icons文件夹中创建index.js文件，用来使用webpack自动引入svg图标。index.js内容如下：

xxxxxxxxxx
14
1
import Vue from 'vue'
2
import svgIcon from '../components/svgIcon/svgIcon.vue'
3

4
Vue.component('svg-icon', svgIcon) // 挂载全局组件
5

6
// 下面这个是导入svg下的所有svg文件
7
const requireAll = requireContext => requireContext.keys().map(requireContext)
8
/*
9
 第一个参数是:'./svg' => 需要检索的目录，
10
 第二个参数是：false => 是否检索子目录,
11
 第三个参数是: /\.svg$/ => 匹配文件的正则
12
*/
13
const req = require.context('./svg', false, /\.svg$/)
14
requireAll(req)

在main.js中引入index.js:

xxxxxxxxxx
3
1
// main.js
2

3
import '@/icons/index.js'  // 引入图标

自定义配置

vue-cli3项目需要自定义配置才可以使用svg-sprite-loader。在根目录（与src同级）创建名字为vue.config.js的文件，内容如下：

xxxxxxxxxx
25
1
const path = require('path')
2

3
function resolve (dir) {
4
  return path.join(__dirname, '.', dir)
5
}
6

7
module.exports = {
8
  publicPath: './',
9
  chainWebpack: config => {
10
    config.module.rules.delete('svg') // 重点:删除默认配置中处理svg,
11
    // const svgRule = config.module.rule('svg')
12
    // svgRule.uses.clear()
13
    config.module
14
      .rule('svg-sprite-loader')
15
      .test(/\.svg$/)
16
      .include
17
      .add(resolve('src/icons')) // 处理svg目录
18
      .end()
19
      .use('svg-sprite-loader')
20
      .loader('svg-sprite-loader')
21
      .options({
22
        symbolId: 'icon-[name]'
23
      })
24
  }
25
}

随后重启项目即可。