<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "SvgIcon",
});
</script>
<script lang="ts" setup>
import { computed } from "vue";
import { getIconContent } from "@/components/Module/Icon/components/icon.ts";

const props = defineProps({
  prefix: {
    type: String,
    default: "icon",
  },
  name: {
    type: String,
    required: true,
  },
  color: {
    type: String,
    default: "currentColor",
  },
  className: {
    type: String,
    default: "",
  },
  stroke: {
    type: String,
    default: "currentColor",
  },
});

function processSvgForInline(svg: string, fillColor: string) {
  let processed = svg.replace(/<\?xml.*?\?>/, "");

  if (fillColor) {
    processed = processed.replace("<svg", `<svg fill="${fillColor || "currentColor"}" `);
  }

  return processed;
}

let svgContent: string | null = "";

const processedSvg = computed(() => {
  svgContent = getIconContent(props.name);
  return svgContent ? processSvgForInline(svgContent, props.color) : "";
});
</script>
<template>
  <div class="_svg-container" :style="`--color: ${color ?? 'inherit'};`">
    <template v-if="processedSvg">
      <div :class="`_svg-icon ${className || ''}`" v-html="processedSvg"></div>
    </template>
    <template v-else-if="name">
      <div :class="`_svg-icon ${className || ''}`">{{ name }}</div>
    </template>
  </div>
</template>

<style lang="scss" scoped>
._svg-container {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: inherit;
}
._svg-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  vertical-align: -0.1em;
  fill: currentColor;
  overflow: hidden;
  font-size: inherit;
}
</style>
