archives/src/global/components_bak/hc-icon/index.vue

<template>
    <i class="hc-icon-i" :class="[`ri-${nameVal}${isFill ? '-fill' : line ? '-line' : ''}`, hui]"></i>
</template>

<script setup>
import { ref,watch } from "vue"
const props = defineProps({
    ui: {
        type: String,
        default: ''
    },
    //图标名
    name: {
        type: [String,Number],
        default: ''
    },
    //是否填充
    fill: {
        type: Boolean,
        default: false
    },
    line: {
        type: Boolean,
        default: true
    },
})

//初始变量
const hui = ref(props.ui)
const nameVal = ref(props.name)
const isFill = ref(props.fill)

//监听
watch(() => [
    props.ui,
    props.name,
    props.fill,
], ([ui,name,fill]) => {
    hui.value = ui;
    nameVal.value = name;
    isFill.value = fill;
})
</script>