React) react-icons 사용법

react-icons

---

• react-icons 설치

React 프로젝트의 package.json이 있는 폴더에서 터미널을 열고 다음 명령어를 입력합니다. 

npm install react-icons --save

완료되면 package.json을 열어 설치가 잘 되었는지 확인합니다.

설치가 잘 되었다면 package.json 파일의 dependencies 내부에 다음과 같은 값이 추가되었을 것입니다. 

---

• 사용할 아이콘 선택

이 사이트에서 사용하고 싶은 아이콘을 선택합니다. 

React Icons

---

• js 파일에 아이콘 임포트

아래 코드를 해당 아이콘을 사용할 js 파일 상단에 추가해줍니다. 

import { 아이콘 이름 } from 'react-icons/md';

// ex)
import { MdAdd } from 'react-icons/md';

---

• 아이콘 사용

아이콘을 추가할 곳에 다음 아이콘 컴포넌트를 삽입해주면 됩니다. 간단하죠?

...
<아이콘 이름/>
...

//ex)
<MdAdd/>

 

<MdAdd />