如何使 Ionic v4 自定义选项卡图标在活动时改变颜色？

Question

我可以让自定义图标显示在选项卡上。但是，当您单击它时它不会改变颜色。选项卡图标应从非活动灰色变为活动蓝色。

Tabs.html

<ion-tab-button tab="topics">
      <ion-icon src="/assets/simple-path.svg"></ion-icon>
</ion-tab-button>

一个简单的 svg

<svg width="39" height="45" viewBox="0 0 39 45" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 35L15 0.5L39 15.5L25 45L0 35Z" fill="#C4C4C4"/>
</svg>

tabs.scss

path {
    --color: gray;
    --color-selected: blue;
  }

Answer 1

我被困在这个问题上有一段时间了。原来你需要像这样从 svg 中删除填充属性：

<svg width="39" height="45" viewBox="0 0 39 45" xmlns="http://www.w3.org/2000/svg">
<path d="M0 35L15 0.5L39 15.5L25 45L0 35Z"/>
</svg>

如何使 Ionic v4 自定义选项卡图标在活动时改变颜色？

How to make an Ionic v4 custom tab icon change color when active?

ionic4