Opendocs Logo

[Setting | ReactNative] 개발환경 구축하기 (4) - Icon 적용

앱에 아이콘을 사용할 수 있도록 React-native-vector-icons 을 적용하는 방법을 정리한다.

> 작성일 : 2025-01-28
> OS : macOS Sequoia 15.2 (Apple M4)
> NodeJS : v22.13.1
> NPM : v10.9.2
> ReactNative : v0.77

기본앱 설치 후 진행 - Link 메뉴얼 참고 - Link


<1> React Navigation 설치

생성된 프로젝트에서 아래 명령을 수행

npm install react-native-vector-icons
npm install -D @types/react-native-vector-icons


<2> iOS 설정

<2-1> pod install

npx pod-install

<2-2> Xcode를 통해 프로젝트 오픈

Finder에서 <프로젝트폴더>/ios/<프로젝트명>.xcworkspace 실행

IMG01

<2-3> Font 복사

설치된 모듈(node_modules/react-native-vector-icons/)에서 프로젝트 폴더(<프로젝트폴더>/ios/<프로젝트명>/)로 Fonts폴더를 복사 (Finder 에서 Xcode로 끌기 해야함)

IMG02

<2-4> Xcode 설정 - Font 그룹 추가

Info 클릭 : Information Property List 오른쪽 + 버튼 클릭 : Fonts Provided by application 추가

IMG03

<2-5> Xcode 설정 - Font 추가

Fonts Provided by application 오른쪽 + 버튼 클릭 : Font 입력

IMG04

<2-6> Xcode Clean & Build

Clean : Command + Shift + K && Build : Command + R

<2-7> Build 에러 : Multiple commands produce

Project > TARGETS > Build Phases > Copy Pods Resources 삭제 후 재빌드

IMG05



<3> Android 설정

<3-1> Font 복사

설치된 모듈(nodemodules/react-native-vector-icons/Fonts/)에서 프로젝트 폴더(<프로젝트폴더>/android/app/src/main/assets/fonts/_)로 ttf파일 모두 복사 한다. (android...fonts 폴더는 소문자)

IMG06



<3-2> gradle 파일 편집

<프로젝트폴더>/android/settings.gradle 파일을 열어 다음 두줄을 추가한다.

include ':react-native-vector-icons'
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')

<프로젝트폴더>/android/app/build.gradle 파일을 열어 dependencies에 다음 한줄을 추가한다.

dependencies {
  ...
  implementation project(':react-native-vector-icons')
}

<3-3> java 파일 편집

<프로젝트폴더>/android/app/src/main/java/MainApplication.kt 파일을 열어 다음 두줄을 추가한다.

package com.myapp;

...
+ import com.oblador.vectoricons.VectorIconsPackage

class MainApplication : Application(), ReactApplication {

  override val reactNativeHost: ReactNativeHost =
      object : DefaultReactNativeHost(this) {
        override fun getPackages(): List<ReactPackage> =
            PackageList(this).packages.apply {
              // Packages that cannot be autolinked yet can be added manually here, for example:
              // add(MyReactNativePackage())
+              add(VectorIconsPackage())
              ...

<3-4> 프로젝트 리빌드

gradle clean 명령으로 프로젝트를 재 빌드한다.

cd android &&./gradlew clean
cd .. && npm run android

<3-5> 아이콘 확인

에뮬레이터에 아이콘이 정상 표시되는지 확인한다.

IMG07



Tags : react native vectorIcons적용, React Native Icon, React Native Icon 설정, RN React Icon, react-native-vector-icon 설정, iOS아이콘, Android아이콘


AD
ⓒ Opendocs. All Rights Reserved.