<template>
  <div class="AiIcon">
    <div v-if="type=='icon'" class="iconfont" :class="icon"/>
    <div v-if="type=='logo'" class="logofont" :class="icon"/>
    <svg v-if="type=='svg'" class="icon" aria-hidden="true">
      <use :xlink:href="`#${icon}`"></use>
    </svg>
  </div>
</template>

<script>
import "../../lib/styles/iconfont/iconfont";
import "../../lib/styles/iconfont/iconfont.css";
import "../../lib/styles/iconfont/logofont.css";

export default {
  name: "AiIcon",
  props: {
    type: {type: String, default: "icon"},
    icon: {type: String, required: true},
  }
}
</script>

<style lang="scss" scoped>
.AiIcon {
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  font-size: 16px;

  .iconfont, .logofont, .icon {
    font-size: inherit;
    width: inherit;
    height: inherit;
  }
}
</style>
