new to vue and iconify here.
I'm trying to use icons from @iconify/vue using Composition API but it is not working
here's what I have
File.ts
import { Icon } from "@iconify/vue";
export default defineComponent({
setup() {
return { Icon };
},
});
File.vue
<template>
<div>
<Icon icon="logos:stackoverflow-icon" width="20" :inline="true" />
</div>
</template>
<script lang="ts" src="./File.ts"></script>
On the other hand if I put in a single file it works just fine
allTogether.vue
<template>
<div>
<Icon icon="logos:stackoverflow-icon" width="20" :inline="true" />
</div>
</template>
<script setup lang="ts">
import { Icon } from "@iconify/vue";
</script>
Can someone please help me ?
When using the composition api without script setup (as you did in the external file, you need to use the top-level components option to register components.
import { Icon } from "@iconify/vue";
export default defineComponent({
components: {
Icon
},
setup() {
// Your logic code
}
})