vue-cli引入svg图的方式

1. 安装 npm i svg-sprite-loader -D 开发依赖包

2. 在项目src目录下新建一个icons目录

目录结构
- src
   - icons
   	 - svg
   	   - wx.svg
   	   - qq.svg

3. 配置 vue.config.js 的 chainWebpack 属性

链式操作详解

// 使用export.module的原因是vue-cli运行在nodejs环境
const path = require('path');   // 引入node的路径处理模块

function resolve(dir) {
	// __dirname 项目根目录的绝对路径
	return path.join(__dirname, dir);
}

export.module = {
	...
	configureWebpack(config) {
		// 对config进行链式操作
		/* 这里可以理解为配置svg规则模块
		添加需要排除的文件夹的绝对路径，相对路径不安全,因为运行在nodejs中，
		所以可以使用 require('path')来辅助获取绝对路径
		*/
		config.module.rule('svg')
			.exclude.add(resolve('src/icons'))
		/* 这里可以理解为配置icons规则模块,更准确的说是添加一个
		icons规则配置模块（vue-cli默认的规则模块列表中并没有icons）
			.test() 匹配对应文件夹下需要加载的文件
			.include.add() 添加需要执行icons规则的文件夹绝对路径
			.end() 结束当前属性配置，这里可以理解为返回上一级
			.use() 数组，意味着可以配置多种使用方式，
				最好将配置方式的名称与该方式使用的加载程序同名
			.loader() 决定该方式的加载程序
			.options() 决定该方式的配置选项，参数对象，规则的详细配置，
				symbolId 表示配置使用方式：值 icon-[name] 表示使用时
					添加前缀icon- 后面接动态的 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]' })
	},
	...
};

4. 在终端输入 vue inspect --rules，查看规则配置的列表（下图展示未配置configureWebpack 时）

5. 输入命令 vue inspect --rule svg 单独查看svg的规则配置（下图展示已配置configureWebpack 时）

6. 输入命令 vue inspect --rule icons 单独查看icons的规则配置（下图展示已配置configureWebpack 时）

7. 在子组件中使用 svg （下图展示已配置configureWebpack 时）

<template>
  <svg>
    <use xlink:href="#icon-wx"></use>
  </svg>
</template>

<script>
...
// 这里是告诉webpack加载该文件，否则即使配置正确，图标仍无法显示
import '@/icons/svg/wx.svg';
...
</script>

8. 简化代码，使组件需要使用svg图标时不必单独引入

一、在 src/icons 文件夹下添加 index.js 文件，内容如下：
二、在 main.js 文件夹下引入 import './icons/index.js'

-- src/icons
// 图标自动加载
const req = require.context('./svg', false, /\.svg$/)
/* require.context() 方法用来创建自己的（模块）上下文，
	这个方法有 3 个参数：
		要搜索的文件夹目录，
		是否还应该搜索它的子目录，
		以及一个匹配文件的正则表达式。
*/
req.keys().map(req)
/*
require.context模块导出（返回）一个（require）函数，这个函数可以接收一个参数：request 函数
	这里的 request 应该是指在 require() 语句中的表达式
require.context 第一个参数不能是变量，webpack在编译阶段无法定位目录

导出的方法有 3 个属性： resolve, keys, id。

resolve 是一个函数，它返回请求被解析后得到的模块 id。
keys 也是一个函数，它返回一个数组，由所有可能被上下文模块处理的请求组成。
id 是上下文模块里面所包含的模块 id. 它可能在你使用 module.hot.accept 的时候被用到
*/

-- main.js
import './icons/index.js'

9. 进一步简化代码，将svg的引入做成全局组件

<template>
  <svg :class="svgClass" aria-hidden="true" v-on="$listeners">
    <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: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>