React | react-icon

협업을 진행하며 다른 팀원들이 작성한 코드에서 많은 라이브러리를 배울 수 있었다. 그 중 하나인 react-icon에 대해서 얘기해보려한다

react-icon

문자로만 UI를 구현하면 유저들은 얼마나 피로하겠는가? 따라서 UI를 구현할 때 유저의 피로를 덜어주기 위해선 픽토그램과 같은 아이콘을 사용하는 것이 좋다.

이전의 나는 무료픽토그램 사이트에서 아이콘을 다운로드 받아 크기에 맞게 조절하는 일련의 귀찮은 과정들을 거쳐 UI를 장식하였다.

그런데 이번 프로젝트를 진행하며 react-icon에 대해서 접하게 되었고 그 동안 내가 얼마나 비효율적인 작업을 하였는지 되돌아보게 되었다.

자 그럼 본론으로 들어가 어떻게 사용하는지 알아보자.

1. 내가 사용할 아이콘을 찾아보자.

react-icons

이 곳에서 내가 사용할 아이콘을 찾는다. 키워드로 검색하면 편하게 찾을 수 있을 것이다.

2. 패키지를 다운받자

npm install react-icons/{카테고리}

yarn add react-icons/{카테고리}

패키지를 install 한 후에

import {내가 사용할 아이콘} from 'react-icons/{카테고리}'

import하여 아이콘을 사용해주면 된다