import { defineComponent, h } from "vue";
import * as ElementPlusIconsVue from "@element-plus/icons-vue"; // 引入 ElementPlus 的图标集
import { ElIcon } from "element-plus"; // 引入 ElementPlus 的图标组件

interface AppIconProps {
  icon: string;
  color?: string;
  size?: string | number;
}

export default defineComponent({
  name: "AppIcon",
  props: {
    icon: {
      type: String,
      default: "",
      required: true,
    },
    color: {
      type: String,
      default: "#606266",
    },
    size: {
      type: [String, Number],
      default: "16px",
    },
  },
  setup(props: AppIconProps) {
    const icons = ElementPlusIconsVue;

    return () => (
      <ElIcon
        class="app-icon"
        style={{ color: props.color, fontSize: props.size }}
      >
        {/* 动态渲染 ElementPlus 图标 */}
        {h(icons[props.icon as keyof typeof ElementPlusIconsVue])}
      </ElIcon>
    );
  },
});
