时间戳

首页 > 解决方案 > 如何将自己的 svg 图标插入 ionic 6？

ionic-framework - 如何将自己的 svg 图标插入 ionic 6？

问题描述

你好吗？几天来，我一直在尝试将自己的图标插入 svg，我看过几个博客，但它们对我不起作用。我正在使用离子版本 6.12.2。有谁知道我如何插入自己的 svg 图标？

标签： ionic-frameworksvgicons

解决方案

在 Ionic 3 中使用 SASS mixin 是一种常见的方法，但在 Ionic 4/5 中它要简单得多。就像您在Ionicons 文档中看到的那样：

自定义图标

要使用自定义 SVG，请在 src 属性中提供其 url 以请求外部 SVG 文件。src 属性的作用与 URL 必须可以从请求图像的网页访问相同。此外，外部文件只能是有效的 svg，并且不允许 svg 元素中包含脚本或事件。

<ion-icon src="/path/to/external/file.svg"></ion-icon>

因此，例如，您可以将自己的图标文件夹放在assets文件夹中，如下所示：

src
  |- app
  |- ...
  |- assets
      |- icons
          |- user.svg
          |- ...

然后可以像这样使用它：

 <ion-icon src="assets/icons/user.svg"></ion-icon>

推荐阅读