<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 icon = icons[props.name];
  if (!icon) {
    throw new Error(`Icon "${props.name}" not found in icon registry`);
  }
  return icon;
});
</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>
