[리액트] 리액트 font Awesome 등 아이콘 적용하기

react-icon
- React 프로젝트에서 아이콘을 쉽게 사용 할수 있도록 도와주는 라이브러리
- [github] https://react-icons.github.io/react-icons/

 

라이브러리 설치

npm install react-icons --save

 

사용법

1) react-icons에 들어가서 search탭에 원하는 아이콘을 검색 후 원하는 아이콘 클릭하여 복사

react-icon 깃허브페이지

2) 해당 아이콘을 넣고 싶은 페이지에 import 

import { FaRegBookmark } from "react-icons/fa";
import { FaBookmark } from "react-icons/fa";

// import {아이콘이름} from "react-icons/아이콘이름앞두자리";

3) 아이콘 넣고 싶은 위치에 컴포넌트 형태로 입력

 <div className="bookmark-area">
   <Button onClick={() => handleBookmarkClick()} variant="success">
	{isBookmarked ? <FaBookmark /> : <FaRegBookmark />}
    </Button>
 </div>

4) 끝~!

북마크 버튼