<template>
  <div :style="containerStyle" v-if="svgContent" v-html="svgContent"></div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'

const props = defineProps({
  name: {
    type: String,
    required: true
  },
  size: {
    type: String,
    default: '100'
  },
  color: {
    type: String,
    default: 'currentColor'
  }
})

const svgContent = ref('')

// 设置容器的样式
const containerStyle = computed(() => ({
  width: props.size,
  height: props.size
}))

// 监听name属性变化
watch(() => props.name, fetchSvg)

// 加载SVG文件并添加样式
async function fetchSvg() {
  try {
    const response = await fetch(
      new URL(`../../src/icons/${props.name}.svg`, 'http://localhost').href
    )
    let svg = await response.text()

    // 使用正则表达式替换fill属性
    svg = svg.replace(/fill="[^"]*"/g, `fill="${props.color}"`)

    // 将大小属性直接应用到svg标签
    svg = svg.replace(/<svg/, `<svg width="${props.size}" height="${props.size}"`)

    svgContent.value = svg
  } catch (error) {
    console.error(`Error fetching SVG: ${error.message}`)
  }
}

// 在组件挂载时加载SVG
onMounted(fetchSvg)
</script>

<style scoped>
div {
  display: inline-block;
  vertical-align: middle;
}
</style>
