Element Plus最新图标引入以及使用方法，icon动态组件，点击切换图标

最新版本的Element Plus已经移除了Font icon，以下引入以及使用方法为亲测可用的，但是不知道后续是否还会改变，大家可以借鉴一下。

本人使用版本  

"element-plus": "^1.3.0-beta.1",

"@element-plus/icons-vue": "^0.2.6",

 "typescript": "~4.1.5"

1.安装

# Choose a package manager you like.

# NPM
$ npm install @element-plus/icons-vue
# Yarn
$ yarn add @element-plus/icons-vue
# pnpm
$ pnpm install @element-plus/icons-vue

2.使用

基本使用方法官方文档写的很清楚，不再赘述，以下只做动态组件使用说明

需要在main.ts中统一导入

import * as ElIconModules from '@element-plus/icons-vue'

// 统一注册Icon图标
for (const iconName in ElIconModules) {
  if (Reflect.has(ElIconModules, iconName)) {
    const item = ElIconModules[iconName]
    app.component(iconName, item)
  }
}

 如果你使用的是ts，当数组下标为字符串时，会报错。，在ElIconModules[iconName]这里还会报错，解决方法是需要在ts.config.json中加入以下代码，看注释处

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": ["webpack-env"],
    "paths": {
      "@/*": ["src/*"]
    },
    "suppressImplicitAnyIndexErrors": true, //加入这段代码解决main.ts报错问题
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": ["node_modules"]
}

完成以上即可完成全局的图标注册

3.动态组件使用方法

    <el-icon :size="30">
      <component
        class="fold-menu"
        :is="iconName"
        @click="handleFoldClick"
      ></component>
    </el-icon>

在写项目时有一个需求是点击图标要进行图标切换，以往都是使用动态class的方式，但是现在因为Element Plus移除了iconfont，所以需要使用动态组件，下面上完整代码，一看便知，直接复制也可实现

<template>
  <div class="nav-header">
    <el-icon :size="30">
      <component
        class="fold-menu"
        :is="iconName"
        @click="handleFoldClick"
      ></component>
    </el-icon>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  emits: ['foldChange'], //子传父
  setup(props, { emit }) {
    let iconName = ref('Fold')
    const isFold = ref(false)
    // 这里是点击图标可以进行切换，自己想的实现方法，可能不太好，但是功能实现了
    const handleFoldClick = () => {
      isFold.value = !isFold.value
      if (isFold.value == false) {
        iconName.value = 'Expand'
      } else {
        iconName.value = 'Fold'
      }
      emit('foldChange', isFold.value)
    }
    return {
      iconName,
      handleFoldClick,
      isFold
    }
  }
})
</script>

<style scoped lang="less">
.fold-menu {
  cursor: pointer;
}
</style>

 本人也是菜鸟，也是东拼西凑加上自己实践，希望能帮到各位吧，马上过年了，祝各位程序猿新年快乐，万事胜意~