定制开发vue项目引入svg图标（完整步骤）

1. 安装依赖

在vue定制开发中首先需要安装可以加载svg的依赖。
npm安装：npm install svg-sprite-loader --save-dev

2. 创建svg定制开发文件夹存放svg图标

创建icons文件夹，在icons定制开发文件夹下创建svg文件夹存放本地svg图标。

3. vue.config.js 中配置svg图片

vue.config.js代码：

const path = require('path')module.exports = {  chainWebpack:config=>{    // svg图标加载    config.module      .rule('svg')      .exclude.add(path.join(__dirname, 'src/assets/icons/svg'))      .end()    config.module      .rule('icons')// 定义一个名叫 icons 的规则      .test(/\.svg$/)// 设置 icons 的匹配正则      .include.add(path.join(__dirname,'src/assets/icons/svg'))// 设置当前规则的作用目录，只在当前目录下才执行当前规则      .end()      .use('svg-sprite')// 指定一个名叫 svg-sprite 的 loader 配置      .loader('svg-sprite-loader')// 该配置使用 svg-sprite-loader 作为处理 loader      .options({// 该 svg-sprite-loader 的配置        symbolId:'icon-[name]'      })      .end()  }}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

include.add(路径)–路径不正确会报以下错误：

4. 创建index.js 导入所有svg图标

icons文件夹创建index.js 自动导入所有svg图标。

icons/index.js代码：

const req = require.context('@/assets/icons/svg',false,/\.svg$/)const requireAll = requireContext =>{    // requireContext.keys()数据：['./404.svg', './agency.svg', './det.svg', './user.svg']    requireContext.keys().map(requireContext)} requireAll(req)
1
2
3
4
5
6

执行 requireContext.keys().map(requireContext)得到返回的数据：

5. main.js中引入icons/index.js

6. 创建SvgIcon公用组件

SvgIcon/index.vue代码：

<template>    <i v-if="iconFileName.indexOf('el-icon-') === 0" :class="iconFileName" />    <svg v-else class="svg-icon" aria-hidden="true" v-on="$listeners">        <use :xlink:href="`#icon-${iconFileName}`" />    </svg></template><script>export default {    name: 'SvgIcon',    props: {        iconFileName: {            type: String,            required: true        }    }}</script><style scoped>.svg-icon {    width: 1em;    height: 1em;    overflow: hidden;    vertical-align: -0.15em;    fill: currentColor;}</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

全局注册SvgIcon组件：

使用SvgIcon组件：