[react]React에서 Font Awesome 사용하기

1. npm으로 설치하자.

// 핵심 기능이 담긴 SVG Core package
npm i --save @fortawesome/fontawesome-svg-core

// 설치를 원하는 icon package (아래의 경우 무료 solid icon)
npm i --save @fortawesome/free-solid-svg-icons

// Font Awesome을 react component 형태로 사용하게 하는 package
npm i --save @fortawesome/react-fontawesome@latest
여러 icon package를 한꺼번에 받으려면 아래처럼 쓸 수 있다.

npm i --save @fortawesome/free-solid-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-brands-svg-icons

2. React Component 형태로 사용하자.

사용을 원하는 component에서 Font Awesome을 react component 형태로 사용하기 위한 패키지를 import를 해주자.

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

2. 필요한 icon을 import 하자.
   마지막으로 Font Awesome에서 필요한 icon을 찾았다면, 해당 package에서 icon을 import 해준다.
   icon 이름은 fa-coffee를 faCoffee 형태로 바꾸어 주면된 다.

// Free solid package의 예시
import { faCoffee } from '@fortawesome/free-solid-svg-icons'

최종 코드는 아래와 같다.

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

// JSX 태그 내
<FontAwesomeIcon icon={faCoffee} />

참고로 icon은 크게

Solid, Regular, Light, Thin, Duotone
총 5개의 pro/free package가 있다.

이 중, free package는 Solid, Regular이다. 필요에 따라 package를 선택하여 설치하면 되겠다.