ion-icon 没有在 ionic vue 中显示图标答案

【问题标题】：ion-icon not showing an icon in ionic vueion-icon 没有在 ionic vue 中显示图标
【发布时间】：2020-12-28 09:52:24
【问题描述】：

我创建了一个空白的 Ionic Vue 项目，并在以下视图中添加了 ion-icon 元素以及 IonIcon 导入：

<template>
  <ion-page>
    <ion-header :translucent="true">
      <ion-toolbar>
        <ion-title>Blank</ion-title>
      </ion-toolbar>
    </ion-header>
    
    <ion-content :fullscreen="true">
      <ion-header collapse="condense">
        <ion-toolbar>
          <ion-title size="large">Blank</ion-title>
        </ion-toolbar>
      </ion-header>
    
      <div id="container">
        <strong>Ready to create an app?</strong>
        <ion-icon name="home-outline"></ion-icon>
      </div>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonIcon } from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Home',
  components: {
    IonContent,
    IonHeader,
    IonPage,
    IonTitle,
    IonToolbar,
    IonIcon
  }
});
</script>

但我还是看不到图标，而且我也没有收到任何错误。

【问题讨论】：

标签： vue.js ionic-framework

【解决方案1】：

您需要分别导入 IonIcon 组件和单个图标，如下所示

in template

<ion-icon :icon="caretUpOutline" />
// please note, not like this <ion-icon name="caretUpOutline"></ion-icon>


import { IonIcon } from "@ionic/vue";
import { caretUpOutline, caretDownOutline } from "ionicons/icons";

export default {
  name: "test",
  components: { IonIcon },

 setup() {

    return { caretUpOutline }

 }

【讨论】：

谢谢，Ionic 需要你加入他们的文档团队（jk 他们没有）

【解决方案2】：

尝试这样做，它可以帮助我安装这个包https://www.npmjs.com/package/ionicons

<template>
  <ion-page>
    <ion-header :translucent="true">
      <ion-toolbar>
        <ion-title>Blank</ion-title>
      </ion-toolbar>
    </ion-header>
    
    <ion-content :fullscreen="true">
      <ion-header collapse="condense">
        <ion-toolbar>
          <ion-title size="large">Blank</ion-title>
        </ion-toolbar>
      </ion-header>
    
      <div id="container">
        <strong>Ready to create an app?</strong>
        <ion-icon :icon="homeOutline"></ion-icon>
      </div>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonIcon } from '@ionic/vue';
import { defineComponent } from 'vue';
import {homeOutline} from 'ionicons/icons';

export default defineComponent({
  name: 'Home',
  components: {
    IonContent,
    IonHeader,
    IonPage,
    IonTitle,
    IonToolbar,
    IonIcon
  },
data(){
  return {
    homeOutline,
  }
}
});
</script>

【讨论】：