(React) 아이콘 사용하기 (상세 설명)

---

(React) 아이콘 사용하기

---

리액트에서 수많은 아이콘들을 제공해 주고 있습니다.

쓰는 방법도 매우 쉬워요~~ :)

 

포스팅 요약

1.react-icons 사이트에서 아이콘 고르기

2. icon 고르기

3. react-icons --save 설치하기

4. 파일에 icon을 import해온다

---

1. react-icons 사이트에서 아이콘 고르기

---

사이트 접속: https://react-icons.github.io/react-icons

사이트 접속 후, 왼쪽박스에서 원하는 카테고리를 클릭하여 들어간다.

 

---

2. icon 고르기

---

원하는 아이콘을 고르고, 아이콘 이름을 복사(혹은 기억)합니다.

(* 아이콘 모양을 클릭하면 자동 복사됩니다!!)

(* 저는 복사가 안되서 그냥 대충 기억해 놓습니다. < import해야 되기 때문에 이름 기억 필요!!)

 

---

3. react-icons --save 설치하기

---

프로젝트를 진행할 파일을 코드편집기로 열어준 뒤, 터미널창을 열읍니다.

 

Mac OS터미널창 단축키 : control + shift + `

(마지막은 백틱(`)인데 ₩ 버튼이랑 같은 버튼입니다.)

 

혹은 아래 사진과 같이

Terminal -> New Terminal 을 통해 터미널창 열기

 

터미널 창에 다음 코드를 입력해 줍니다

npm install react-icons --save

 

---

4. 파일에 icon을 import해온다

---

사이트에서 Import부분을 복사하고, IconName에는 원하는 아이콘의 이름을 넣습니다.

(카테고리마다 import하는 내용이 다르므로 잘 확인해주세요~ :) )

 

아래처럼 import를 해주고, 컴포넌트처럼 사용하면 됩니다.

---

<결과 화면>