ionic-framework - 为什么我的 Ionic 应用程序中的 SVG 图标的网址在更新后发生了变化？

Question

我正在更新旧的 Ionic 应用程序：

• 角度：8.2.9 => 11.2.12
• 角 CLI：8.3.8 => 11.2.11
• 离子：4.10.0 => 5.6.6
• 离子 CLI：5.4.16 => 6.14.0

该应用程序在我在本地运行时启动（使用离子服务），但 SVG 图标不显示。

如果我查看一个特定图标，我会在源文件中找到该图标的两个版本：

• \src\assets\custom-ion-icons\md-br-home.svg
• \src\assets\custom-ion-icons\ios-br-home.svg

使用图标的地方看起来很简单：

<ion-icon name="br-home"></ion-icon>

运行旧版本的应用程序时，会获取图标并显示以下网址：http://localhost:8100/svg/md-br-home.svg

但是，在更新后运行，应用程序请求此 url：http://localhost:8100/svg/br-home.svg

我不确定如何在旧版本的应用程序中添加“md-”部分，但不知何故这已经消失了。

如果我将md-br-home.svg的文件名更改为br-home.svg，它可以工作。也许这就是解决方案？但是，当我构建和分发这个应用程序时，这会不会搞砸一些事情？我想更好地了解我应该如何工作。

标签： ionic-frameworkionic4

Answer 1

刚刚找到了我的问题的答案。

将 Ionic 从 4 更新到 5 会改变图标（离子图标）的处理方式。不再使用特定于平台的变体，因此不再使用文件名中的“md-”和“ios-”。

https://github.com/ionic-team/ionicons/releases/tag/5.0.0

I just changed the names of the SVG-files beginning with "md-" (e.g. md-br-home.svg to br-home.svg), and then deleted the ones beginning with "ios-".

I also used some standard ionicons icons that had been removed or renamed, so I had to fix that too. A list of all changes is available on the page linked above.