React에서 Font Awesome 사용하기

Font Awesome은 웹에서 아이콘이 필요할 때 가장 많이 사용되는 라이브러리 중에 하나입니다. 이번 포스팅에서는 React 앱에서 Font Awesome을 사용하는 방법에 대해서 알아보도록 하겠습니다.

React와 무관한 Font Awesome 자체에 대한 설명은 관련 포스팅를 참고 바랍나다.

Font Awesome 5의 SVG 지원

Font Awesome 4 대비 Font Awesome 5의 가장 강력한 부분은 SVG 기반 아이콘을 지원한다는 것입니다. 즉, 기존에 웹폰트를 기반으로 하는 <i/> 태그 대신에 SVG 기반인 <svg/> 태그가 사용됩니다. SVG 기반 아이콘이 기능이나 성능적인 측면에서 유리한 점이 많기 때문에 최근 프로젝트에서는 SVG 기반 아이콘이 점점 더 많이 사용되는 추세입니다. 따라서 본 포스팅에서도 Font Awesome 5를 기반으로 설명하는 만큼 장점을 살려 SVG 기반 아이콘을 사용하도록 하겠습니다.

관련 패키지 설치

먼저 Font Awesome의 SVG 기반 아이콘을 활성화 시키기 위한 기본 패키지인 @fortawesome/fontawesome-svg-core 설치합니다.

$ npm i @fortawesome/fontawesome-svg-core

그 다음 Font Awesome 아이콘 대한 패키지를 설치해야 합니다. Solid, Regular, Light, Brands 4개의 카테고리와 유/무료 여부에 따라 여러개의 패키지가 존재하는데요. 여기서는 무료로 제공되는 Solid, Regular Brands 3개의 카테고리에 대한 패키지만 설치하겠습니다. (항상 3개를 다 설치할 필요는 없고 사용하시고 싶은 아이콘이 속한 카테고리만 설치하시면 됩니다.)

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

마지막으로 Font Awesome을 React 컴포넌트 형태로 사용할 수 있도록 해주는 @fortawesome/react-fontawesome 이라는 패키지는 설치합니다.

$ npm i @fortawesome/react-fontawesome

Font Awesome 아이콘 임포트 하기

웹에서 바로 Font Awesome를 사용하면 일반적으로 수천개에 달하는 아이콘을 모두 로드해야 되서 비효율이 발생합니다. 하지만 JavaScript 기반인 React에서 사용할 때는 특정 카테고리에서 필요한 아이콘만 임포트할 수 있다는 장점이 있습니다.

예를 들어, Solid 카테고리에서 check-square와 spinner 아이콘을 임포트하고, Regular 카테고리에서는 square 아이콘을 임포트하고 싶다면 다음과 같이 코딩하면 됩니다.

import { faCheckSquare, faSpinner } from "@fortawesome/free-solid-svg-icons";
import { faSquare } from "@fortawesome/free-regular-svg-icons";

React 컴포넌트로 사용하기

@fortawesome/react-fontawesome 패키지를 사용하고 있기 때문에 아이콘을 사용할 때 직접 <svg/> 태그를 사용할 필요는 없습니다. 대신에 이 패키지에서 제공하는 FontAwesomeIcon 컴포넌트에 위에서 임포트한 Font Awesome 아이콘을 icon prop으로 넘겨주면 됩니다.

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

export default () => <FontAwesomeIcon icon={faCamera} />;

FontAwesomeIcon 컴포넌트는 icon prop외에도 아이콘을 제어하기 위한 여러 가지 prop을 가지고 있습니다. 예를 들어, 아이콘의 크기를 2배로 늘리고 싶으면 다음과 같이 size prop에 2x를 넘기면 됩니다.

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

데모

그 밖에도 FontAwesomeIcon 컴포넌트에는 fixedWidth, inverse, listItem, rotation, flip, spin, purse, border, pull 등 다양한 prop가 존재합니다. 각각의 prop 사용법은 아래 데모 프로젝트를 참고하시면 금방 파악이 되실 겁니다.