30 lines
679 B
Vue
30 lines
679 B
Vue
<!-- 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> |