element-plus中图标如何通过参数渲染

我在开发vue3的时候发现，element-plus用的是svg格式的图标，所以无法通过后端传参来控制图标生成，只能前端写死，也搜过一些资料，都要一个一个配置对应的映射，很麻烦。

最近我找到了一个好的方法，利用vue的动态组件去渲染，下面贴出源码。

<script setup lang="ts">
import * as ElIcons from '@element-plus/icons-vue';

defineProps({
  name: {
    type: String,
    required: true
  }
});

const getIconData = () => {
  const data: { [key: string]: any } = {};

  Object.entries(ElIcons).forEach(([key, value]) => {
    data[key] = value;
  });

  return data;
};

const iconMap = shallowRef({
  iconData: getIconData()
});
</script>

<template>
  <el-icon>
    <component :is="iconMap.iconData[name]"></component>
  </el-icon>
</template>

<style scoped lang="less"></style>

我将element-plus的所有图标导出，并通过Object.entries() 这个方法，可以把一个对象的键值以数组的形式遍历出来，得到了icon名称与对应组件的映射，然后通过动态组件获取外部传参，就可以实现动态渲染图标的目的。