ionic-framework - Ionic 5 的自定义图标？

Question

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

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

在assets 的图标文件夹中添加例如 ios-my-custom-icon.svg和md-my-custom-icon.svg。然后有必要在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

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

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

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

干杯

更新

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

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

Answer 2

如果您愿意，您可以随时使用[]然后提供一个变量：

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

在标记中：

<ion-icon [src]="myCustomIcon"></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 文件夹