Ionic 5 的自定义图标？

Posted 2023-03-04

【中文标题】Ionic 5 的自定义图标？

【英文标题】：Custom Icons with Ionic 5?

【发布时间】：2020-06-02 18:38:20

【问题描述】：

我最近从 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 属性那样方便。我们有没有可能与上述等价的东西？

【问题讨论】：

有完全相同的问题，这曾经与 Ionic 4 一起使用，使用“src”属性的问题是，在我的情况下，图标不会出现在应用程序的 IoS 版本上。

Exerlol 你做了一个以/开头的绝对网址吗？

【参考方案1】：

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

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

在标记中：

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

【参考方案2】：

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

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

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

干杯

更新

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

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

【讨论】：

你说得对，现在可以了。他们一定是在更新的离子版本中更改了它，因为我之前尝试过相同的，但没有。我们必须删除 .svg 才能使其正常工作。也许您可以在答案中进行编辑。谢谢老兄。

嗨，克里斯，我很高兴它对你有用...我的仍然可以使用 .svg ，所以我不确定发生了什么，我会密切关注它，谢谢提示。干杯！

我做了同样的事情，但它说找不到文件。您能否提及您删除 .svg 的位置？

【参考方案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 图标。

【参考方案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>

【讨论】：

您的示例中没有使用class="fa icon"？？

感谢指正。我制作了自己的图标集，名为 "my-icon"，因为 font-awesome 使用的是 "fa"。

您的示例中的字体真棒图标在哪里？

【参考方案5】：

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

【讨论】：

这在技术上可能有效，但我不推荐它。 node_modules 文件夹默认被 git 等版本控制忽略，这是有充分理由的。或者，如果您必须更新或重新安装 npm 库，您将丢失所做的更改。未来的一般提示：尽量避免操纵由包管理器管理的内容，以免给自己带来很多麻烦。