<template>
  <i 
    :data-lucide="name" 
    :class="className" 
    :style="style"
    ref="iconRef"
  ></i>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'

interface Props {
  name: string
  className?: string
  style?: Record<string, any>
}

const props = withDefaults(defineProps<Props>(), {
  className: '',
  style: () => ({})
})

const iconRef = ref<HTMLElement | null>(null)

const updateIcon = () => {
  if (window.lucide && iconRef.value) {
    // 重新创建图标
    window.lucide.createIcons()
  }
}

onMounted(() => {
  updateIcon()
})

watch(() => props.name, () => {
  updateIcon()
})
</script>