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
설치 자체는 단순하게 라이브러리를 다운로드/프로젝트에 포함하는 과정으로 간략하게 설치할 수 있다.
라이브러리 설치
npm install --save react-native-vector-icons |
혹은
yarn add react-native-vector-icons |
이후에, 한가지 단계가 더 있다.
프로젝트에 포함
android/app/build.gradle 에 아래를 추가한다.
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle" |
이것은 단순이 라이브러리 다운로드와, 프로젝트에 새로운 폰트를 적용해 준것으로 이해하면 된다.
사용 또한 매우 간략하다.
아래와 같이 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/
React-native-sound 가 Release build에서 동작하지 않을 때 (1) | 2020.03.11 |
---|---|
구글 플레이스토어(playstore) 앱 버젼 업그레이드 (0) | 2020.03.10 |
Node Module을 React Native 에서 사용해 보자 (0) | 2020.03.09 |
React JS 입문 - 10만에 보는 리액트 (0) | 2020.03.09 |
React Native - Sample 개발기 (0) | 2020.03.09 |
댓글 영역