使用 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-自定义-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>

但是这不像使用名称属性那样方便。我们有没有机会得到与上述相同的东西？

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

对于使用 font awesome 类型的图标字体的人，您可以只使用 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 文件夹

Answer 6

你可以直接在ionic 5中使用自定义图标SVG文件，不需要添加任何类似的东西：

... “资产”：[ ... { "glob": "**/*.svg", “输入”：“src/assets/icon”， “输出”：“./svg” }, ... ] ... 使用接口。

Answer 7

只需在您的根模块中实现“FormsModule”。

使用 Ionic 5 自定义图标？

Custom Icons with Ionic 5?

ionic-framework

ionic4

ionic5

干杯