<script setup lang="ts">
const props = defineProps<{
  name: string
}>()
const isEmoji = computed(() => !props.name.includes('-'))
const iconClass = computed(() =>
  props.name.startsWith('i-') ? props.name : `ii-${props.name}`,
)
const isServer = import.meta.server
</script>

<template>
  <span v-if="isEmoji">{{ name }}</span>
  <Skeleton
    v-else-if="isServer && iconClass.startsWith('ii-')"
    class="w-1em h-1em"
  />
  <span v-else :class="iconClass" class="inline-block" />
</template>
