vue2中引入svg图标的方式

说明：在实际的项目开发中，使用svg图标占用内存比图片更小，映入图片内存比较大，同时也适用于不同屏幕的尺寸，

1，安装

npm i svg-sprite-loader --save

2，在components文件夹中新建文件SvgIcon,在文件夹下新建文件index.vue

 2,在index.vue文件下写入代码

3，在src文件夹下新建文件夹icons文件夹，在icons文件夹下新建index.js文件，粘贴一下代码在index.js内

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'

// 注册到全局
Vue.component('svg-icon', SvgIcon)

const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
requireAll(req)

4，在icons文件夹下新建svg文件夹

svg文件夹用于存放各种不同的svg文件，可以在iconfont官网直接复制iconfont-阿里巴巴矢量图标库

 例如：创建管理员icon图标

5，在svg文件夹下创建“guanli.svg”,然后把复制过来的svg代码片段粘贴到guanliyuan.svg内，可按需引入不同icon的svg图标。

 5，在main.js中引入

import './icons'

6.在项目中配置vue.config.js文件内新增：chainWebpack是新增的内容

const path = require('path')
const resolve = dir => path.join(__dirname, dir)
module.exports = {
	chainWebpack: config => {
	   	config.module
            .rule('svg')
            .exclude.add(resolve('src/assets/icons'))
            .end()
        config.module
            .rule('icons')
            .test(/\.svg$/)
            .include.add(resolve('src/assets/icons'))
            .end()
            .use('svg-sprite-loader')
            .loader('svg-sprite-loader')
            .options({
                symbolId: 'icon-[name]'
            })
            .end()
	}      
}

7，在页面中使用，iconClass是自定义的文件明，需要同icons下svg文件下的svg文件同名

 8,可以自定义icon的大小，颜色等。