How to use iconify vue Composition API-CodePudding

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 ?

CodePudding user response：

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
  }
})