如何更改ionic 4中自定义svg图标的颜色？

Question

我想在单击按钮时更改自定义 svg 图标的颜色

<ion-item>
    <ion-icon src="../../assets/img/icon-qr.svg"></ion-icon>
    <ion-label>Qr Scan</ion-label>
</ion-item>

Answer 1

如果在 svg 中指定，我无法覆盖 svg 笔触或填充。

示例：糟糕的 svg

<svg xmlns="http://www.w3.org/2000/svg" width="20" height="16" viewBox="0 0 20 16">
  <g fill="#88AACC" fill-rule="evenodd" stroke-linecap="round" stroke="#555555" stroke-linejoin="round" stroke-width="2">
     ...
  </g>
</svg>

从 SVG 本身中删除fill="#88AACC"&stroke="#555555"然后允许它像您期望的那样通过 CSS 进行控制。

.some-class {
  fill: red;
  stroke: blue;
}

Answer 2

其工作正常，见下文

页面.html

<ion-item>
    <ion-icon src="/assets/images/box.svg" color="primary" style="fill: brown;"></ion-icon>
    <ion-label>Qr Scan</ion-label>
</ion-item>

<ion-item>
  <ion-icon src="/assets/images/boxing.svg" style="fill: brown;"></ion-icon>
  <ion-label>Qr Scan</ion-label>
</ion-item>