<script setup lang="ts">
import type { IconifyRenderMode } from 'iconify-icon'
import type { PropType } from 'vue'

const props = defineProps({
  name: {
    type: String,
    required: true,
  },
  color: {
    type: String,
    default: 'white',
  },
  mode: {
    type: String as PropType<IconifyRenderMode>,
    default: 'svg',
  },
  inline: {
    type: Boolean,
    default: false,
  },
  width: {
    type: String,
    default: '1em',
  },
  height: {
    type: String,
    default: '1em',
  },
  flip: {
    type: String,
    default: '',
  },
  rotate: {
    type: [String, Number],
    default: '',
  },
})
</script>

<template>
  <iconify-icon
    class="icon"
    :icon="props.name"
    :mode="props.mode"
    :inline="props.inline"
    :width="props.width"
    :height="props.height"
    :flip="props.flip"
    :rotate="props.rotate"
  />
</template>

<style scoped lang="scss">
.icon {
  color: v-bind(color);
}
</style>
