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:

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

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

U praksi to može izgledati ovako:

Korištenje SVG ikona umjesto Ionic ikona

Objavio

Tomislav Stanković

Web Developer - JavaScript, TypeScript, Angular, Ionic Framework, ExpressJS

Odgovori

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