[ ReactNative ] react-native-vector-icons 셋팅하기.

react native 프로젝트를 진행할 때 내가 자주 사용하는 아이콘 라이브러리가 있다.

바로 react-native-vector-icons 이다.

 

다양한 폰트의 아이콘을 사용할 수 있어서 자주 애용하는데, 예전에는 해당 라이브러리를 link 해주면 금방 사용했지만

최근 프로젝트에서는 ios로 시뮬레이터를 돌리고 있었는데, 아이콘을 사용한 부분에서 해당 에러가 발생했다.

 

unrecognized font family 'Feather'

 

내가 사용하려던 아이콘의 font 를 인식할 수 없다는 오류였다.

흠.. 그래서 구글링을 통해 방법을 찾았다.

 

 

참고 사이트 : https://aboutreact.com/react-native-vector-icons/

전체 아이콘 확인 : https://oblador.github.io/react-native-vector-icons/

 

 

---

 

 

안드로이드에서 아이콘 파일을 import 하는 방법.

프로젝트의 android 폴더에 들어간다.

아래와 같이 android/app/src/main 에서 assets/fonts 폴더를 생성한다.

 

 

프로젝트의 node_modules 폴더에 들어간다.

react-native-vector-icons/Fonts 폴더에서 내가 사용할 아이콘 폰트 파일을 선택하여 위에서 생성한

android/app/src/main/assets/fonts 폴더에 Drag&Drop 한다(또는 복붙).

 

 

 

 

---

 

 

 

iOS에서 아이콘 파일을 import 하는 방법.

프로젝트의 ios 폴더에 들어간다.

fonts 폴더를 만들고, 안드로이드와 동일하게 node_modules/react-native-vector-icons/Fonts 안에 있던 원하는 아이콘 폰트 파일을 ios/fonts 폴더 안에 Drag&Drop 한다(또는 복붙).

 

 

 

그리고 xcode를 실행하여 프로젝트의 ios 파일 안에 있는 프로젝트이름.xcworkspace 파일을 연다.

 

 

 

 

왼쪽의 사이드바에 있는 프로젝트 이름을 마우스 우클릭하여 Add Files to "프로젝트 이름"을 클릭한다.

 

 

 

 

 

 

 

ios의 fonts 폴더를 선택하고 Create folder references 를 체크한 뒤 Add 버튼을 클릭한다.

 

 

 

 

 

다음은 info.plist 파일에 아래와 같이 추가하거나,

 

 

 

VSCode 또는 다른 에디터를 통해 프로젝트의 ios/프로젝트이름/Info.plist 파일에 직접 아래와 같이 추가해준다. ( ios/fonts 폴더에 추가해준 폰트들.)

<key>UIAppFonts</key>
	<array>
		<string>fonts/AntDesign.ttf</string>
		<string>fonts/Feather.ttf</string>
	</array>

 

 

 

 

 

그리고 마지막으로 

cd ios && pod install && cd ..

명령어를 입력하여 pod install을 진행해주고 프로젝트를 실행시키면 아이콘이 정상적으로 노출된다.