Ionicons: uiwebview 和 wkwebview 上的最新离子图标不适用于 ionic5

我也可以确认这个问题。 在我的情况下，图标第一次出现，但是当我强制关闭 Ionic 应用程序并再次打开应用程序时，它们消失了，因为 SVG 没有加载到阴影内容中，如@rashmendis的屏幕截图所示

我也是
2020 年 6 月 15 日下午 5:45 +0530，himansharya [email protected]写道：

我也可以确认这个问题。 在我的情况下，图标第一次出现，但是当我强制关闭 Ionic 应用程序并再次打开应用程序时，它们消失了，因为 SVG 没有加载到阴影内容中，如@rashmendis 的屏幕截图所示
—
你收到这个是因为你被提到了。
直接回复此邮件，在 GitHub 上查看，或退订。

另一个观察结果是，即使使用自定义 SVG，SVG 也不会在强制关闭应用程序时第二次加载。

是的。 我也是
2020 年 6 月 15 日下午 6:21 +0530，himansharya [email protected]写道：

另一个观察结果是，即使使用自定义 SVG，SVG 也不会在强制关闭应用程序时第二次加载。
—
你收到这个是因为你被提到了。
直接回复此邮件，在 GitHub 上查看，或退订。

对我来说同样的问题

同样在这里。 不仅有 UIWebview，也有 WKWebview。

@rashmendis你是如何使用旧的ionicon:4.6.3 的？ 您是否卸载了 5.x 并安装了 4.x？

试过了，但由于 ionicon 是 ionic 的依赖项，它会将 ionicon5 与 ionic 5 一起安装。所以我不得不将 ionic 降级为 ionic4
2020 年 7 月 19 日上午 10:45 +0530，jdpsbh [email protected]写道：

@rashmendis你是如何使用旧的ionicon:4.6.3 的？ 您是否卸载了 5.x 并安装了 4.x？
—
你收到这个是因为你被提到了。
直接回复此邮件，在 GitHub 上查看，或退订。

@brandyscarney是否有任何来自 Ionic 团队的人正在调查任何 ion-icon 问题？ 看起来没有一个离子图标问题没有被分配、分类或调查。 此问题是与 Ionic 5 捆绑在一起的 Ion-icon v5 中的主要问题之一。这是一个阻止我们从 Ionic 4 升级到 Ionic 5 的阻塞问题。您能否解决此问题？

嘿@himanshuarya ，我们听到了。 您能否分享有关您遇到的问题的更多信息（代码示例、屏幕截图）？

@rashmendis您能否分享能够重现此问题的示例离子应用程序的代码？
@bensperry - @rashmendis分享了一个 DOM 屏幕截图，其中 Shadow Content 的icon-inner div 中没有内容。 请参阅第一条评论中的屏幕截图。

@bensperry只需执行ionic start myApp tabs并创建一个带有离子图标的应用程序。 然后必须构建应用程序并在 iPad 或 Apple 设备的 uiwebview 或 wkwebview 中运行它。

嘿@rashmendis ，这令人沮丧。 我们无法重现该问题。

基本上，我们需要更多信息。 您使用什么来部署应用程序 - 您使用的是 Capacitor 还是 Cordova？ 请分享我们要遵循的确切步骤，并尽可能具体。 这将极大地帮助我们更快地准确确定可能出现的问题。

@bensperry不使用电容器或科尔多瓦。 您需要做的是使用ionic start myApp tabs创建一个标签应用程序。 然后您需要使用ionic build --prod构建应用程序。 然后你必须创建一个带有 UIWebView 或 WKWebView 的 iOS 应用程序并加载我们之前构建的 ionic 应用程序。 应用程序直接在 iPad Safari 应用程序上运行，没有任何问题，但在 UIWebView 或 WKWebView 内无法运行。 我正在商业 iOS 应用程序中对其进行测试，因此无法共享代码。 但正如您在评论中看到的，当我们在 iOS WebView 中运行 ionic5 应用程序时，这是一个常见问题。

谢谢你的问题。 因此，仅使用WKWebView或UIWebView不足以加载 Ionicons。 原因是在加载图标 SVG 时，它被视为本地文件，而WKWebView本身引用本地文件有一些限制。

这里最好的解决方案是使用小型本地服务器来提供文件。 最简单的方法是使用Capacitor 。 您可以查看我们的入门指南，以快速将 Capacitor 集成到您现有的应用程序中。

你能用 Capacitor 试试你的应用程序，如果它解决了问题，请告诉我？

我面临同样的问题。 通过更改 angular.json 文件中的路径解决了我的问题
老路：
……
“资产”：[
{
“全球”：“ / ”，“输入”：“源/资产”，“输出”：“资产”},{"glob": " /.svg",
“输入”：“node_modules/ionicons/dist/ionicons/svg”，
“输出”：“./svg”
}
],
……

新路径：
……
“资产”：[
{
“全球”：“ / ”，“输入”：“源/资产”，“输出”：“资产”},{"glob": " /.svg",
“输入”：“node_modules/ionicons/dist/svg”，
“输出”：“./svg”
}
],
……