element-plus，如何动态设置图标？

element-plus 里面的 icon，以前是字符串形式的，非常容易做成动态的效果，但是新版本改成了组件的形式，不支持字符串的形式了。
组件了如何动态呢？

其实也很简单，我们把需要的 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')

在模板里面使用

在模板里面使用动态组件，根据图标名称加载图标，使用style设置大小和颜色，这样就可以了。

在组件属性里面使用

几个例子：
el-input 的 prefix-icon 属性可以设置图标，属性类型是字符串或者组件，试了一下字符串，没有效果，大概需要在使用 el-input 的组件里面注册对应的图标，这样就不方便实现动态图标了，或者全局注册图标。

既然我们做了全局注册的字典，那么属性也可以用一用。

这样就可以统一使用动态图标了。