Ionic 4 change ion-tab-button с пользовательским значком

Question

Я пытаюсь изменить ion-icon с помощью пользовательского src после нажатия ion-tab-button

То, что я пробовал, используя (щелчок) событие для запуска функции и изменения [src] = "..." внутри ion-icon

Есть ли какой-нибудь правильный способ изменить этот хакерский стиль?

HTML:

 <ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="news/home" (click)="changeNewsIcon()">
      <ion-icon [src]="newsIcon"></ion-icon>
      <ion-label class="tab-title">News</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="user" (click)="changeSearchIcon()">
      <ion-icon [src]="searchIcon"></ion-icon>
      <ion-label class="tab-title">Search</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="networking" (click)="changeNetworkIcon()">
      <ion-icon [src]="notiIcon"></ion-icon>
      <ion-label class="tab-title">Networking</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="chat" (click)="changeChatIcon()">
      <ion-icon [src]="chatIcon"></ion-icon>
      <ion-label class="tab-title">Chat</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="profile" (click)="changeProfIcon()">
      <ion-icon [src]="profIcon"></ion-icon>
      <ion-label class="tab-title">Profile</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

TS:

newsIcon = './assets/tabs/home.svg';
searchIcon = './assets/tabs/search.svg';
notiIcon = './assets/tabs/group.svg';
chatIcon = './assets/tabs/chat.svg';
profIcon = './assets/tabs/user.svg';

changeNewsIcon(): void {    
  // change news icon
  this.newsIcon = './assets/tabs/clicked-home.svg';

  // reset others icon
  this.searchIcon = './assets/tabs/search.svg';
  this.notiIcon = './assets/tabs/group.svg';
  this.chatIcon = './assets/tabs/chat.svg';
  this.profIcon = './assets/tabs/user.svg';
}

changeSearchIcon(): void {
  // change user icon
  this.searchIcon = './assets/tabs/clicked-search.svg';

  // reset others icon
  this.newsIcon = './assets/tabs/home.svg';
  this.notiIcon = './assets/tabs/group.svg';
  this.chatIcon = './assets/tabs/chat.svg';
  this.profIcon = './assets/tabs/user.svg';
}

...

Ценю, если кто-нибудь поможет

Answer 1

Раньше я пытался поместить цвет CSS в ion-tab-button и ion-icon с помощью ионной иконки.Цвет меняется, как и ожидалось, но не с пользовательским значком.

<ion-tab-button tab="news/home" style="color: blue">
  <ion-icon name="home"></ion-icon>
  <ion-label class="tab-title">News</ion-label>
</ion-tab-button>

Через день я пытаюсь проверить, почему пользовательский значок не изменит цвет, если нам нравится этот метод.Затем я пытаюсь проверить слои значков Ionic SVG в Adobe Illustrator CC.и вот оно.

Как вы можете видеть, <path> внутри слоя 1 (ионная иконка)

И проблема в моем файле SVG.Чтобы это работало со свойствами CSS, мне просто нужно отредактировать слой.

это результат после редактирования слоя, работа в соответствии с ожиданиями:)

Решение: Вам просто нужно добавить цвет CSS и получить правильныйслой SVG icon

Далее я опишу, как использовать пользовательский значок, когда вкладка активна.

ОБНОВЛЕНИЕ 2:

Это рабочийHTML-код:

<ion-tabs>
  <ion-tab-bar class="tab-bar" slot="bottom">
    <ion-tab-button tab="news/home">
      <ion-icon class="icon-news" src="./assets/tabs/md-custom-home.svg"></ion-icon>
      <ion-label class="tab-title">News</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="search">
      <ion-icon class="icon-search" src="./assets/tabs/md-custom-search.svg"></ion-icon>
      <ion-label class="tab-title">Search</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="networking">
      <ion-icon class="icon-networking" src="./assets/tabs/md-custom-networking.svg"></ion-icon>
      <ion-label class="tab-title">Networking</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

SCSS:

ion-tab-button {
  --color: #000000;
  --color-selected: #00cee5;
}

просто убедитесь, что используете правильный SVG;)

Answer 2

Я не уверен, что мой подход лучше, но это может быть другой способ сделать то же самое.

HTML:

<ion-tabs>
    <ion-tab-bar slot="bottom">
      <ion-tab-button tab="news/home" (click)="changeNewsIcon()">
        <ion-icon [src]="isNewsSelected ? newsIcon : clickedNewsIcon"></ion-icon>
        <ion-label class="tab-title">News</ion-label>
      </ion-tab-button>
      <ion-tab-button tab="user" (click)="changeSearchIcon()">
        <ion-icon [src]="isSearchSelected ? searchIcon clickedSearchIcon"></ion-icon>
        <ion-label class="tab-title">Search</ion-label>
      </ion-tab-button>
    </ion-tab-bar>
</ion-tabs>

Компонент TypeScript:

export class SomeComponent {

  newsIcon = './assets/tabs/home.svg';
  clickedNewsIcon = './assets/tabs/clicked-home.svg';
  searchIcon = './assets/tabs/search.svg';
  clickedSsearchIcon = './assets/tabs/clicked-search.svg';

  isNewsSelected = false;
  isSearchSelected= false;

  changeNewsIcon(): void {    
    resetAll();
    this.isNewsSelected = true;
  }

  changeSearchIcon(): void {
   resetAll();
   this.isSearchSelected = true;
  }

  resetAll(){
    this.isNewsSelected = false;
    this.isSearchSelected= false;
  }
}