[React Native Vector Icons] 리액트 네이티브 벡터 아이콘을 달아 보자

React Native Vector Icons

 

Application을 개발하다 보면, 그림으로 넣기에는 과도한것 같고, 일반적으로 사용하는 Icon으로 표현하고 싶은 경우가 있다. 

대표적으로 아래와 같, 별(star), 와이파이, 음악 및 알람을 표현하는  아이콘들의 경우이다.

 

 

이런 용도로 사용하기 적당한 라이브러리로 react-native-vector-icons 가 유용하다. 

React-Native-vector-icons의 깃허브(github)에 가면, 다양한 경우에 아이콘 (Text Font라고 생각할 수 있다.)을 활용하는 방법이 소개 되어 있다. 

 

Github for react-native-vector-icons 

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

 

---

설치 

 

설치 자체는 단순하게 라이브러리를 다운로드/프로젝트에 포함하는 과정으로 간략하게 설치할 수 있다. 

 

1. 라이브러리 설치

npm install --save react-native-vector-icons

혹은

yarn add react-native-vector-icons

이후에, 한가지 단계가 더 있다. 

 

1. 프로젝트에 포함

android/app/build.gradle 에 아래를 추가한다. 

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

 

이것은 단순이 라이브러리 다운로드와, 프로젝트에 새로운 폰트를 적용해 준것으로 이해하면 된다. 

활용 (Usage)

 

사용 또한 매우 간략하다. 

아래와 같이 react-native-vector-icons/* 에서 Icon을 import 하여 사용한다. 

여기에서 esterisk(*) 로 표기한 것은 vector-icons의 카테고리이다. (카테고리는 하단을 참조 바람)

Icon에 name 속성에 따라서 icons (정확하게는 커스텀 폰트)를 선택할 수 있다. 

 

import Icon from 'react-native-vector-icons/FontAwesome5'; const myIcon1 = <Icon name="comments" size={30} color="#900" />; // Defaults to regular const myIcon2 = <Icon name="comments" size={30} color="#900" solid />; const myIcon3 = <Icon name="comments" size={30} color="#900" light />; // Only in FA5 Pro

 

icon category ( 참조 : https://github.com/oblador/react-native-vector-icons)

 

• AntDesign by AntFinance (297 icons)

• Entypo by Daniel Bruce (411 icons)

• EvilIcons by Alexander Madyankin & Roman Shamin (v1.10.1, 70 icons)

• Feather by Cole Bemis & Contributors (v4.21.0, 279 icons)

• FontAwesome by Dave Gandy (v4.7.0, 675 icons)

• FontAwesome 5 by Fonticons, Inc. (v5.7.0, 1500 (free) 5082 (pro) icons)

• Fontisto by Kenan Gündoğan (v3.0.4, 615 icons)

• Foundation by ZURB, Inc. (v3.0, 283 icons)

• Ionicons by Ben Sperry (v4.2.4, 696 icons)

• MaterialIcons by Google, Inc. (v3.0.1, 932 icons)

• MaterialCommunityIcons by MaterialDesignIcons.com (v4.0.96, 4416 icons)

• Octicons by Github, Inc. (v8.4.1, 184 icons)

• Zocial by Sam Collins (v1.0, 100 icons)

• SimpleLineIcons by Sabbir & Contributors (v2.4.1, 189 icons)

 

다음은 가장 단순한 예이다. 

 

import { Text } from 'react-native'; import Icon from 'react-native-vector-icons/Ionicons'; function ExampleView(props) {   return (     <Text>       Lorem <Icon name="ios-book" color="#4F8EF7" /> Ipsum     </Text>   ); }

중요

 

주목할 만한 점은 수만은 카테고리와 아이콘이 소개 되고 있지만, 잘 알려진 ICON 인 “rocket”, “heartbeat”, “ios-book” 등을 제외하면 생각외로 잘 출력이 되지 않는다. 

공식 홈페이지 및 Github에서 명명되고 있는 것과 Icon name이 다르기 때문에 “?” 형태로 출력이 된다. 

(필자는 이 부분에서 많은 시간을 소모하였다. )

 

깃허브에서 제공하고 있는 각 카테고리별 공식 홈페이지의 다양한 아이콘 이름을 설정하여도 동작하지 않는다. 

나중에 알게된 사실이지만, 라이브러리 별로 ICON 이름이 다른 경우도 있고, 유료(Pro version) 아이콘으로 기본 url 로 제공하지 않는 경우도 존재한다. 

 

따라서, react native에서 제공하는 아이콘과 이름정보를 알아야만 정확히 출력이 될것 이다. 

이런부분을 정리해 둔 리스트는 다음에서 확인을 할 수 있다. 

 

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