[RN] React Native cli Android에서 react-native-vector-icons 라이브러리 사용하기

2024. 10. 13. 07:19·React Native

개요


앱 개발을 할 때는 여러 아이콘을 사용하는 경우가 많다.

React Native에는 아이콘들을 간편하게 가져와서 사용할 수 있도록 지원하는 react-native-vector-icons 라이브러리가 있다.

 

사용할 수 있는 아이콘들은 다음 링크에서 볼 수 있다.

https://oblador.github.io/react-native-vector-icons/

 

react-native-vector-icons directory

 

oblador.github.io

 

Expo에서는 자동으로 라이브러리를 사용할 수 있도록 설정해 주지만 React Native cli에서는 라이브러리를 사용하려면 수동으로 설정해주어야 한다.


사용 방법


인터넷에 검색하면 여러 방법들이 나와 있으나 해당 방법이 가장 간편하다.

 

android/build.gradle 파일에 해당 라인을 추가한다.

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

 

그 후 원하는 아이콘을 import하여 사용한다.

import Ionicons from 'react-native-vector-icons/Ionicons'
import Entypo from 'react-native-vector-icons/Entypo'
import MaterialIcons from 'react-native-vector-icons/MaterialIcons'

//아래와 같은 방식으로 사용
<Entypo name='home' size={20} color={color}/>
<Ionicons name='person' size={20} color={color}/>
<MaterialIcons name='settings' size={20} color={color}/>

아이콘의 이름은 name에, 아이콘의 크기는 size, 아이콘의 색깔은 color에 준다.

 

아이콘은 화살표 함수로 작성할 수도 있다.

({color}) => (<Ionicons name='person' size={20} color={color}/>)

매개변수는 name, size, color 모두 가능하다.

 

아이콘을 사용하는 라이브러리에 따라 무궁무진하게 활용이 가능하다.

'React Native' 카테고리의 다른 글

[RN] Warning: A props object containing a "key" prop is being spread into JSX 에러  (0) 2024.10.15
'React Native' 카테고리의 다른 글
  • [RN] Warning: A props object containing a "key" prop is being spread into JSX 에러
MaKa_
MaKa_
이게 왜안될까요
  • MaKa_
    벌레 잡는 사람
    MaKa_
  • 전체
    오늘
    어제
    • 공부 (45)
      • CS (18)
        • 자료구조(data structure) (7)
        • 알고리즘(Algorithm) (6)
      • React (6)
      • React Native (2)
      • Next.js (5)
      • Backend (2)
      • 이야기 (3)
        • 회고 (2)
        • 일상 (1)
      • 기타 (7)
      • 알고리즘 문제 (2)
        • 백준 (0)
        • 프로그래머스 (1)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

    • 깃허브
  • 공지사항

  • 인기 글

  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
MaKa_
[RN] React Native cli Android에서 react-native-vector-icons 라이브러리 사용하기
상단으로

티스토리툴바