<script setup>
import { computed } from "vue";
import {
  createInlineIconData,
  createMissingIconData
} from "#my-icons-runtime/icon";
import {
  createSvgSymbol,
  getSvgHash,
  makeIdsUnique,
  parseSvg
} from "#my-icons-runtime/utils/svg";
import { warn } from "#my-icons-runtime/logger";
import Icon from "../internal/Icon.vue";
const props = defineProps({
  svg: { type: String, required: true }
});
const iconData = computed(() => {
  try {
    const parsedSvg = parseSvg(props.svg);
    const hash = getSvgHash(parsedSvg);
    parsedSvg.template = makeIdsUnique(parsedSvg.template);
    const href = `__my-icons-inline__${hash}`;
    const symbol = createSvgSymbol(parsedSvg, href);
    return createInlineIconData(href, symbol);
  } catch (_error) {
    warn(
      `Failed to resolve inline icon!
Reason: ${_error?.message || _error}`
    );
    return createMissingIconData();
  }
});
</script>

<template>
    <Icon :data="iconData" />
</template>
