为什么离子图标没有显示在离子 Vue 项目中？

Question

我正在尝试在我的 ionic vue 项目中添加带有 ion-icon 的图标。我从 official page

复制了代码

<ion-icon name="aperture-outline"></ion-icon>

这是我的模板

<template>
  <ion-content class="content">
    <h1>Hello</h1>
    <ion-icon name="aperture-outline"></ion-icon>
    <h1>Hello2</h1>
  </ion-content>
</template>

<style scoped>
.content {
  --color: rgb(6, 114, 141);
  --background: rgb(240, 234, 234);
  --padding-top: 50px;
}
</style>

这是我的输出

为什么我的图标没有显示？

N.B 没有解决我的问题

Answer 1

我很确定您需要更新图标本身的命名约定——如果我没记错的话，文档在这一点上似乎是不正确的。

所以：

<ion-icon name="aperture-outline"></ion-icon>

变为：

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

与您的导入和设置中的 return 相同。这至少对我有用。

Answer 2

你必须更换

<ion-icon name="aperture-outline"></ion-icon>

和

<ion-icon :icon="apertureOutline"></ion-icon>

并在脚本部分导入图标，即

import { apertureOutline } from "ionicons/icons";

截至发布此答案时，我不确定问题中是否有带有名称的图标

为什么离子图标没有显示在离子 Vue 项目中？

Why ion-icon is not showing in ionic vue project?

ionic-framework

ionic-vue

ionic5