vue3.0使用iconfont图标

1、首页定义一个组件，在main.js中引入

icons目录（svg里面是下载svg文件）

index文件配置
 

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg组件
// import generateIconsView from '@/views/svg-icons/generateIconsView.js'// just for @/views/icons , you can delete it

// register globally
Vue.component('svg-icon', SvgIcon)

const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
const iconMap = requireAll(req)

// generateIconsView.generate(iconMap) // just for @/views/icons , you can delete it

svg目录

2、在vue.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()

3、装依赖
svg-sprite-loader
4、在需要的地方引入
<svg-icon icon-class="flow-copy" />