for_client/src/global/components/hc-icon/index.vue

<template>
    <span class="material-symbols-rounded" :class="classVal">{{nameVal}}</span>
</template>

<script setup>
import { ref,watch } from "vue"
const props = defineProps({
    ui: {
        type: String,
        default: ''
    },
    name: {
        type: [String,Number],
        default: ''
    }
})

//初始变量
const classVal = ref(props.ui)
const nameVal = ref(props.name)

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