[React] Font Awesome 설정하기

Font Awesome ?

프로젝트를 하다보면 특정 아이콘이 필요할 때가 있습니다.

그것은 디자이너가 Figma 로 전해줄 수도 있고, 혹은 외부에서 svg 를 다운받아서 직접 설정할 수도 있습니다.

이전 토이프로젝트를 진행할 때, React 가 아닌 간단한 HTML + CSS 로 정적페이지를 만들 때 사용했던 Font Awesome 을 React 에서도 사용할 수 있는 걸 알고있어서 Font Awesome 을 어떻게 사용할 수 있는지 간단하게 남기고자 합니다.

Set Font Awesome

설치 순서는 Font Awesome 의 문서를 참고하였습니다. (6.1.2 버전 기준)

npm install @fortawesome/fontawesome-svg-core

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

npm install @fortawesome/react-fontawesome

1. Core 가 되는 fontawesome-svg-core 설치

2. icons packages 들 설치 ( solid, regular, brands ) - 문서에는 brands 는 없지만 저는 Github icon 을 사용하고 싶기에 추가하였습니다.

3. React 에서 Component 형태로 사용하기 위해 react-fontawesome 설치

Ways to Add Icons

Font Awesome 에서 Icon 을 사용하는 방법이 3가지가 있는데, 우선 Individually 방법으로 먼저 사용해보겠습니다.

0. 사용할 Icon 찾기

Font Awesome 의 홈페이지에서 Icon 을 검색합니다. 그러면 Solid, Regular, Light, Thin, Duotone, Brands 의 탭이 있는데

Light, Thin, Duotone 은 보통 Pro (유료버전) 을 사용해야 사용할 수 있는 탭입니다.

icons 와 관련된 패키지로 free-soild, free-regular, free-brands 를 다운받아 사용중이므로 해당 탭들을 Select 하면 사용할 수 있는 Icon 의 목록이 필터되어 보여집니다.

1. Individually

사용할 수 있는 Icon 을 골랐다면, 해당 Icon 이 어디에 속하는지 확인한 이후 ( github icon 은 brands 에 있음 -> fa-brands )

거기서 import 하여 icon 에 주입하여 사용하면 사용되는 것을 확인할 수 있습니다.

import { faGithub } from '@fortawesome/free-brands-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

import Button from '@components/common/Button';

const LoginPage: React.FC = () => (
  <div>
    <h1>Login Page !</h1>
    <hr />
    <Button
      width="large"
      height="medium"
      color="github"
    >
      <span>Github Login</span>
      <FontAwesomeIcon icon={faGithub} />
    </Button>
  </div>
);

export default LoginPage;

2. Globally

App 과 같은 Entry file 에서 library 에 사용할 Icons 들을 주입해 사용하는 방식입니다.

해당 방법은 번들의 크기가 커질 수 있고, Component 와 Icon 을 관리하는 모듈이 Coupling 되어 Font Awesome 에서도 권장하는 방법이 아니라고 합니다.

필자는 Local 에서 테스트할 때에는 잘 불러왔지만, Storybook 에서 테스트할 때에는 Icon 이 불러와지지 않았습니다.

무언가 모듈간의 충돌로 제대로 불러오지 못한게 아닐까 추측됩니다.

사용하는 Component 에서는 icon 에 string 형식으로 "fa-brands fa-github" 을 주거나, 만약 typescript 를 사용하여 type 에 걸린다면 [prefix, iconName] 을 주어 사용합니다. fa 와 같은 prefix 없이 string 만 주면 모듈 내부코드의 분기에 의해 자동으로 fas 를 prefix 로 사용합니다.

fas 는 fa-solid 를 의미하며 fas 를 주입하면 fa-solid 에 해당하는 모든 icon 을 주입하고, 특정 Icon (faGithub) 만 불러와 주입할 수도 있습니다.

// App
import ReactDOM from 'react-dom'
import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { faGithub } from '@fortawesome/free-brands-svg-icons'

library.add(fas, faGithub)

// Page
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

import Button from '@components/common/Button';

const LoginPage: React.FC = () => (
  <div>
    <h1>Login Page !</h1>
    <hr />
    <Button width="large" height="medium" color="github">
      <span>Github Login</span>
      <FontAwesomeIcon icon="fa-brands fa-github" />
      // OR <FontAwesomeIcon icon={['fab', 'github']} />
      
      // fas 를 주입했기에 fa-solid 관련 Icon 도 사용 가능
      // <FontAwesomeIcon icon="book" />
    </Button>
  </div>
);

export default LoginPage;

3. Dynamic Icon Import

마지막으로 Babel-macro 와 함께 사용하여 사용하는 방법입니다.

구성 요소에서 사용 중인 아이콘만 자동으로 포함하여 최종 번들을 최적화합니다.

문서에서도 가장 먼저 소개할 만큼 해당 방법을 권장하는 것으로 생각됩니다.

CRA 로 만든 리액트 프로젝트에서는 babel-plugin-macros 를 기본으로 사용하고 있기 때문에 별도의 설치를 해주지 않아도 됩니다.

만약 CRA 가 아닌 직접 React 환경을 구축했다면 babel-plugin-macros 를 설치하여 사용합니다.

3-0. babel-macro 설치

npm install babel-plugin-macros

3-1. macro config 설정

프로젝트의 root directory 에 config 파일을 생성합니다.

파일 명은 .babel-plugin-macrosrc.json 로 하겠습니다.

{
  "fontawesome-svg-core": {
    "license": "free"
  }
}

3-2. 사용

App 에서 Globally 하게 import 했던 것을 모두 지웠습니다.

사용하는 Component 에서 어떤 prefix 를 사용할 것인지 불러와 이름을 붙여 사용합니다

import { brands } from '@fortawesome/fontawesome-svg-core/import.macro';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

import Button from '@components/common/Button';

const LoginPage: React.FC = () => (
  <div>
    <h1>Login Page !</h1>
    <hr />
    <Button width="large" height="medium" color="github">
      <span>Github Login</span>
      <FontAwesomeIcon icon={brands('github')} />
    </Button>
  </div>
);

export default LoginPage;

import.macro 는 에서 brands 를 불러와 사용하면 내부적으로 free-brands-svg-icons 를 불러와 사용합니다.

brands 와 마찬가지로 solid, regular 를 불러와 사용할 수 있습니다.