REACT NATİVE VECTOR ICONS

React Native vector icons install kullanımı

React Native vector icons install yapabilmeniz için öncelikle console kullanımı yapmamız gerekiyor. Console içersinden cd komutu ile react native icons install komutunu çalıştırcağımız proje içine giriyoruz. Giriş yaptıkdan sonra aşağıdaki komutlarla vector icons elementini projemize dahil ediyoruz. Bu işlem sayesinde node_modules altına react-native-vector-icons elementini eklemiş oluyoruz. Aşağıdaki kod bloğundaki adımları yapmanız gerekmektedir. Aşağıdaki adımları yaptıktan sonra react native vector icons kullanımı bilgisini aktaralım.

$ npm install react-native-vector-icons --save
$ react-native link 

   

React Native vector icons list

React Native vector list içersinde hangi ikonlar yer almakda nasıl kullanırız bu konumuza değinelim. Vector icons listesi içintıklayınız. İcons eklentisini projemize dahil ediyoruz. Dahil ettikten sonra icon kodunuda görünmesini istediğimiz yere yapıştırıyoruz. Örnek import ve ikon kullanımı için:

// Proje Dahil Etme
import Icon from "react-native-vector-icons/Ionicons";

// İkon Kullanımı
<Icon
  name="ios-add"
  color="#ccc"
  size={30}
/>

 

Yukardaki örnekde ios platformu için nasıl kullanıldığına değindik. Peki bu işlemde neler yaptık. Name etiketi ile icon kodunu belirttik, size ile boyutunu ve color ile rengini belirtiyoruz. Peki bunu android platformu için nasıl yapabiliriz. Aşağıdaki örneğimizi inceleyelim.

// Proje Dahil Etme
import Icon from "react-native-vector-icons/Ionicons";

// İkon Kullanımı
<Icon
  name="md-add"
  color="#ccc"
  size={30}
/>

 

Yukardaki örnekde name ile belirttiğimiz kod bloğu android için geçerli olan koddur. Bu şekilde yaptığımız zaman android içersinde açılcak fakat ios içinde çalıştırmayacaktır. Peki her iki platforma uyumlu nasıl yapabiliriz? Vector icons haricinde "Platform" projemize dahil etmeliyiz. Lütfen aşağıdaki kod bloğuna dikkat edelim.

// Platform Özelliğini Dahil Etme
import { Platform } from "react-native";

// Proje Dahil Etme
import Icon from "react-native-vector-icons/Ionicons";

// ...
<Icon
  name={Platform.OS === "ios" ? "ios-add" : "md-add"}
  color="#ccc"
  size={30}
/>
	
 
	

Platform özelliğini dahil ettikden sonra Platform.OS (ios platformu) ise "ios-add" değilse "md-add" olarak android platformunda iconun düzgün görüntülenmesini sağlıyoruz.