Question

我正在尝试为Ionicons 5的轮廓版上色，但是笔触和填充有内联样式。我尝试使用类将图标定位为目标，并同时设置填充颜色和笔触颜色，并且仅使用color属性。使用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属性适用于部分图标，但不会覆盖内联笔划值。任何帮助将非常感激。谢谢！

Answer 1

我遇到了同样的问题。删除当前的<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>

Answer 2

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

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

另请参见以下答案：How to change the color of custom svg icon in ionic 4?

Answer 3

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

无法更改Ionicon 5轮廓集的笔触颜色

3 个答案: