使用 Ionic 5 自定义图标? [英] Custom Icons with Ionic 5?

问题描述

我最近从 Ionic 4 更新到了 Ionic 5.在 Ionic 5 中，图标也得到了更新.然而，显然加载图标的机制也发生了变化.

I recently updated from Ionic 4 to Ionic 5. With Ionic 5 the icons received an update too. Apparently however also the mechanism loading the icons changed.

在 Ionic 4 中，可以像这样添加自定义图标:https://medium.com/@JordanBenge/how-to-create-custom-ionic-4-icons-af80cc6cc148

In Ionic 4 it was possible to add custom icons like this: https://medium.com/@JordanBenge/how-to-create-custom-ionic-4-icons-af80cc6cc148

添加例如ios-my-custom-icon.svg 和 md-my-custom-icon.svg在 assets 的 icon 文件夹中.然后有必要在 angular.json 中引用它们，例如:

Add e.g. ios-my-custom-icon.svg and md-my-custom-icon.svg in an icon folder in the assets. Then it was necessary to reference them in the angular.json like:

 ...
   "assets": [
          ...
          {
            "glob": "**/*.svg",
            "input": "src/assets/icon",
            "output": "./svg"
          },
          ...
   ]
...

终于可以像html中的其他离子图标一样调用它们了:

and one could finally call them like the other ion-icons in html:

<ion-icon name="my-custom-icon"></ion-icon>

然而，这不再适用于 ionic 5.有人知道，我们现在如何在 ionic 5 中实现自定义图标?

However this does not work in ionic 5 anymore. Does someone know, how we can now implement custom icons in ionic 5?

编辑:我意识到仍然可以通过 src 属性调用它们，如

EDIT: I realised it is still possible to call them through the src attribute like

<ion-icon src="assets/icon/md-my-custom-icon.svg"></ion-icon>

然而，这并不像使用 name 属性那样方便.有没有可能我们有一些与上述相同的东西?

However that is not convenient like using the name attribute. Any chance we have some equivalent to the above?

推荐答案

您需要从图标名称中删除 md-.

You need to remove the md- from the icon name.

例如，您的图标是 md-my-custom-icon.svg

更改为 my-custom-icon.svg.之后，自定义图标将再次在 ionic 5 上工作

Change to my-custom-icon.svg. After that the custom icons will work again on ionic 5

更新

我不得不将 md- 放回图标名称，并将 md- 添加到离子图标标签，如下所示.这样，它使用我的自定义图标而不是默认图标.

I had to put the md- back on the icon name and actually add the md- to the ion icon tag as below. This way it uses my custom icon and not the default one.

这篇关于使用 Ionic 5 自定义图标?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！