<template>
  <span
    class="iconify"
    :data-icon="iconIdentifier"
    :style="iconStyle"
  />
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  iconIdentifier: {
    type: String,
    required: true
  },
  width: {
    type: [String, Number],
    default: '1em'
  },
  height: {
    type: [String, Number],
    default: '1em'
  },
  color: {
    type: String,
    default: undefined
  },
  size: {
    type: [String, Number],
    default: undefined
  }
})

const iconStyle = computed(() => {
  const style = {}

  if (props.width) {
    style.width = typeof props.width === 'number' ? `${props.width}px` : props.width
  }
  if (props.height) {
    style.height = typeof props.height === 'number' ? `${props.height}px` : props.height
  }
  if (props.color) {
    style.color = props.color
  }
  if (props.size) {
    const size = typeof props.size === 'number' ? `${props.size}px` : props.size
    style.fontSize = size
  }

  return style
})
</script>

<style scoped lang="scss">
.iconify {
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
}
</style>
