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

Question

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

选项卡.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>

选项卡.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>