[React] 리액트 아이콘 (React-icons) 적용해서 사용하기!

React-icons

React-icons은 리액트 프로젝트 작업을 할 때 아이콘을 손쉽게 사용할 수 있도록 도와주는 라이브러리입니다.
오늘은 이 React-icons을 적용해서 사용하는 방법을 알아보겠습니다.

React-icons 설치

$ npm install react-icons --save 
또는 
$ yarn add react-icons

사용 방법

1. 좌측 아이콘 목록

위의 이미지에서 보이듯이 리액트 아이콘 좌측 목록에서 원하는 아이콘이 있는 패키지를 고르거나,
직접 검색을 하면 됩니다.

2. 아이콘 선택

원하는 아이콘을 찾아서 클릭을 하면 자동으로 해당 아이콘의 이름이 복사가 됩니다.

3. import 아이콘

import { 아이콘이름 } from "react-icons/아이콘주소";

복사한 아이콘 이름을 import 해주면 됩니다.
그리고 각각 다른 아이콘 주소 중에서 해당하는 아이콘이 속한 패키지의 주소를 연결을 해주어야 합니다.

4. <아이콘 이름 />

이제 import한 아이콘을 태그로 감싸서 컴포넌트에 작성을 해주면 됩니다.
해당 아이콘은 svg파일이며, className, 원하는 사이즈, 컬러 등을 적용해서 사용할 수 도 있습니다.

5. 결과

참고

React-icons