[React][Design] React용 아이콘 모음

# React Icon를 활용해서 원하는 아이콘을 쉽게 적용하는 방법

- react-icons는 React 개발을 하시다보면, 자연스럽게 알게되는 사이트 중 하나일 것입니다. 현재 27개 정도의 아이콘 라이브러리를 포함하고 있기 때문에, 왠만한 프로젝트는 react-icons하나로 커버가 가능합니다. 게다가 현재도 꾸준히 업데이트가 되고 있고, 통합 검색 또한 제공하므로 사용하기 정말 편합니다. 그리고 대부분의 아이콘이 자유롭게 무료로 사용이 가능하지만 아이콘 별로 라이센스가 다르므로한 번 확인 하시는 것이 좋을 것 같습니다.

 

 

# 사용법

React Icons

 

- 사이트에 접속하면, 아래와 같은 화면을 보실 수 있습니다. 기본적인 설치 방법은 Home 탭에서 확인이 가능하며, 검색 바를 활용해서 전체 검색을 하실 수도 있습니다.

 

 

-  그리고 아래와 같이 모듈로 설치해서 사용하시면 됩니다. 만약 모듈로 설치하기가 싫고, 특정 아이콘 라이브러리만 활용하고 싶다면, 개별 아이콘 라이브러리의 사이트도 링크가 되어 있으므로, 해당 아이콘 라이브러리의 사이트에서 아이콘 파일을 다운로드 받으셔도 됩니다.

yarn add react-icons

- 모듈로 설치해서 사용하시는 경우에는 사용하는 아이콘만 포함시키기 위해서 아래와 같이 사용해주시면 됩니다

import { FaBeer } from 'react-icons/fa'; //fa는 FontAwesome
class Question extends React.Component {
  render() {
    return <h3> Lets go for a <FaBeer />? </h3>
  }
}

---