상세 컨텐츠

본문 제목

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

개발 이야기/React-Native

by 리치윈드 - windFlex 2020. 3. 9. 22:23

본문

반응형

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



 

리액트를 다루는 기술, 길벗 리액트 교과서:기본기에 충실한 리액트 입문서!, 길벗 리액트 네이티브 인 액션:실무 중심 예제로 배우는 크로스 플랫폼 앱 개발 실전 활용서, 프리렉 모던 자바스크립트 입문:기초 문법부터 ES6 정규 표현식 객체 지향 및 함수형 프로그래밍 HTTP, 길벗


설치 

 

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

 

  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)

 

 

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

 

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/

 

반응형

관련글 더보기

댓글 영역