React에서 Font Awesome을 사용해 보자!
// 핵심 기능이 담긴 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
사용을 원하는 component에서 Font Awesome을 react component 형태로 사용하기 위한 패키지를 import를 해주자.
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
마지막으로 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은 크게
총 5개의 pro/free package가 있다.
이 중, free package는 Solid, Regular이다. 필요에 따라 package를 선택하여 설치하면 되겠다.
[참고] https://fontawesome.com/v6/docs/web/use-with/react/#contentHeader