react-native-vector-icons 사용하는 방법

쉬운데 삽질을 좀 했다..

다른분들은 시간 세이브 하시길 바라며..

 

1. 원하는 아이콘을 찾는다. 찾으셨다면 그 아이콘이 어떤 분류에 속해있는지 본다. 아래 그림은 AntDesign 이다.

 

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

react-native-vector-icons directory

 

2. 

위와 같이 import를 해준다. react-native-vector-icons 뒤에 /AntDesign 을 입력한다. (아까 보라고 말씀드린이유!)

 

3.

ios/[폴더명]Info.plist 파일을 연다.

ios 에서 사용하기위해서는 최하단에 다음과 같이 추가한다.

...
<key>UIAppFonts</key>
    <array>
        <string>MaterialIcons.ttf</string>
		<string>AntDesign.ttf</string>
		<string>MaterialCommunityIcons.ttf</string>
	
    </array>
</dict>
</plist>

 

android 에서는 ..

android/app/build.gradle 파일을 연다!

최하단에 다음과 같이 추가한다!

저는 다른 그룹도 넣어서 원하는 그룹으로 넣어주면 됩니다!

...

project.ext.vectoricons = [
    iconFontNames: [ 'MaterialIcons.ttf',  'AntDesign.ttf', 'MaterialCommunityIcons.ttf' ],
    
]

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

 

4. 사용한다.

아까 Icon2에 import 했습니다!

<Tab.Screen
        name="Share"
        component={MessageScreen}
        options={{
          title: '공유',
          tabBarIcon: ({color, size}) => (
            <Icon2 name="sharealt" color={color} size={30} />
          ),
        }}
        // share-alt FontAwesome
      />