[React] 리액트에서 폰트어썸(Font Awesome)사용하기

1. 패키지설치

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

yarn add @fortawesome/fontawesome-svg-coreBASH

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

yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/free-regular-svg-icons
yarn add @fortawesome/free-brands-svg-iconsBASH

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

yarn add @fortawesome/react-fontawesomeBASH

 

2. 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";JAVASCRIPT

 

3. 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} />;JAVASCRIPT

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

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