Question

我想在我的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图像本身，它是一个矩形，但是，我注意到它的左侧也有很多空白。因此，这可能是导致问题的原因-跨度显示空白，并且仅显示标志的一部分。

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

Answer 1

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

我通过重命名SVG文件并重定向样式文件中引用的路径来解决此问题。

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

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

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

Answer 2

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

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

Answer 3

我在调试模式下遇到了相同的问题，但是在生产版本中却没有。因此，如果您不想花很多时间解决此问题，请知道它不会在生产环境中出现，可以通过使用--prod标志进行构建来解决此问题。

Answer 4

如果您不需要正方形的

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

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