Ionic aplikacija sa SVG ikonama

Iako na https://ionicons.com/ postoji veliki broj odličnih ikona ipak je povremeno potrebno koristiti ikone koje su napravljene specijalno za određenu Ionic aplikaciju. SVG se nameće kao logično rješenje jer zadržava koncept korištenja <ion-icon name=”icon-name”></ion-icon>.

Za korištenje SVG-a kao ikona nije bitno radi li se o Ionic 1, Ionic 2, Ionic 3 ili o Ionic 4 projektu. Važno je samo imati jednu mapu unutar koje će se držati SVG datoteke.

U ovom ću slučaju staviti nekoliko SVG datoteka unutar src/assets/imgs mape.

Korištenje SVG ikona umjesto Ionic ikona

I to je sve što je potrebno kako bi se SVG datoteke koristile kao ikone unutar <ion-icon> komponente.

Ipak, postoje dva načina kako postići isti efekt.

Prvi način je navođenje putanje do SVG datoteke unutar same <ion-icon> komponente na sljedeći način:

<ion-icon src="/assets/eat.svg"></ion-icon>

Dok je drugi način kreiranje CSS klase za svaku ikonu unutar app.scss

ion-icon {
    &[class*="custom-"] {
      mask-size: contain;
      mask-position: 50% 50%;
      mask-repeat: no-repeat;
      background: currentColor;
      width: 1em;
      height: 1em;
    }
  
    &[class*="theplace"] {
      mask-image: url(../assets/imgs/theplace.svg);
    }
    &[class*="eat"] {
      mask-image: url(../assets/imgs/eat.svg);
    }
    &[class*="map"] {
      mask-image: url(../assets/imgs/map.svg);
    }
    &[class*="drink"] {
      mask-image: url(../assets/imgs/drink.svg);
    }
    &[class*="beaches"] {
      mask-image: url(../assets/imgs/beaches.svg);
    }
    &[class*="spa"] {
     mask-image: url(../assets/imgs/spa.svg);
    }
    &[class*="siren"] {
     mask-image: url(../assets/imgs/siren.svg);
    }
  }

nakon čega je moguće koristiti ikone na standardni način:

<ion-icon name="custom-eat"></ion-icon>

U praksi to može izgledati ovako:

Korištenje SVG ikona umjesto Ionic ikona

<ion-header>
  <ion-navbar color="primary">
    <ion-title>
      IonicSvgApp
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding text-center>
  <ion-row>
    <ion-col>
      <ion-icon name="custom-theplace"></ion-icon>   
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      <ion-icon name="custom-eat"></ion-icon>   
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      <ion-icon name="custom-map"></ion-icon>   
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      <ion-icon name="custom-drink"></ion-icon>   
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      <ion-icon name="custom-siren"></ion-icon>   
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      <ion-icon name="custom-beaches"></ion-icon>   
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      <ion-icon name="custom-spa"></ion-icon>   
    </ion-col>
  </ion-row>
</ion-content>
page-home {
   ion-icon{
     font-size: 10vh;
   }
   ion-content ion-row:nth-child(odd) {
    color: red;
   }
   ion-content ion-row:nth-child(even) {
    color: blue;
   }
}

Objavio

Tomislav Stanković

Bloger širokog raspona interesa od kojih dio voli objaviti na ovom blogu. U neslobodno vrijeme Angular developer mobilnih i web aplikacija.

Odgovori

Vaša adresa e-pošte neće biti objavljena. Obavezna polja su označena sa *