<script setup lang="ts">
import { computed } from "vue";
import { icons, type IconName } from "../config/icons";

const props = defineProps<{
    name: IconName;
    class?: string;
}>();

const svg = computed(() => {
    const content = icons[props.name];
    if (!content) {
        console.error(`Icon "${props.name}" not found in icon registry`);
    }
    return content;
});
</script>

<template>
    <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
        width="1em"
        height="1em"
        fill="none"
        :class="props.class"
        aria-hidden="true"
        v-html="svg"
    />
</template>
