vue.js - ion-icon 在 ionic vue 中不显示图标

Question

我创建了一个空白的 Ionic Vue 项目，并具有以下 View ，其中添加了 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>

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

Answer 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 }

 }