本文共 1000 字，大约阅读时间需要 3 分钟。

1. 新建的vue项目结构
    
2. components文件下新建SvgIcon组件
    
    index.vue文件中代码
    

    

3. 将所需svg文件放置icons的svg文件夹下
    
    icons文件下的index.js文件中的代码如下：
    
    

   import Vue from 'vue'import SvgIcon from '@/components/SvgIcon'// svg组件// register globallyVue.component('svg-icon', SvgIcon)const requireAll = requireContext => requireContext.keys().map(requireContext)const req = require.context('./svg', false, /\.svg$/)requireAll(req)

    

4. main.js中引入icons文件
    
5. 安装svg-sprite-loader，并且创建vue.config.js文件
    命令：
          npm install svg-sprite-loader --save
     vue.config.js文件内容如下：
     

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

    

6. 最后直接在组件中使用icon-class为svg名字的图标即可