vue3 svg图标全局使用

需要用到 svg-sprite-loader

npm install svg-sprite-loader -D

const path = require('path')

function resolve(dir) {
  return path.join(__dirname, '.', dir)
}
module.exports = {
  chainWebpack: config => {
    config.module.rules.delete("svg"); //重点:删除默认配置中处理svg,
    config.module
        .rule('svg')
        .test(/.svg$/)
        .include
        .add(resolve('src/icons')) //处理svg目录
        .end()
        .use('svg-sprite-loader')
        .loader('svg-sprite-loader')
        .options({
          symbolId: 'icon-[name]'
        })
        .end()
  },
}

vue3中在main.js中使用app.component()

//SvgIcon为svg公共组件
import SvgIcon from '@/components/svgIcon'

const app = createApp(App)

app.component('svg-icon', SvgIcon)