<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "CommonIcon",
});
</script>

<script lang="ts" setup>
import * as Icons from "@ant-design/icons-vue";
import SvgIcon from "./components/SvgIcon.vue";

// const { name, color } = defineProps(['name', 'color'])

interface propsType {
  name?: string;
  color?: string;
}

let props = withDefaults(defineProps<propsType>(), {
  name: "",
  color: "inherit",
});

const keys = Object.keys(Icons);

const rendIcon = (name: string) => {
  const isDefault = keys.find((item) => {
    return item == name;
  });
  return isDefault;
};
</script>

<template>
  <!-- {{ props.color }} -->
  <div
    v-if="rendIcon(props.name)"
    class="_global-icon"
    :style="{
      '--color': props.color ? props.color : 'inherit',
    }"
  >
    <component :is="props.name"></component>
  </div>
  <div
    v-else
    class="_global-icon"
    :style="{
      '--color': props.color ? props.color : 'inherit',
    }"
  >
    <svg-icon :name="props.name" v-if="props.name" :color="props.color" class="_global-svg-icon" />
  </div>
</template>

<style lang="scss" scoped>
._global-icon {
  color: var(--color);
  display: flex;
  align-items: center;
  justify-content: center;
  ._global-svg-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    font-size: inherit;
    use {
      fill: currentColor;
    }
  }
}
</style>
