[React] React에 아이콘 쉽게 넣기 (React-icons)

---

React-icons

https://www.npmjs.com/package/react-icons

react-icons

 

React 작업중 쉽게 아이콘을 추가할 수 있는 라이브러리 이다. 

 

위에 첨부된 사이트에서 보이듯 

npm i react-icons

 

를 통하여 설치한 후 사용하면 된다. 

 

 

아이콘을 이용하는 사이트는 https://react-icons.github.io/react-icons/ 이다.

React Icons

 

✅ 사용방법 

 

해당 사이트에서 필요한 아이콘을 영어로 검색하면 된다. (이게 제일 어렵다.)

 

 

hamburger라고 검색했을 때 뜨는 화면이다. 

 

이처럼 검색한 후 마음에 드는 아이콘을 클릭하여 들어간다. 

 

 

처음에 나온 정말 햄버거 모양의 아이콘을 클릭했다. 

 

우측에 보이는 Codes를 복사해서 알맞은 위치에 붙여넣으면 된다. 

 

import 코드는 react 파일 상단에 붙여넣어 컴포넌트를 정의하고, 

<FaHamburger />

그후, 필요한 곳에 컴포넌트의 인스턴스를 생성하여 사용할 수 있다.

 

 

<div>
      <FaCameraRetro className="w-8 h-6 inline-block" />
      strap_m_
</div>

 

이런식으로 class를 붙여서 사용할 수 있다.