백터 아이콘(Vector Icons) 사용하기

아이콘이나 이미지를 사용할때 라이브러리로 react-native-vector-icons가 유용하다. 

React-Native-vector-icons GitHub에 활용하는 방법이 소개 되어 있다.

백터 아이콘(Vector Icons)은 폰트 또는 SVG를 사용해 크기가 조정돼도 아이콘이 흐려지거나 깨지지 않는다.

터미널에서 아래 명령어를 사용해 설치가 가능하다.

$ yarn add react-native-vector-icons

설치 후 iOS와 안드로이드 프로젝트 둘 다 적용이 필요하다.

 

iOS에 react-native-vector-icons 적용하기

ios 디렉터리로 이동해 pod install 명령어를 사용한다.

$ cd ios
$ pod install

ios 디렉터리를 보면 프로젝트명으로 된 폴더안에 info.plist 파일을 수정해야 한다. 제일 하단에 UIAppFonts를 추가한다.

string 값에는 사용할 아이콘을 설정하면 된다.

<dict>
    ...
    <key>UIViewControllerBasedStatusBarAppearance</key>
    <false/>
    <key>UIAppFonts</key>
    <array>
        <string>MaterialIcons.ttf</string>
    </array>
</dict>

plist 파일은 iOS 앱의 프로퍼티 리스트(property list) 파일로 앱의 이름, 아이콘, 버전 등 앱에서 필요한 설정값을 지니고 있다.

여기에 추가할 폰트로 어떤 것이 있는지 node_modules/react-native-vector-icons/Fonts 디렉터리를 열어보거나 GitHub에 Font 디렉터리를 보면 확인할 수 있다.

info.plist을 수정했으면 다시 ios 시뮬레이터를 다시 실행해준다.

$ yarn ios

 

안드로이드에 react-native-vector-icons 적용하기

안드로이드에서는 android/app 디렉터리 안 build.gradle 파일 하단에 아래 코드를 추가한다.

...
apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle")

ios와 마찬가지고 시뮬레이터를 다시 실행해준다.

$ yarn android

 

react-native-vector-icons 사용하기

react-native-vector-icons directory에 접속해보면 모든 아이콘을 검색할 수 있다.

react-native-vector-icons의 아이콘은 다음과 같이 사용할 수 있다.

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

return (
  ...
  <Icon name="delete" size={32} color="red" />
);

deleteIcon