<script setup>
// Renders an icon by name. Use semantic names (e.g. "plus", "trash"); avoid raw "pi pi-*" in views.
import { computed } from "vue";
import { resolveIcon } from '../../lib/icons.js'

const props = defineProps({
  name: { type: String, default: "" }, // e.g. "plus", "trash", "exclamation-triangle"
  class: { type: [String, Object, Array], default: "" },
});

const iconClass = computed(() => resolveIcon(props.name));
</script>

<template>
  <i v-if="iconClass" :class="[iconClass, props.class]" aria-hidden="true" />
</template>
