Ioni c - Vue Ionicons 5.xx не показывает значок

Question

Я использовал ioni c - vue с иониками 5.0.1, но после звонка

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

я следовал https://dev.to/aaronksaunders/build-your-first-ionic-vue-app-18kj и https://github.com/ionic-team/ionic/issues/19078 учебник, но застрявший и значок в FAB нельзя показать. Это мой синтаксис, спасибо за помощь.

<template>
   <ion-page>

        ....

        <ion-fab vertical="bottom" horizontal="end" slot="fixed">
            <ion-fab-button @click="$router.push({ name: 'new-item' })">
                <ion-icon name="add"></ion-icon>
            </ion-fab-button>
        </ion-fab>
        </ion-content>
    </ion-page>
</template>

<script>

...

import { addIcons } from 'ionicons';
import * as allIcons from 'ionicons/icons';

const currentIcons = Object.keys(allIcons).map(i => {
  const key = i.replace(/[A-Z]/g, letter => `-${letter.toLowerCase()}`)
  if(typeof allIcons[i] === 'string') {
    return {
      [key]: allIcons[i],
    }
  }
  return {
    ['ios-' + key]: allIcons[i].ios,
    ['md-' + key]: allIcons[i].md,
  };
});

const iconsObject = Object.assign({}, ...currentIcons);
addIcons(iconsObject);

...
</script>

Результат FAB не показывает значок «добавить»:

Answer 1

Я также следовал этому руководству (https://dev.to/devmount/how-to-use-ionicons-v5-with-vue-js-53g2) и столкнулся с той же проблемой.

Я решил понизить версию ionicons до версии 4:

npm i ionicons@4

Это решило мою проблему.

Код, который я использовал из руководства:

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>Home</ion-title>

      </ion-toolbar>
    </ion-header>
    <ion-content padding>
      <ion-list>
        <ion-item>
          <ion-checkbox slot="start"></ion-checkbox>
          <ion-label>
            <h1>Create Ideaa</h1>
            <ion-note>Run Idea by Brandy</ion-note>
          </ion-label>
          <ion-badge color="success" slot="end">5 Days</ion-badge>
        </ion-item>
      </ion-list>
      <ion-fab vertical="bottom" horizontal="end" slot="fixed">
        <ion-fab-button >
          <ion-icon name="add"  ></ion-icon>
        </ion-fab-button>
      </ion-fab>
    </ion-content>
  </ion-page>
</template>

 <script>

  import { add } from "ionicons/icons";
  import { addIcons } from "ionicons";
  addIcons({
    "ios-add": add.ios,
    "md-add": add.md
  });

  export default {
    name: "HomePage",
    props: {
      msg: String
    }
  };
</script>

Answer 2

эй, спасибо за просмотр блогов и видео ...

Вы также можете получить значки таким образом ...

<template>
<ion-button @click="handleAddItemClicked" >
  <ion-icon slot="icon-only" :src="i.saveOutline" ></ion-icon>
</ion-button>
      <ion-button @click="handleAddItemClicked" >
  <ion-icon slot="icon-only" :src="i.save" ></ion-icon>
</ion-button>
      <ion-button @click="handleAddItemClicked" >
  <ion-icon slot="icon-only" :src="i.saveSharp" ></ion-icon>
</ion-button>
</template>

<script>
import * as allIcons from "ionicons/icons";

...

  data() {
    return {
      i : allIcons,
    };
  },
</script>