Vue3中使用svg

1）安装插件

npm install svg-sprite-loader --save-dev

2）封装svgIcon组件

在componemts里新建svgIcon文件夹，新建index.vue，封装成组件

3）在src下新建icons文件夹，此文件夹下新建svg文件夹。其中svg文件夹存放所有的svg文件

4）在icons下新建index.js，由于配置svg

import Vue from 'vue'
import SvgIcon from '@/components/svgIcon'
Vue.component('svg-icon', SvgIcon)
const requireAll = requireCOntext=> requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
requireAll(req)

5）在svg文件夹下新建user.svg。打开阿里图标仓库，找一个用户的图标的svg并复制，粘贴到user.svg中

6）在vue.config.js添加下面的内容

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-sprite-loader')
.test(/\.svg$/)
.include
.add(resolve('src/icons')) //处理svg目录
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
},
}

7）在main.js里引入

import './icons'

8）在页面中使用

svg图标

其中icon-class指定的是svg文件的名字。查看页面如下：