vue项目中封装icon-svg组件

1、设置组件 component/icon-svg.vue

2、注册全局组件，在src目录下新建文件夹icons，结构如下

icons/svg放所有的svg类型的图标，在index.js中注册

// index.js
import Vue from 'vue'
import icon from '@/components/icon-svg.vue'
// 注册到全局组件
Vue.component('icon-svg', icon)

// 将./svg下不包括子目录的所有后缀名.svg的文件赋值给变量req
const req = require.context('./svg', false, /.svg$/)
// 函数 全部导入
const importAll = (r) => r.keys().map(r)

importAll(req)

3、main.js中进行导入：import '@/icons'
4、webpack配置

// vue.config.js
const path = require('path')
function resolve(dir) {
  return path.join(__dirname, dir)
}
module.exports = {
  transpileDependencies: true,
  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]' })
      .end()
  },
}

5、项目中使用组件

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net