[React.js] React에서 Font Awesome 사용하기

Font Awesome은 웹에서 아이콘이 필요할 때 가장 많이 사용되는 라이브러리 중 하나이다.

React에서 Font Awesome을 사용하는 방법을 알아보자

 

패키지 설치

아래 세 가지 패키지를 모두 설치해주어야한다.

첫 번째는 SVG 기반 아이콘 활성화를 위한 패키지이며

두 번째는 무료로 제공되는 Solid, Regular, Brand 3개의 카테고리에 대한 패키지를 설치하겠다는 의미이다.

마지막은 Font Awesome을 리액트 컴포넌트 형태로 사용할 수 있게 해주는 패키지이다.

npm i @fortawesome/fontawesome-svg-core

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

 npm i @fortawesome/react-fontawesome

---

아이콘 import

https://fontawesome.com/ 에서 사용할 아이콘을 찾아 해당 아이콘을 import하여 사용할 수 있다.

예를 들어, Solid 카테고리에서 pen 아이콘을 사용하고 싶다면 다음과 같이 코드를 작성한다.

import { faPen } from "@fortawesome/free-solid-svg-icons";

---

React 컴포넌트로 사용하기

FontAwesomeIcon 컴포넌트를 import 받아 icon prop에 사용할 아이콘을 넣어주면된다.

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

<FontAwesomeIcon icon={faPen} />

---