vue-cli构建的项目中使用svg图标

参考：https://www.zhangxinxu.com/wordpress/2014/07/introduce-svg-sprite-technology/

参考：https://cisy.me/webpack-svg-sprite/

1、安装插件：

npm i -S svg-sprite-loader

2、更改build/webpack.base.conf.js配置文件

        {
            test: /\.svg$/,
            loader: 'svg-sprite-loader',
            include: [path.resolve(__dirname, '../src/images/icons')],
            options: {
                //symbolId: 'icon-[name]' //这个没有生效，生效的是默认的name
            }
        }

        {
            test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
            loader: 'url',
            exclude: [path.resolve(__dirname,'../src/images/icons')], //排除字体图标文件
            query: {
                limit: 10000,
                name: utils.assetsPath('img/[name].[ext]')
            }
        },

3、下载svg文件并放入images/icons/svg/目录下，

4、新建公用组件components/common/SvgIcon.vue

5、新建src/images/icons/index.js文件

import Vue from 'vue'
import SvgIcon from '../../components/common/SvgIcon'
/* require.context("./test", false, /.test.js$/);
    这行代码就会去 test 文件夹（不包含子目录） 下面的找所有文件名以 .test.js 结尾的文件能被 require 的文件。
    更直白的说就是 我们可以通过正则匹配引入相应的文件模块。
     require.context有三个参数： 
     directory：说明需要检索的目录 
     useSubdirectories：是否检索子目录 
     regExp: 匹配文件的正则表达式 */
//全局注册 
Vue.component('svg-icon', SvgIcon) 
const requireAll = requireContext => requireContext.keys().map(requireContext) 
const req = require.context('./svg', false, /\.svg$/) 
requireAll(req)

6、main.js中引入组件

import './images/icons/index.js'

7、组件中应用