sanguk.dev
작성완료
React Native 아이콘 사용

React Native 아이콘 사용

react-native-vector-icons 설치 방법과 Android 및 iOS 설정 방법을 설명하며, 아이콘 사용법에 대한 예시를 제공한다. 아이콘 이름은 관련 웹사이트에서 확인할 수 있다.

React Native

react-native-vector-icons

설치

shell
yarn add react-native-vector-icons
shell
yarn add -D @types/react-native-vector-icons

Android

android/app/build.gradle

groovy

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

IOS

shell
cd ios && pod install && cd ..
xml
<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>

사용법

typescript
import Ionicons from 'react-native-vector-icons/Ionicons';

export default function App () {
  return (
    <Ionicons name='아이콘 이름' />
  )
}

아이콘의 이름은 여기 사이트에서 구할 수 있다.