无法更改 Ionicon 5 轮廓集的描边颜色答案

【问题标题】：Can't change the stroke color of Ionicon 5 outline set无法更改 Ionicon 5 轮廓集的描边颜色
【发布时间】：2020-07-09 09:32:09
【问题描述】：

我正在尝试为 Ionicons 5 的轮廓版本着色，但有用于描边和填充的内联样式。我尝试使用一个类来定位图标并设置填充和描边颜色，以及仅使用颜色属性。使用 CSS color 属性填充颜色，但对笔画没有影响。如果我设置笔触颜色并检查，它会被内联笔触属性值覆盖。

有没有办法覆盖这种风格？我可以使用 CSS 获取并抓取子路径或笔触，以便覆盖默认为 Ionicons 的 SVG 笔触颜色吗？

HTML

<ion-icon class="ico-top" name="pizza-outline"></ion-icon>

CSS

ion-icon {
color: $current-color;
stroke: $current-color;
fill: $current-color;
}

color 和 fill 属性适用于部分图标，但不会覆盖内联笔划值。任何帮助将非常感激。谢谢！

【问题讨论】：

标签： html css svg icons ionicons

【解决方案1】：

如果您使用自定义导入的 Ionic 5 图标，您可以从 .svg 文件本身中删除 stroke="#XXXXXX" 属性。

之后，stroke 的 css 属性将在 ion-icon 选择器上正常工作。

在这里也可以看到这个答案：How to change the color of custom svg icon in ionic 4?

【讨论】：

【解决方案2】：

我也遇到了同样的问题。删除您当前的<script> 并将其替换为那些：

[ionicons] Deprecated script, please remove: <script src="https://unpkg.com/ionicons@5.1.2/dist/ionicons.js"></script>
To improve performance it is recommended to set the differential scripts in the head as follows:
<script type="module" src="https://unpkg.com/ionicons@5.1.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule="" src="https://unpkg.com/ionicons@5.1.2/dist/ionicons/ionicons.js"></script>

【讨论】：

文档需要更新。这也是我的解决方案。

【解决方案3】：

我修复了这个更改 svg 代码的问题：stroke="currentColor"。这将使笔划采用您在ion-icon 的样式color 中定义的颜色。

【讨论】：