vue3+element-plus（1.2.0以上版本）使用图标新方法（@element-plus/icons-vue）

 新安装@element-plus/icons-vue

npm install --save @element-plus/icons-vue

在对应组件里面引入@element-plus/icons-vue，

这里elements-plus是想让我们按需使用使用一个，引入一个。

第一种：在自定义组件使用一个，引入一个。

在组件中引入图标：

import { CaretBottom, Avatar } from '@element-plus/icons'

在组件中注册图标： 

export default {
  name: 'Header',
  components: {
    CaretBottom,
    Avatar
  },
  setup() {
    ......
  }
}

 在模板中使用：

<el-icon><Avatar /></el-icon><span>前后都是图标</span><el-icon><CaretBottom /></el-icon>
<el-icon><avatar /></el-icon><span>好像小写也行</span><el-icon><caret-bottom /></el-icon>

可以配合其它带图标的组件使用：https://element-plus.gitee.io/zh-CN/component/input.html

 

第二种：全局注册。

//main.js
import { Expand,ChatRound } from '@element-plus/icons'
 
const app=createApp(App)
// 第一个参数传入的组件名即是之后调用时使用的组件名
// 此处组件名格式参照的时官方文档中icon部分的用例格式
app.component('expand',Expand)
   .component('chat-round',ChatRound)
app.mount('#app')

 

 

第三种：考虑统一全部一次性全部注入所有图标。

用 import * as 统一模块对象 from '路径' 方式导入，并使用 for in 循环注册。代码如下:

// main.js
// 统一导入el-icon图标
import * as ElIconModules from '@element-plus/icons'
// 导入转换图标名称的函数
import { transElIconName } from './utils/elementplusiconvue.js' 
...
// 统一注册el-icon图标
for(let iconName in ElIconModules){
    app.component(transElIconName(iconName),ElIconModules[iconName])
}
 
// utils/elementplusiconvue.js
// 将el-icon的组件名称AbbbCddd转化为elicon-abbb-cddd形式
// 此前用switch做组件名时因关键字重复报错，所以格式统一加了前缀
// 例：Switch转换为elicon-switch，ArrowDownBold转换为elicon-arrow-down-bold
export function transElIconName(iconName){
    return 'elicon'+iconName.replace(/[A-Z]/g,(match)=>'-'+match.toLowerCase())
}

此命名格式对应的调用代码如下：

<el-icon :size='20'><elicon-edit /></el-icon>
<i-expand />

el-icon在带图标组件种的使用：

// 在vue文件中单独导入使用
// template中使用，String和Component皆可
<el-input prefix-icon="Search" />
<el-input :suffix-icon="Search" />
// script中引入
import { Search } from '@element-plus/icons'

如果使用了统一一次性注册全部图标，则：

// 使用上文2021.10.12更新的el-icon统一导入及注册方式
// 在vue文件template中根据组件注册时的命名格式调用
// 但经过测试，仅String类型可直接调用
<el-input prefix-icon="elicon-search" />
// Component类型无图标显示
<el-input :suffix-icon="elicon-search" />