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" />