react-native-vector-icons

2019-05-23

react-native-vector-icons 라이브러리를 사용하여 아이콘을 표시해보자.

개요

RN 프로젝트에 벡터 아이콘을 사용하기 위해 react-native-vector-icons 라이브러리를 사용해 보자.

라이브러리 설치

아래에 명령어로 react-native-vector-icons을 설치합니다.

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

설치가 완료되면 아래에 명령어로 라이브러리와 프로젝트를 연결합니다.

react-native link react-native-vector-icons

사용법

우리는 기본적으로 사용한적이 있는 경우만 블로그로 작성합니다. 따라서 여기에 작성된 내용은 우리가 사용할 때마다 추가될 것입니다.

사용법에 대한 자세한 사항은 공식 홈페이지를 참조하세요.

Material icons

Material icon을 사용하는 방법

...
import Icon from 'react-native-vector-icons/FontAwesome';
...

export default class Home extends React.Component<Props, State> {
    render() {
        return (
            <View>
                <Icon name="home" size={24} color="#ffffff" />
            </View>
        );
    }
}

참고

Buy me a coffeeBuy me a coffee
Posts