Ionic-Vue Ionicons 5.x.x에 아이콘이 표시되지 않음

Ionic-Vue Ionicons 5.x.x에 아이콘이 표시되지 않음

ionicons 5.0.1에서 ionic-vue를 사용했는데 통화 후

<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에 '추가' 아이콘이 표시되지 않음:

컴포지션 API를 사용하는 Ionic Vue 3의 경우:

<template>
  <ion-icon :icon="rocket" />
</template>

<script>
import { IonIcon } from '@ionic/vue';
import { rocket } from 'ionicons/icons';

export default {
  components: { IonIcon },
  setup() {
    return {
      rocket
    }
  }
}
</script>

위해서<script setup>

<script setup>
import { IonIcon } from '@ionic/vue';
import { rocket } from 'ionicons/icons';
</script>

<template>
  <ion-icon :icon="rocket" />
</template>

저도 같은 가이드(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>

main.js 파일

import * as allIcons from "ionicons/icons";

Vue.mixin({
  data() {
    return {
      i: allIcons,
    };
  },
  methods: {
    icon(name) {
      return this.i[name];
    }
  }
});

이제 사용할 수 있습니다.<ion-icon :src="icon('search')"></ion-icon>vue 어플리케이션의 어느 곳에서도 동작합니다.

블로그와 비디오를 봐줘서 고마워...

이 방법으로 아이콘을 얻을 수도 있습니다.

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

이 코멘트는 에 관한 클로즈드 호에서 팔로우 했습니다.@modus/ionic-vue레포: https://github.com/ModusCreateOrg/ionic-vue/issues/120#issuecomment-633666592

import { addIcons } from 'ionicons'
import { add, cartOutline } from 'ionicons/icons'
addIcons({ add, "cart-outline": cartOutline })

이것은 와 함께 작동했습니다.ionicons@5.1.2설치된.여러 단어 아이콘을 가져오면 케밥 케이스가 아닌 카멜 케이스가 됩니다.이름의 kebab 대소문자를 사용하는 경우ion-icon당신은 케밥 케이스에 대한 과제를 직접 해야 합니다.cart-outline위에.

한 번에 모든 개체를 추가하고 kebab 케이스를 지원하려면 다음과 같은 새 개체를 매핑할 수 있습니다.

import { addIcons } from 'ionicons'
import * as allIcons from 'ionicons/icons'
import _ from 'lodash'
addIcons(_.mapKeys(allIcons, (value, key) => _.kebabCase(key))

모든 것을 시도해 본 결과, 에러는 보고되지 않고, 아이콘은 표시되지 않았습니다.

기본적으로 아이콘 스타일의 색상이 들어가 있으므로 아이콘의 색상을 설정했는지 두 번 확인하십시오.예를 들어 녹색 버튼이 있는 경우 지정하지 않으면 아이콘 색상도 녹색이 됩니다.

언급URL : https://stackoverflow.com/questions/61422423/ionic-vue-ionicons-5-x-x-doesnt-show-icon