如何在新项目中使用svg-icon组件

1. 安装依赖

   npm i svg-sprite-loader@4.1.3

2. 配置 vue.config.js

   ​{
     // 省略其他...
     chainWebpack (config) {
       // set svg-sprite-loader
       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]'
         })
         .end()
     }
   }

3. 复制/创建文件
   1. src/icons

      src/icons
      -       /svg       # 保存图标
      -       /index.js  # 注册全局组件

   2. 组件

      componets/SvgIcon/index.vue

   3. validate.js

      utils/validate.js

4. 在main.js中引入

   import '@/icons'

5. 使用格式<svg-icon icon-class="文件名"/> 。这里的文件名就是在src/icons/svg下的文件名。