[react-native] vector-icons 사용, 설치 방법

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

설치

$ npm install --save react-native-vector-icons

라이브러리 연결

New Group을 만들어 주는데 Group이름을 Fonts로 만든다

node_modules/react-native-vector-icons/Fonts에 있는 파일들을 방금 만든 Fonts에 드래그 해서 붙여 넣어준다

사진처럼 체크하고 Finish

 

---

아래부터는 쉬운 방법이라는데 나는 해봤는데 안된다.... 아이콘 하나 설치하기 힘들다... 

그래도 해보실 분들은

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    ...
  <key>UIViewControllerBasedStatusBarAppearance</key>
  <false/>
  <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>MaterialCommunityIcons.ttf</string>
    <string>MaterialIcons.ttf</string>
    <string>Octicons.ttf</string>
    <string>SimpleLineIcons.ttf</string>
    <string>Zocial.ttf</string>
    <string>Fontisto.ttf</string>
  </array>
</dict>

ios/projectName/info.plist

하단에 위의 코드를 붙여넣고

xcode에서

$ cmd + shift + K

를 눌러 Clean Build Folder를 해주고 새로 빌드 해주면 설치 끝

---

 

새로운 라이브러리 연결 방법

info.plist 다시 원상 복귀 해놓고 밑에 사진 경로로 들어가서 info 파일을 열고 Add Row로 새로 추가한다

그러면 select 할 수 있는 게 나오는데 Fonts provided by application을 추가하고 icons 파일들의 이름을 손수 하나하나 다 추가한다

그리고 마지막으로!

$ cmd + shift + K

클린 빌드 하고 다시 빌드하면

드디어 나온다