<template>
  <i
    v-if="unicodeIcon"
    class="iconfont factory unicode-icon"
    v-html="unicodeIcon"
  ></i>
  <svg v-else class="svg-icon factory" aria-hidden="true">
    <slot name="title"></slot>
    <use :xlink:href="svgIcon"></use>
  </svg>
</template>
<script lang="ts" setup>
import { computed } from 'vue';

const props = defineProps({
  name: {
    type: String,
    required: true,
  }
})
const unicodeIcon = computed(() => {
  if (props.name.match(/^x[a-f0-9]{4,}$/)) {
    return `&#${props.name};`
  }
  return undefined
})
const svgIcon = computed(() => {
  if (unicodeIcon.value) return undefined
  return `#icon-${props.name}`
})
</script>
<style>
.unicode-icon {
  width: 1em;
  height: 1em;
  color: inherit;
}
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>