[React Native] 아이콘 사용하기 (＠expo/vector-icons)

아이콘 사용하기 (＠expo/vector-icons)

들어가며

• 리액트 네이티브(React Native) 엑스포(Expo) 프로젝트에서 아이콘(Icon)을 사용하는 방법을 간단하게 정리해본다.
• 리액트 네이티브의 엑스포 프로젝트에서는 별다른 패키지를 설치하지 않고도 아이콘을 바로 사용할 수 있다.

 

방법

1️⃣ 패키지 설치하기 (＠expo/vector-icons)

• Expo 프로젝트에서는 이미 기본적으로 ＠expo/vector-icons 패키지가 포함되어 있어서 따로 설치할 필요는 없다.
• 하지만, 해당 패키지가 설치되어 있지 않을 경우, 아래 명령을 실행하여 설치해준다.

			
			
			
		
$ expo install @expo/vector-icons

 

2️⃣ 아이콘 세트 불러오기

• 우선, 아이콘 세트(Icon Set)를 불러와서 해당 아이콘 세트의 아이콘을 사용하는 방식으로 아이콘을 사용할 수 있다.

			
			
			
		
import { Ionicons } from '@expo/vector-icons';          // Ionicons 아이콘 세트 사용하기
import { MaterialIcons } from '@expo/vector-icons';     // MaterialIcons 아이콘 세트 사용하기
import { FontAwesome } from '@expo/vector-icons';       // FontAwesome 아이콘 세트 사용하기

 

이용 가능한 유명한 아이콘 세트로 Ionicons, MaterialIcons, FontAwesome, AntDesign, Feather 등이 있다.

 

3️⃣ 아이콘 사용하기

• 다음과 같이 아이콘 세트 이름의 컴포넌트에 필요한 속성을 추가하여 아이콘을 생성할 수 있다.
• 아이콘 세트 컴포넌트에 공통적으로 name, size, color 속성을 넣을 수 있다.

			
			
			
		
<Ionicons name="md-checkmark-circle" size={32} color="green" />    // Iconicons 아이콘
<MaterialIcons name="home" size={30} color="black" />              // MaterialIcons 아이콘
<FontAwesome name="rocket" size={30} color="#900" />               // FontAwesome 아이콘

 

주요 속성

속성	설명
name	아이콘 이름 (라이브러리마다 다름.)
size	아이콘 크기 (숫자)
color	아이콘 색상

 

(참고) 원하는 아이콘 검색하기

• 아래의 사이트에서 자신이 원하는 아이콘의 아이콘 세트 이름과 아이콘 이름을 확인할 수 있다.

expo/vector-icons directory

 

참고 사이트

Expo Vector Icons