7

我将 ionic-vue 与 ionicons 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 不显示图标“添加”：

在此处输入图像描述

4

6 回答 6

22

对于使用 Composition 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>
于 2020-10-18T13:29:36.863 回答
3

我也遵循相同的指南（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>
于 2020-05-01T09:56:18.887 回答
3

在你的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 应用程序的任何地方使用它了，它可以工作了

于 2020-06-19T06:09:25.073 回答
1

嘿，感谢您查看博客和视频...

您也可以通过这种方式获取图标...

<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>
于 2020-04-26T02:54:17.173 回答
1

@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 case 变体，ion-icon您必须自己对 kebab case 名称进行分配，就像cart-outline上面的情况一样。

尽管如果您想一次添加所有这些并支持 kebab 案例，您可以像这样映射一个新对象：

import { addIcons } from 'ionicons'
import * as allIcons from 'ionicons/icons'
import _ from 'lodash'
addIcons(_.mapKeys(allIcons, (value, key) => _.kebabCase(key))
于 2020-07-23T15:04:52.793 回答
1

在我尝试了一切之后，这里没有报告任何错误，只是图标不在那里。

请检查两次，您是否设置了图标的颜色，因为在默认图标样式中，颜色是继承的。因此，例如，如果您有一个绿色按钮，如果您未指定，图标的颜色也将是绿色。

于 2021-03-19T20:47:37.727 回答