Flag-icon-css 在 Angular 2+ (8) 中仅显示方形标志答案

【问题标题】：Flag-icon-css showing only square flags in Angular 2+ (8)Flag-icon-css 在 Angular 2+ (8) 中仅显示方形标志
【发布时间】：2020-07-17 22:19:36
【问题描述】：

我想在我的 Angular 8 项目中使用 flag-icon-css 库。我已经设法导入它并且标志正在显示，但是，它们只显示为正方形。如何让它们显示为矩形？

我通过 npm 安装了该库并将此代码添加到我的全局样式文件中（根据此答案：Can angular cli use flag icon css?）：

$flag-icon-css-path: '~flag-icon-css/flags' !default;
@import "~flag-icon-css/sass/flag-icon";

这是我在模板中使用的代码：

<span class="flag-icon flag-icon-us"></span>

我没有使用flag-icon-squared 类。不过，旗帜只显示为一个正方形。

编辑（添加以澄清）：

如果我增加跨度的宽度，跨度会变宽，但标志本身不会变宽。我也尝试使用flag-icon-background，结果相同。

我检查了 svg 图像本身，它是一个矩形，但是，我注意到它的左侧也有很多空白。所以这可能会导致问题 - 跨度显示空白，并且仅显示标志的一部分。

如果有任何建议，我将不胜感激！

【问题讨论】：

你能用你的设置创建一个 StackBlitz 吗？
它是方形的，因为它不完整。增加跨度的宽度。
感谢您的建议，我已经尝试在此处询问之前增加宽度。我将更新问题并尝试在 StackBlitz 上重现设置。

标签： css angular

【解决方案1】：

发生这种情况的原因是，1x1 和 4x3 比例的 SVG 在构建后被复制到根文件夹 - 您可以查看图标的样式并将鼠标悬停在背景图像 URL 上。 CSS 使用 1x1 图像，这就是为什么标志总是方形的 - 我不确定为什么这在 Angular 7 中不是问题。

解决方法是将图像手动复制到您的资产文件夹中，并手动更新 CSS 以指向您的资产文件夹。缺点是每次更新 npm 包时都必须手动更新 CSS。

请看这里： https://github.com/lipis/flag-icon-css/issues/514

【讨论】：

我在 Angular 7 上并面临同样的“错误”。这很烦人。我什至没有改变什么。我认为只是随着时间的推移更新了软件包并且发生了这种情况。
我以为是从 Angular 7 切换到 8，因为我马上就注意到了，但听起来这是另一个包更新导致的。

【解决方案2】：

我最近也遇到了同样的问题。

我通过重命名 SVG 文件并重定向样式文件中引用的路径来克服这个问题。

具体可以看我这里的改动：https://github.com/nunnsy/flag-icon-css/commit/2eabbda9daf6a53627a7d4952eae0d1164bb04fc

这绝不是一个长期的解决方案，我只需要个人快速破解，并认为其他人可能需要一些指导。

我知道 Angular 正在复制文件并用 1x1 覆盖 3x4，因为它们具有相同的名称（由文件夹分隔），因此重命名文件夹的大小现在在文件名中：XY_xx.svg

即使尝试重新配置图像哈希也不能解决我的问题 - 如果有人有办法实现这一点，我很高兴知道您是如何实现它的。或者，任何其他解决方案，我都会关注这个问题。

【讨论】：

【解决方案3】：

我在调试模式下遇到了同样的问题，但在生产版本中却没有。因此，如果这是一个您不想花费大量时间的问题，请知道它不会存在于生产环境中，使用 --prod 标志构建可以解决它。

【讨论】：

【解决方案4】：

如果你不需要方形的

快速丑陋的 hack：更改文件夹 1x1 和 3x4 的名称

我认为绕过npm下载图片是正确的

【讨论】：