<!-- components/Icon.vue -->
<template>
  <svg :class="svgClass" :width="size" :height="size" :viewBox="viewBox" aria-hidden="true" focusable="false">
    <use :xlink:href="`#${iconName}`"></use>
  </svg>
</template>

<script setup lang="ts">
import { computed } from 'vue';

const props = withDefaults(defineProps<{
  name: string,
  size?: number | string,
}>(), {
  size: 24,
});

const iconName = computed(() => `icon-${props.name}`);
const svgClass = computed(() => `icon icon-${props.name}`);

const viewBox = '0 0 24 24'; // Adjust this based on your icons
</script>

<style scoped>
.icon {
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
}
</style>