폰트 어썸(Font Awesome) 사용하기

리액트 환경에서 폰트 어썸 아이콘을 사용하는 방법을 정리해본다.

 

1. 라이브러리 설치

 SVG 기반의 아이콘 사용을 위한 패키지와, 폰트 어썸에서 무료로 제공하는 Solid, Regular 패키지 마지막으로 폰트 어썸을 리액트 컴포넌트로 사용할 수 있게 해주는 패키지를 순서대로 설치한다.

npm i @fortawesome/fontawesome-svg-core
npm i @fortawesome/free-solid-svg-icons @fortawesome/free-regular-svg-icons
npm i @fortawesome/react-fontawesome

 

2. 아이콘 찾기

 사용하고자 하는 아이콘을 여기에서 찾고 아이템 이름을 확인한다. Global, Individual Import에 따라 사용할 수 있는 태그를 바로 확인할 수 있으니 복붙해도 된다.

 

3. 아이콘 import

 아이콘을 사용하고자 하는 파일 상단에 사용하기로한 아이콘과 리액트 폰트어썸을 import 한다.

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

 

 

4. 컴포넌트 적용

 아이콘을 배치하고자 하는 위치에 아래 태그를 넣으면 아이콘이 출력된다.

<FontAwesomeIcon icon={faHouse} />

 

 

5. 스타일 추가하기

일반적으로 아이콘을 배치하는 것 외에 다양한 Props가 있다.

 

a) 사이즈

 티셔츠 사이즈 스케일로 쓰이는 2xs부터 2xl 또는 1x에서 10x 형태로 사이즈 설정이 가능하다.

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

 

b) 애니메이션

 정적인 아이콘에 beat, beatFade, bounce, fade, flip, shake, spin 등의 동적인 애니메이션을 추가해서 보다 생동감있게 출력할 수 있다.

<FontAwesomeIcon icon={faHeart} size="2x" beat />
<FontAwesomeIcon icon={faHeart} size="lg" bounce />

 

이외 다양한 스타일 옵션은 여기에서 확인해보길 바란다.