element-plus 里面的 icon，以前是字符串形式的涕癣，非常容易做成動態(tài)的效果哗蜈，但是新版本改成了組件的形式，不支持字符串的形式了坠韩。
組件了如何動態(tài)呢距潘？
其實也很簡單，我們把需要的 icon組件 注冊為全局的字典只搁，key：組件 的形式音比，然后就可以把字符串轉換為圖標組件了。
全局注冊
首先建立一個js文件氢惋，引入圖標硅确，做成字典的形式，再用 Vue 的插件功能注冊為全局變量明肮。
import { reactive } from 'vue'
// 引入全部圖標
// import * as Icons from "@element-plus/icons"
// 按需引入圖標
import {
CloseBold,
Close,
Plus,
Star,
UserFilled,
Loading,
Connection,
Edit,
FolderOpened
} from '@element-plus/icons'
const dictIcon = reactive({
'CloseBold': CloseBold,
'Close': Close,
'Plus': Plus,
'Star': Star,
'UserFilled': UserFilled,
'Loading': Loading,
'Connection': Connection,
'Edit': Edit,
'FolderOpened': FolderOpened
})
const installIcon = (app) => {
// 便于模板獲取
app.config.globalProperties.$icon = dictIcon
// 使用全部圖標
// app.config.globalProperties.$icon = Icons
}
export default installIcon
使用全部圖標
這里有兩種使用方式，一種是簡單粗暴的全部圖標都注冊了缭付，看了一下node_modules里面的文件柿估，一共二、三百KB陷猫，如果不太在意體積的話秫舌，可以全都弄進來的妖。
按需索取
如果使用的圖標不是很多，那么可以只引入需要的圖標足陨，這樣體積就小很多了嫂粟。
在 main.js 里面掛載。
// 設置icon
import installIcon from './icon/index.js'
app.use(nfElementPlus) // 全局注冊
.use(router) // 路由
.use(installIcon) // 注冊全局圖標
.use(ElementPlus, { locale: zhCn, size: 'small' }) // UI庫
.mount('#app')
在模板里面使用
<component
:is="$icon[iconName]"
style="width: 1.5em; height: 1.5em; margin-right: 8px;color:#123456"
>
</component>
在模板里面使用動態(tài)組件墨缘，根據圖標名稱加載圖標星虹，使用style設置大小和顏色，這樣就可以了镊讼。
在組件屬性里面使用
幾個例子：
el-input 的 prefix-icon 屬性可以設置圖標宽涌，屬性類型是字符串或者組件，試了一下字符串蝶棋，沒有效果卸亮，大概需要在使用 el-input 的組件里面注冊對應的圖標，這樣就不方便實現動態(tài)圖標了玩裙，或者全局注冊圖標兼贸。
既然我們做了全局注冊的字典，那么屬性也可以用一用吃溅。
<el-input
v-model="value"
:prefix-icon="($icon)?$icon['Edit']:'' "
:suffix-icon="($icon)?$icon[iconName]:'' "
>
</el-input>
這樣就可以統一使用動態(tài)圖標了溶诞。
