[TIL] 리액트에서 FontAwesome 사용하기

1. npm 사용하여 패키지 설치

$ npm i @fortawesome/fontawesome-svg-core
// 무료아이콘만 설치 (solid, regular, brands)
$ npm i @fortawesome/free-solid-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-brands-svg-icons
// 리액트 컴포넌트 형태로 사용할 수 있게 변경
$ npm i @fortawesome/react-fontawesome

2. 쓰고 싶은 js에서 임포트하기

import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

3. 컴포넌트 형태로 사용하고 props에 쓰고 싶은 아이콘 넣어주기

<FontAwesomeIcon icon={faArrowRight} size="2x" />

쓰고 싶은 icon value에 FontAwesome 참고해서 카멜케이스로 임포트 해주면 된다

import {
  faArrowRight,
  faAlignLeft,
  faAd,
  faHeart,
} from '@fortawesome/free-solid-svg-icons';


<FontAwesomeIcon icon={faAlignLeft} size="2x" />
<FontAwesomeIcon icon={faAd} size="2x" />
 <FontAwesomeIcon icon={faHeart} size="2x" />