<template>
  <span :style="{ display: 'inline-block', width: sSize, height: sSize }">
    <Icon
      v-if="icon"
      :key="key"
      :icon="icon"
      :width="sSize"
      :height="sSize"
      :style="{
  width: sSize,
  color: iconColor,
  backgroundColor: color,
  borderRadius: borderRadius && `${borderRadius}px`
}"
    />
  </span>
</template>

<script setup>
import { Icon } from "@iconify/vue/dist/offline";
import { loadIcon } from "@iconify/vue";
import { computed, useRuntimeConfig, ref, watch, onMounted, useNuxtApp } from "#imports";
const config = useRuntimeConfig().public.naiveui;
const props = defineProps({
  name: { type: String, required: true },
  size: { type: [Number, String], required: false },
  color: { type: String, required: false },
  borderRadius: { type: Number, required: false },
  iconColor: { type: String, required: false }
});
const _sSize = computed(() => props.size ?? config.iconSize);
const sSize = computed(() => typeof _sSize.value === "string" ? _sSize.value : `${_sSize.value}px`);
const sName = computed(() => props.name);
const icon = ref();
const key = ref(1);
const load = (name) => loadIcon(name).catch(() => console.error(`[nuxt-naiveui] failed to load icon ${name}`));
icon.value = await load(sName.value);
watch(sName, (value) => load(value).then((res) => icon.value = res));
onMounted(() => {
  const isPrerendered = typeof useNuxtApp().payload.prerenderedAt === "number";
  if (isPrerendered) {
    key.value++;
  }
});
</script>
