带有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 在资产的 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.

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

带有Ionic 5的自定义图标?

相关推荐