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.
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:
|
1 |
<ion-icon src="/assets/eat.svg"></ion-icon> |
Dok je drugi način kreiranje CSS klase za svaku ikonu unutar app.scss
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
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:
|
1 |
<ion-icon name="custom-eat"></ion-icon> |
U praksi to može izgledati ovako:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<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> |
|
1 2 3 4 5 6 7 8 9 10 11 |
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; } } |
