리액트 네이티브 앱 벡터 아이콘 추가하기 (FontAwesome, Feather ...)

리액트 네이티브 탭 아이콘 넣기

위와 같이 화면 아래에 '오더 목록', 'Delivery', '내 정보' 등의 탭이 있는데 일반적으로 이 부분에는 아이콘을 넣어 기능을 표기한다.

react-native-vector-icons 패키지 설치하기

npm install react-native-vector-icons
npm install -D @types/react-native-vector-icons

폰트 옮기기

node_modules/react-native-vector-icons/Fonts 에 있는 모든 폰트를 android/app/src/main/assets/fonts 밑으로 전부 옮겨주자.

필요한 아이콘 찾아보기

이 링크에서 필요한 아이콘을 찾아볼 수 있다.

소스코드에서 사용하기

import FontAwesome5Icon from "react-native-vector-icons/FontAwesome5";

<Tab.Screen
  name="Orders"
  component={Orders}
  options={{
    title: "오더 목록",
    tabBarIcon: () => <FontAwesome5Icon name="list" size={20} />,
  }}
/>;

• 위는 FontAwesome5 벡터 아이콘을 사용하는 예제이다.
• import 단계에서 구체화된 이름을 가져와서 사용하면 된다.

import FontAwesome5Icon from "react-native-vector-icons/FontAwesome5";
import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
import Feather from "react-native-vector-icons/Feather";

위처럼 원하는 Group 을 import 하면 된다. 사용법은 동일하다. Feater 그룹에 있는 벡터 아이콘을 가져오고 싶다면, <Feather name="settings" size={20} /> 와 같이 사용하면 된다.

아이콘 검색 방법

아이콘 검색은 이 링크 에서 가능하다.

주의사항

모든 Font 를 추가하게 되면 앱의 크기 자체가 매우 커지게 된다. 이 점을 주의해야 한다.