[React JS] 리액트 아이콘(React Icons)

 

리액트 프로젝트를 제작하면서 여러 아이콘을 사용해야 할 때가 있다.

이때 아이콘을 따로 svg 파일로 다운받지 않고 react-icons를 이용해 더 빠르게 적용할 수 있다.

 

1. 첫번째로 해당 라이브러리를 설치해야 한다.

npm install react-icons

 

 

2. 설치를 완료하면 아래 사이트에 들어가 원하는 아이콘을 찾는다.

 

https://react-icons.github.io/react-icons/icons?name=md 

React Icons

 

 

3. 사용하고자 하는 아이콘의 이름을 복사하여 import 해온다.

import {IconName} from "react-icons/md";

 

중괄호( { } ) 안에 해당 아이콘 이름을 넣어 import 하면 된다.

이때 아이콘의 종류마다 불러오는 주소가 다르다.

react-icons/md 혹은 react-icons/fa 등 아이콘 마다 주소가 다르므로 해당 사이트의 import 코드 예시를 보고 사용하는 것이 좋다.