Vue3+Element Plus使用svg加载iconfont的解决方案

安装依赖

由于我们是Vue3项目，可以使用vite来快速创建一个Vu3项目：

npm install -g yarn
yarn create vite my-vue-app --template vue // 这里我们使用vue模板，默认是Javascript语法，如果需要ts语法则需要指定模板为vue-ts
cd my-vue-app
yarn
yarn dev 
1
2
3
4
5

创建好项目后，我们再来引入Element Plus，安装并引入的过程如下：

安装：

yarn add element-plus 
1

完整引入：

// main.js
...
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus) 
1
2
3
4
5

引入后，我们就可以在Vue3项目中使用了：

 
1
2

Element Plus使用Icon会比Element UI稍微麻烦点。首先我们需要安装Icon的依赖：

yarn add @element-plus/icons-vue 
1

我们在main.js中注册所有的图标，当然也可以按需引入图标：

// main.js
// 全局引入
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
...
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)
} 
1
2
3
4
5
6

el-icon的使用：

 
1
2
3

Element Plus的el-icon使用的是svg，这与Element UI使用的类名有很大的不同，也就是说我们无法直接在el-icon中使用iconfont的图标。虽然Element Plus的图标已经能满足大部分场景的需求，但是一些特殊场景只能