React Native 벡터 아이콘 사용하기 vetor-icon

React Native 에서 벡터 아이콘을 사용하기 위해서 

react-native-vector-icons 라이브러리를 사용한다

 

설치

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

 

환경별 설정

react native 는 iOS, ANDROID 앱으로 만들어지다 보니
iOS 와 Android 용으로 각각 설정해줘야 한다

iOS App 에 폰트 추가

1. Fonts 그룹 만들기
XCode 로 해당 프로젝트를 실행해서
File > New > Group 으로 Fonts 라는 그룹을 만들어 준다

2. 폰트 파일 복사해오기
Finder 로 react-native-vector-icons > Fonts 밑의 파일을 드래그 해서
Xcode 에 만들어 놓은 Fonts 그룹으로 드롭한다

팝업창이 뜨면 Copy items if needed 를 체크하고 Finish 한다

3. Info.plist 에 폰트 추가
ios > 프로젝트명 > Info.plist 를 에디터로 열어서 
아래 key, array 를 추가한다

<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>

Info.plist 에 추가하면

XCode 에서 Info.plist 를 클릭하면
오른쪽 Fonts provided by application 에 16개의 items 가 추가된 것을 확인할 수 있다

Xcode Info.plist

4. Copy Bundle Resources 에 Fonts 추가하기
XCode 프로젝트 의 Build Phases 탭에 Copy Bundle Resources 에
Font 파일들을 Add 합니다

Build Phases

사용할 폰트 추가

 

Andriod App 에 폰트 추가

Gladle 을 이용해 자동으로 추가합니다
1. andorid > app > build.gradle 에 폰트 추가하기

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

android  밑이 아닌 android > app 밑에 있는 build.gradle 에 추가합니다

2. android studio 실행해서 Gradle 시작하기
안드로이드 스튜디오를 실행해서 android 프로젝트 열어주면 위에서 수정한 gradle 파일이 
자동으로 설정해 줍니다

import Icon from 'react-native-vector-icons/FontAwesome';


...생략...
  return (
    <SafeAreaView style={styles.container}>
      <StatusBar style="auto" />
      <Title title="Todo List" />
      <Input
        value={newTask}
        onChangeText={_handleTextChange}
        onSubmitEditing={_addTask}
      />
      <Button title="Add" onPress={() => _addTask()} />
      <Icon name="rocket" size={30} color="#900" />
    </SafeAreaView>
  );
}

...생략...

 

# metro 실행
npx react-native start
# ios app 실행
npx react-native run-ios
# 안드로이드 app 실행
npx react-native run-android

 

폰트적용 확인하기

react-native-vector-icons 적용

로케트 vector 이미지가 둘 다 적용된 것을 확인할 수 있습니다