Блог

Я создал пустой проект 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>
 

Но я все еще не вижу значок, и я также не получаю никаких ошибок.

Вам необходимо импортировать компонент 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 }

 }
 

Попробуйте сделать это, это поможет мне и установить этот пакет 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>