时间戳

首页 > 解决方案 > 如何使 Ionic v4 自定义选项卡图标在活动时更改颜色？

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

问题描述

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

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

标签： ionic4

解决方案

我被困了一段时间。事实证明，您需要像这样从 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>

推荐阅读