<script lang="ts">
export default { inheritAttrs: false }
</script>

<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    color?: string
    fill?: string
    height?: number | string
    name: string
    size?: number | string
    verticalAlign?: string
    width?: number | string
  }>(),
  {
    fill: undefined,
    height: undefined,
    width: undefined,
    size: 16,
    color: '#000',
    verticalAlign: 'text-bottom',
  },
)

const _height = computed(() => `${props.height ?? props.width ?? props.size}px`)

const style = reactive({
  width: `${props.width ?? props.size}px`,
  height: _height.value,
  color: props.color,
  fontSize: `${props.size}px`,
  verticalAlign: props.verticalAlign,
})
</script>

<template>
  <el-icon
    v-if="name.indexOf('el-icon-') === 0"
    v-bind="$attrs"
    :size="props.size"
  >
    <component :is="name" :style="{ ...style }" />
  </el-icon>
  <i
    v-else-if="name.indexOf('iconfont') === 0"
    class="iconfont"
    v-bind="$attrs"
    :style="{ ...style }"
  ></i>
  <template v-else>
    <svg v-bind="$attrs" :style="{ ...style, fill }">
      <use :xlink:href="`#icon-${props.name}`" />
    </svg>
  </template>
</template>
