ionic-framework - Ionic-Vue Ionicons 5.x.x 不显示图标

Question

我将 ionic-vue 与 ionicons 5.0.1 一起使用，但在通话后

<ion-icon name="add"></ion-icon>

我在关注 https://dev.to/aaronksaunders/build-your-first-ionic-vue-app-18kj和 https://github.com/ionic-team/ionic/issues/19078教程，但卡住了，FAB 中的图标无法显示。
这是我的语法，谢谢你的帮助。

<template>
   <ion-page>

        ....

        <ion-fab vertical="bottom" horizontal="end" slot="fixed">
            <ion-fab-button @click="$router.push({ name: 'new-item' })">
                <ion-icon name="add"></ion-icon>
            </ion-fab-button>
        </ion-fab>
        </ion-content>
    </ion-page>
</template>

<script>

...

import { addIcons } from 'ionicons';
import * as allIcons from 'ionicons/icons';

const currentIcons = Object.keys(allIcons).map(i => {
  const key = i.replace(/[A-Z]/g, letter => `-${letter.toLowerCase()}`)
  if(typeof allIcons[i] === 'string') {
    return {
      [key]: allIcons[i],
    }
  }
  return {
    ['ios-' + key]: allIcons[i].ios,
    ['md-' + key]: allIcons[i].md,
  };
});

const iconsObject = Object.assign({}, ...currentIcons);
addIcons(iconsObject);

...
</script>

结果 FAB 不显示图标“添加”:

Answer 1

对于使用 Composition API 的 Ionic Vue 3:

<template>
  <ion-icon :icon="rocket" />
</template>

<script>
import { IonIcon } from '@ionic/vue';
import { rocket } from 'ionicons/icons';

export default {
  components: { IonIcon },
  setup() {
    return {
      rocket
    }
  }
}
</script>

对于 <script setup> RFC

<template>
  <ion-icon :icon="rocket" />
</template>

<script setup>
import { IonIcon } from '@ionic/vue';
import { rocket } from 'ionicons/icons';
</script>