在其他项目复用svg（备忘）

在新项目的src目录下粘贴icons文件夹内的所有内容

• svg-icon是一个全局组件，在src/icons/index.js中定义并注册成立全局组件。

• 在main.js中引入import '@/icons'

需要将src/utils/validate.js文件复制到新项目对应的位置

• 它额外需要svg-sprite-loader@4.1.3的配合，及对应的vue.config.js中的配置。 配置内容如下：

'use strict'
const path = require('path')

// eslint-disable-next-line space-before-function-paren
function resolve (dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  chainWebpack(config) {
    // when there are many pages, it will cause too many meaningless requests
    config.plugins.delete('prefetch')

    // 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()   
  }
}

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

重启项目，查看页面中是否出现了文件中对应的图标