1

我正在尝试为 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但不会覆盖内联笔画值。任何帮助将非常感激。谢谢！

4

3 回答 3

4

我有同样的问题。删除您的当前<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>
于 2020-08-06T18:06:27.373 回答
1

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

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

另请参阅此处的答案：How to change the color of custom svg icon in ionic 4?

于 2020-06-16T05:09:15.913 回答
0

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

于 2021-07-02T06:43:42.850 回答