catchAdmin/resources/admin/components/icon/index.vue

<template>
    <component :is="icon" :class="className" />
</template>

<script setup>
import { computed } from 'vue'
import * as heroIcons from '@heroicons/vue/24/outline'

const props = defineProps({
    name: {
        type: String,
        required: true,
    },
    className: {
        type: String,
        required: false,
        default: "w-5 h-5"
    }
})

const icon = computed(() => {
    let name = ''
    props.name.split('-').forEach(v => {
        name += v[0].toUpperCase() + v.substr(1)
    })
    return heroIcons[name + 'Icon']
})
</script>