gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 12:06:02 25 4
gpt4 key购买 nike

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

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

我在关注 https://dev.to/aaronksaunders/build-your-first-ionic-vue-app-18kjhttps://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 不显示图标“添加”:

enter image description here

最佳答案

对于使用 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>

关于ionic-framework - Ionic-Vue Ionicons 5.x.x 不显示图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61422423/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com