[RN] react-native-vector-icons 사용하기

react-native-pin-view를 구현하다 참고 소스에 react-native-vector-icons를 활용해 아이콘을 생성하는게 있어서 같이 구현해봄.

 

---

react-native-vector-icons 설치

npm --save react-native-vector-icons
cd ios
pon install

 

사용방법

import Icon from "react-native-vector-icons/Ionicons"
<Icon name={"arrow-back-outline"} size={36} color={"#FFF"} />

react-native-vector-icons에는 Ionicons, FontAwesome 등 다양한 스타일이 있다.

아래 사이트에서 원하는 스타일을 골라 활용하면 된다.

https://oblador.github.io/react-native-vector-icons/

react-native-vector-icons directory

 

IOS Unrecognized font family 'Ionicons' 에러

IOS에서 위와 같은 에러가 나오면 아래와 같이 코드 추가



Podfile

pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'

 

info.plist

<key>UIAppFonts</key>
<array>
    <string>AntDesign.ttf</string>
    <string>Entypo.ttf</string>
    <string>EvilIcons.ttf</string>
    <string>Feather.ttf</string>
    <string>FontAwesome.ttf</string>
    <string>FontAwesome5_Brands.ttf</string>
    <string>FontAwesome5_Regular.ttf</string>
    <string>FontAwesome5_Solid.ttf</string>
    <string>Foundation.ttf</string>
    <string>Ionicons.ttf</string>
    <string>MaterialIcons.ttf</string>
    <string>MaterialCommunityIcons.ttf</string>
    <string>SimpleLineIcons.ttf</string>
    <string>Octicons.ttf</string>
    <string>Zocial.ttf</string>
</array>

 

참고 사이트 

https://dlee0129.tistory.com/10

[React Native] react-native-vector-icons 사용법 및 문제해결

 

 

** 2023.08.18 안드로이드 추가

안드로이드에서 한자로 된 아이콘들이 나와서 app/build.gradle에 아래 내용 추가

apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle")