Ionic 5 的自定义图标？

Question

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

在 Ionic 4 中，可以像这样添加 自定义图标： 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 中引用它们，例如：

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

终于可以像 html 中的其他离子图标一样称呼它们了：

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

但是，这不再适用于 ionic 5。 有人知道，我们现在如何在 ionic 5 中实现自定义图标？

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

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

但是，这不像使用 name 属性那样方便。我们有没有可能与上述等价的东西？

Answer 1

您总是可以只使用[]，然后根据需要提供一个变量：

const myCustomIcon = "/assets/icons/custom.svg";

在标记中：

<ion-icon [src]="myCustomIcon"></ion-icon>

Answer 2

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

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

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

干杯

更新

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

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

Answer 3

在 Angular.json 中：

"assets":[
   {
      "glob":"**/*",
      "input":"src/assets",
      "output":"assets"
   },
   {
      "glob":"**/*.svg",
      "input":"node_modules/ionicons/dist/ionicons/svg",
      "output":"./svg"
   },
   {
      "glob":"**/custom-*.svg",
      "input":"src/assets/icon_custom",
      "output":"./svg"
   }
]

现在在 icon_custom（例如）文件夹中使用“custom-...”启动您的自定义 svg 图标。

Answer 4

对于使用字体真棒类型图标字体的人，您可以使用class="fa icon"。例如：

<ion-tab-button tab="tab1">
  <ion-icon class="fa icon"></ion-icon>
  <ion-label >Inbox</ion-label>
</ion-tab-button>

或者如果您使用自己的图标集，您可能会使用类似：

<ion-icon class="custom-icon icon-edit"></ion-icon>

Answer 5

您可以将 SVG 文件添加到 node_modules/ionicons/dist/ionicons/svg 文件夹