如何使用iconify vue Composition API

Question

vue 新手，此处图标化。

我正在尝试使用来自 @iconify/vue 的图标使用组合 API 但它不起作用

这是我的

File.ts

import { Icon } from "@iconify/vue";

export default defineComponent({
  setup() {

    return { Icon };
  },
});

File.vue

<template>
 <div>
  <Icon icon="logos:Whosebug-icon" width="20" :inline="true" />
</div>
</template>

<script lang="ts" src="./File.ts"></script>

另一方面，如果我放入单个文件，它就可以正常工作

allTogether.vue

<template>
 <div>
  <Icon icon="logos:Whosebug-icon" width="20" :inline="true" />
 </div>
</template>

<script setup lang="ts">
 import { Icon } from "@iconify/vue";
</script>

有人可以帮我吗？

Answer 1

在没有脚本设置的情况下使用api 组合（与在外部文件中所做的一样，您需要使用top-level components 注册组件的选项。

import { Icon } from "@iconify/vue";

export default defineComponent({
  components: {
    Icon
  },
  setup() {
    // Your logic code
  }
})

如何使用iconify vue Composition API

How to use iconify vue Composition API

javascript

vue.js

vuejs3