ionic-framework - 如何更改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>

删除 fill="#88AACC" & stroke="#555555"从 SVG 内部开始，然后允许它按照您的预期从 CSS 中进行控制。

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