(React) 리액트 아이콘(react-icons) 사용하기

리액트 (React.js)

 

리액트를 이용하여 웹페이지를 구현하는데 빠르게 아이콘을 사용하고 싶을때 react-icons를 사용할 수 있습니다.

 

react-icons.github.io/react-icons/

React Icons

 

사용방법을 알아보겠습니다.

우선 해당 라이브러리를 설치해야 합니다.

 

npm install react-icons --save // npm
yarn add react-icons // yarn

 

 

그리고 설치 후에 사이트 좌측을 보면 아이콘을 검색할 수 있는 검색창과 아이콘의 종류들이 있습니다.

저는 Font Awesome을 들어가보겠습니다.

 

 

여기서 Ctrl + F 를 눌러 원하는 아이콘을 페이지 내에서 검색해서 클릭해서 사용해도 되고

폰트어썸 말고 다른 아이콘들도 찾아보고 싶으면 아예 왼쪽에 검색창에서 검색을 하여 찾아보셔도됩니다.

 

 

사용하고 싶은 아이콘을 클릭하면 아이콘 이름이 복사됩니다.

 

그 복사한 아이콘을 Import로 불러와야하는데 아이콘 종류마다 불러오는 주소가 따로 있습니다.

 

Font Awesome

 

폰트어썸은 "react-icons/fa" 이고 IconName 부분에 아이콘 이름을 넣어주시면 됩니다.

 

 

제가 예시로 FaSearch를 불러와서 사용해봤습니다.

 

아이콘이 잘 나오는걸 확인해볼 수 있습니다.

추가로 해당 아이콘 컴포넌트는 svg이고 size, color 등을 직접 설정해줄 수 있습니다.

 

 

이런식으로 설정해줄 수 있는데 className으로 클래스명도 직접 선언해줘서 css작업까지 가능합니다.

 

잘 적용된 것을 확인해볼 수 있습니다.