如何在ionic 4中更改自定义svg图标的颜色? [英] How to change the color of custom svg icon in ionic 4?

问题描述

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

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

解决方案

如果在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"&然后，可以从SVG本身中stroke="#555555"对其进行控制，如您所愿.

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

I want to change the color of a custom svg icon on clicking a button

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

解决方案

I was unable to override an svg stroke or fill if it was specified in the svg.

Example: bad 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>

Removing fill="#88AACC" & stroke="#555555" from within the SVG itself then allowed it to be controlled from CSS as you'd expect.

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

这篇关于如何在ionic 4中更改自定义svg图标的颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！