[React Native] react-native-vector-icons 설치 및 사용 방법

react native 에서는 svg 파일을 따로 불러와 사용하는 것보다 react-native-vector-icons를 통해

편하게 icon을 사용할 수 있다.

---

00. react-native-vector-icons 설치

npm install react-native-vector-icons

React Native 0.60 이상에서는 자동 링크가 지원되므로 별도로 link 명령어를 사용하지 않아도 된다.

설치 후 ios 와 안드로이드에 맞게 설정을 해주어야 한다.

 

01.  ios : xcode 에 프로젝트 파일 열기

xcode를 키고 해당 위치에 있는 Pods.xcodeproj 를 눌러 현재 프로젝트 파일을 열어준다.

01.  Fonts폴더 만들기

./TodoWithMe/TodoWithMe 디렉토리에서 Fonts 폴더를 만들어 nodemodule/react-native-vector-icons/Fonts 에 있는 파일들을 모두 복사하여 넣는다.

 

+) react-native.config.js를 설정하여 자동 링크를 비활성화하지 않으면 ios 빌드 시 중복 오류가 발생할 수 있다.

02. Info.plist 파일 설정

Add Row클릭하여 Fonts provided by application 을 생성하고 item 에 조금 전 불러온 ttf 파일들을 기입한다.

ios/프로젝트명/Info.plist 에 들어가면 위와 같이 기입되어 있다.

03. Clean build 및 build

* Clean build : Cmd + Shift + k

* Build : Cmd + R

 

xcode 환경 설정을 완료한 후 터미널에서 npx react-native run-ios를 통해 실행한다.

+) 빌드 전 pod install 명령어 실행 필수 ⬅️ 안하면 에러 발생할 수 있음

 

04. react-native.config.js 설정 (추가)

module.exports = {
  reactNativePath: "./node_modules/react-native",
  dependencies: {
    "react-native-vector-icons": {
      platforms: {
        ios: null, // iOS에서 react-native-vector-icons 제외
      },
    },
  },
};

react-native-vector-icons를 ios에서 자동 링크하지 않도록 설정하여 중복 폰트 로딩 문제를 방지한다.

만약 react-native.config.js 없이 수동으로 폰트를 추가했을 경우 해당 설정은 필수이다.

05. ios/podfile 설정

config = use_native_modules!  # config 정의 추가

podfile을 확인하여 위의 내용이 없다면 추가할 것

 

경우에 따라 M1 Mac에서는 Use_frameworks! : linkage => :static 을 추가로 입력한다.

06. Android : build.gradle 내용추가

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

android/app/build.gradle에 위 내용을 추가한 후 npx react-native run-android하면 끝!

---

07. React-native-vector-icons 사용 예제

https://ionic.io/ionicons

Ionicons: The premium icon pack for Ionic Framework

 

Ionicons에 들어가서 원하는 Icon을 찾는다.

 

Iconicons 외에도 FontAwesome이나 MaterialIcons 등이 있다.

import Ionicons from "react-native-vector-icons/Ionicons";

Import 방법

<Ionicons name="checkmark-outline" size={10} color="white" />

icon 사용 방법