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

【问题标题】：How to change the color of custom svg icon in ionic 4?如何更改 ionic 4 中自定义 svg 图标的颜色？
【发布时间】：2025-11-28 03:30:02
【问题描述】：

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

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

【问题讨论】：

<ion-icon class="something"..... 然后在 css 中 .something { fill: red }
只需在定义了color:something; 的点击事件上添加一个css class！
@ChrisW。已经尝试过 { fill: red } 但它不起作用。自定义 svg 图标颜色在 ionic 4 中没有改变。相同的图标在 ionic 3 中工作正常。上述实现在 ionic 4 中是否正确？

标签： ionic-framework ionic4

【解决方案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;
}

【讨论】：

检查 svg 中颜色的最有用提示。帮了我很多
这是 Ionic 6 的有效解决方案！
@Ashley Medway 您也可以将填充更改为 fill="currentColor" 以使其也跟随颜色

【解决方案2】：

如果您删除自定义图标路径中的整个样式属性， Ionic 改为添加其默认样式。

<path
 style="APPLIED STYLE"
 d="DRAWN PATH"
/>

删除 style 属性后，自定义图标可以像 e.g. 一样使用。离子。

<IonIcon icon={CUSTOM_ICON} color="primary" />

Ionic 在使用 color 属性时设置 svg 的填充属性。描边颜色如果用于轮廓图标没有设置。

【讨论】：

【解决方案3】：

它的工作正常见下文

page.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>

【讨论】：

我试过不行！！

【解决方案4】：

只有我必须从 svg 文件中删除填充属性 fill="#000000"

``<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"

xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 60 60" style="enable-background:new 0 0 496 496;" xml:space="preserve"> <g xmlns="http://www.w3.org/2000/svg">

<path ...... fill="#000000" />

然后在我的 Ion-icon 上我确实喜欢这样

<ion-icon style="fill: white;" ></ion-icon>

解决了问题

【讨论】：