为什么 ion-icon 没有在 ionic vue 项目中显示？答案

【问题标题】：Why ion-icon is not showing in ionic vue project?为什么 ion-icon 没有在 ionic vue 项目中显示？
【发布时间】：2021-02-28 08:15:23
【问题描述】：

我正在尝试在我的 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 this answer 不能解决我的问题

【问题讨论】：

ion-icon 在渲染后是否得到hydrated 类？

标签： ionic-framework ionic5 ionic-vue

【解决方案1】：

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

所以：

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

变成：

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

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

【讨论】：