html - Hvordan bruke png-filer som ikoner i Ionic-faner i stedet for svg/eksisterende Ionic-svg?

Jeg har googlet mye og har så langt ikke funnet noen løsning.

Jeg har en faneside:

<ion-tabs>
  <ion-tab [root]="HomeTab" tabTitle="Home" ></ion-tab>
  <ion-tab [root]="RecentTab" tabTitle="Recents"></ion-tab>
  <ion-tab [root]="FavTab" tabTitle="Favorites"></ion-tab>
  <ion-tab [root]="PersonalTab" tabTitle="Personal"></ion-tab>
  <ion-tab [root]="InfoTab" tabTitle="Information"></ion-tab>
</ion-tabs>

Å bruke en av de implementerte SVG-ikonene i Ionic fungerer bra og legger ikonet over teksten: Hjem-ikon

<ion-tab [root]="HomeTab" tabTitle="Home" tabIcon="home"></ion-tab>

Jeg har imidlertid fortsatt ikke funnet ut hvordan man bruker en PNG som et ikon. De fleste veiledninger på nettet ser ut til å fokusere på tilpassede SVG-er, men ingen om bruk av PNG-er/JPEG.

Hva er min feil? Finnes det en bedre løsning?

Takk på forhånd

Svar #1

Fant en løsning som fungerte for meg:

i SASS/scss-filen velger jeg knappen jeg vil redigere, og deretter overstyrer jeg den med banen der PNG-en min kommer fra:

.ion-md-home {
content: url("../assets/img/PATH.png") !important; }

Legg deretter til formatering slik du trenger det.

Svar #2

Jeg gjorde det på denne måten. Jeg tror mer elegant:

Til HTML-malen legger jeg til et tomt img-element med én spesifisert CSS-klasse

    <ion-tab-bar slot="bottom">
        <ion-tab-button tab="clean">
            <img class="custom-icon-clean-image"/>
            <ion-label>
                Clean
            </ion-label>
        </ion-tab-button>
        <ion-tab-button tab="dirty">
            <img class="custom-icon-dirty-image"/>
            <ion-label>
                Dirty
            </ion-label>
        </ion-tab-button>
    </ion-tab-bar>

Og til SCSS-filen legger jeg til img-atferd for ruteaktivering på denne måten:

.custom-icon-clean-image {
  content:url("../../assets/icon/barrel_outline.png");
}

ion-tab-button.tab-selected .custom-icon-clean-image {
  content:url("../../assets/icon/barrel_outline_active.png");
}

Løsningen fungerer også med Ionic 5.

Relaterte artikler