프론트엔드/React

[React Native] IOS에서 아이콘 사용하기 (react-native-vector-icons)

jaee 2023. 3. 17. 12:09

 
틀린 내용이 있을 수 있습니다.
발견하시면 말씀 부탁드립니다! 🙇

React native에서 아이콘을 사용하기 위해선 React native용 아이콘 패키지를 설치해야한다.


1. react-native-vector-icons 설치

npm i react-native-vector-icons

 
 
 

2. podFile에 지정된 종속성 Xcode 프로젝트에 설치

cd ios && pod install

 
 
 

3. node_modules/react-native-vector-icon에 있는 Fonts 폴더를 Xcode 프로젝트에 드래그해서 복사

  • 복사 시 Add to targets, Create group 체크되었는지 확인.
Xcode

 

4. Info.plist 수정

  • Xcode에서 Info.plist > Fonts provided by application key 추가 > 추가한 key 하위에 폰트 파일들 추가.

 

  • 아니면 Visual Studio Code에서 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>
  <string>Fontisto.ttf</string>
</array>

 
 

5. 프로젝트 빌드 & 실행

npm run ios

 
 
 
+ 진행하며 만난 에러)
npm 공식 문서 그대로 따라 설치하고 진행했는데 build 부분에서 에러가 발생했다. (Error message: multiple commands produce AntDesign.ttf react native... ) 확인해보니 Build Phases > Copy Bundle Resources에 폰트가 중복으로 들어가게 돼서 발생하는 문제라고 한다. Copy Bundle Resources에 추가한 폰트 삭제 후  npm run ios 하니 정상적으로 빌드되었다.
 
 

참고 자료