<script setup lang="ts">
import { computed } from 'vue'
const props = defineProps({
  iconName: {
    type: String,
    required: true,
  },
  className: {
    type: String,
    default: '',
  },
  color: {
    type: String,
    default: '#409eff',
  },
  size: {
    type: Number,
    default: 12,
  },
})
// 图标在 iconfont 中的名字
const name = computed(() => {
  return `#${props.iconName}`
})
// 给图标添加上类名
const svgClass = computed(() => {
  if (props.className) {
    return `svg-icon ${props.className}`
  }
  return 'svg-icon'
})
const colorMap = {
  primary: '#3369FF',
  warning: '#FF891B',
  success: '#39C676',
  green: '#39C676',
  danger: '#F54040',
  red: '#F54040',
  black: '#000',
  white: '#fff',
  dark: 'rgba(0, 0, 0, 0.85)',
  grey: 'rgba(0, 0, 0, 0.65)',
}
</script>
<template>
  <svg :class="svgClass" aria-hidden="true" :style="{ fontSize: size }" v-on="$listeners">
    <use :xlink:href="name" :fill="colorMap[color] || color" />
  </svg>
</template>
<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  position: relative;
  fill: currentColor;
  vertical-align: -2px;
  display: inline-block;
  line-height: inherit;
}
</style>
