React Native - 아이콘 사용하기(react-native-vector-icons)

아이콘을 따로 저장하지않고 쉽게 불러와서 사용하기위해 라이브러리를 설치했다.

yarn add react-native-vector-icons 
yarn add --dev @types/react-native-vector-icons

 

ios

그리고 생성된 node_modules/react-native-vector-icons 폴더에서 Fonts 파일은 xcode 프로젝트안에 드래그&드롭

 

info.plist <dict>안에 아래 코드 추가

  <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>SimpleLineIcons.ttf</string>
      <string>Octicons.ttf</string>
      <string>Zocial.ttf</string>
      <string>Fontisto.ttf</string>
    </array>

 

 

Android

android/app/build.graddle 파일 하단에 아래 코드 추가

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

project.ext.vectoricons = [
	iconFontNames: ['MaterialIcons.ttf'] // 특정폰트만 사용하고싶으면 이렇게 추가하면됨
]

Common

프로젝트 루트경로에 react-native.config.js 파일 생성 후 dependencies 추가

module.exports = {
  dependencies: {
    'react-native-vector-icons': {
      platforms: {
        ios: null,
      },
    },
  },
};

 

pod install & ./gradlew clean 후 프로젝트 다시 빌드

Usage

icon name은 https://oblador.github.io/react-native-vector-icons 에서 써칭 후 사용하고자하는 아이콘 폰트탭에서 이름입력

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

 <Icon name="home-filled" size={size} color={color} />