Font Awesome 6 사용하기

준비물

• Gatsby v5 웹사이트: Gatsby로 만든 웹사이트가 필요하다. 프로젝트 생성 방법은 다음 문서를 참고한다. → Gatsby Quick Start
• Font Awesome 사용 계획:
  • 6 버전 사용: 최신 버전인 6 버전을 사용할 계획이어야 한다. 5 버전과 일부 기능과 선택할 수 있는 아이콘이 다르다. 참고 Versions of Font Awesome
  • SVG+JS 방식 사용: 리액트 컴포넌트를 SVG로 변환하는 방식을 사용한다. WebFonts+CSS 방식을 사용하기 위한 설정은 이 글에서 설명하지 않는다. 참고 Web Fonts vs SVG
  • 무료 아이콘만 사용: 유료 아이콘을 사용하려면 추가 설정이 필요하다. 이 글에서는 무료 아이콘만 사용한다.

Font Awesome 공식 패키지 설치하기

Font Awesome은 다양한 개발 환경에서 사용할 수 있다. 그 중 React, Angular, Vue 등 자바스크립트 기반 개발 환경에서 사용할 수 있는 npm 패키지를 @fortawesome 네임스페이스(스코프)로 묶어서 제공한다.
네임스페이스는 @fontawesome이 아닌 @fortawesome다. 이름의 유래는 Font Awesome? Fort Awesome? 섹션에서 설명한다.

1. Gatsby는 React 기반이기 때문에 React 전용 react-fontawesome 패키지를 설치한다.

   FontAwesomeIcon 컴포넌트로 아이콘을 추가할 수 있게 된다.

   npm i @fortawesome/react-fontawesome

2. SVG 아이콘을 만들기 위한 핵심 기능이 있는 fontawesome-svg-core 패키지를 설치한다.
   어떤 역할을 하는지 궁금하다면 → SVG Core

   npm i @fortawesome/fontawesome-svg-core

3. 무료 아이콘용 npm 패키지는 Regular, Solid, Brands 3개가 있다. 사용할 아이콘이 속한 패키지만 골라 설치한다.

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

4. package.json 파일을 보면 설치한 모든 Font Awesome 패키지를 확인할 수 있다.

   {
       "dependencies": {
           "@fortawesome/fontawesome-svg-core": "^6.4.0",
           "@fortawesome/free-brands-svg-icons": "^6.4.0",
           "@fortawesome/free-regular-svg-icons": "^6.4.0",
           "@fortawesome/free-solid-svg-icons": "^6.4.0",
           "@fortawesome/react-fontawesome": "^0.2.0"
       }
   }

정적 사이트 생성을 위한 추가 설정하기

Gatsby는 정적 사이트 생성기 ^{Static Site Generator}이다. 웹사이트를 빌드하면 각 웹페이지를 HTML로 만드는데 이 때문에 Font Awesome 아이콘 이미지가 크게 표시되는 버그가 생긴다. 이를 방지하기 위해 간단한 설정 코드를 추가해야 한다.

원인과 설정의 역할은 다음 글에서 설명한다. → Font Awesome 아이콘 크기 버그 해결

1. 만약 프로젝트 루트에 gatsby-browser.tsx 파일이 없다면 만들고,
2. 이 파일에 아래 코드 3줄을 추가하면 된다.

import '@fortawesome/fontawesome-svg-core/styles.css'
import { config } from '@fortawesome/fontawesome-svg-core'
config.autoAddCss = false

사용할 아이콘 검색하기

설치 후 사용할 아이콘을 선택한다.

1. 브라우저에서 Font Awesome 검색 페이지를 방문한다. Font Awesome 아이콘은 Classic, Sharp, Brands 패밀리가 있다. 이 중 Classic 패밀리의 Regular, Solid 스타일과 Brands 패밀리가 무료이고, 이전에 설치한 npm 패키지도 이에 맞춰 3개로 나뉘어져 있었다.

   

2. 아이콘을 검색하거나 카테고리를 선택한다. Free 버튼을 누르면 무료 아이콘만 검색 결과에 나온다.

   

3. 선택한 아이콘 상세 화면에서 React 탭을 누르면 3가지 임포트 방식을 볼 수 있다. 이 중에서 원하는 임포트 방식을 선택한 후에 보이는 코드를 클릭해서 클립보드에 코드를 복사할 수 있다. 사용하려는 컴포넌트에 코드를 붙여넣기 한다.

   

React 프로젝트에서 Font Awesome 아이콘을 추가하는 3가지 방식

React 프로젝트에서 Font Awesome 아이콘은 <FontAwesomeIcon> 컴포넌트를 사용해서 추가할 수 있다. 여기에 사용할 아이콘을 프로퍼티로 지정하면 되는데, 아이콘 임포트 방식에 따라 3가지 나뉜다. 하나의 임포트 방식을 선택하고 프로젝트 전체에서 사용한다.

Individual Import

가장 일반적이고 직관적인 방식이다. 사용할 아이콘이 속한 npm 패키지에서 아이콘을 임포트하고, <FontAwesomeIcon> 컴포넌트 icon 프로퍼티에 값으로 할당한다.

• 장점: 사용한 아이콘만 임포트하기 때문에 번들이 자연스럽게 최적화된다.
• 단점: 사용하는 아이콘을 하나씩 임포트하는 게 번거로울 수 있다.
• 추가 설치와 설정이 필요 없는 이 방식을 사용한다.

import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faHandPeace } from '@fortawesome/free-regular-svg-icons'
 
const ExamplePage: React.FC = () => {
    return (
        <>
            Hello!
            <FontAwesomeIcon icon={faHandPeace}/>
        </>
    );
}
export default ExamplePage

Dynamic Import

Babel Macros 플러그인 설정을 통해 사용할 아이콘을 일일이 임포트할 필요가 없으면서도 사용한 아이콘만 번들에 포함하도록 자동으로 최적화하는 방법이다. <FontAwesomeIcon> 컴포넌트 icon 프로퍼티에 값으로 icon() 함수를 호출한다.

• 장점: 아이콘을 추가하기 쉽고 번들 최적화도 자동으로 된다.
• 단점: 추가 플러그인을 설치하고 설정 파일을 작성해야 한다. 설정 방법은 → Dynamic Icon Importing
• 공식 문서에서 추천하는 방식이다.

import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { icon } from '@fortawesome/fontawesome-svg-core/import.macro'
 
const ExamplePage: React.FC = () => {
    return (
        <>
            Hello!
            <FontAwesomeIcon icon={icon({name: 'hand-peace', style: 'regular'})} />
            {/* Old way: <FontAwesomeIcon icon={regular("hand-peace")} /> */}
        </>
    );
}
export default ExamplePage

Global Import

초기화 모듈에서 사용하는 모든 아이콘을 임포트하고 라이브러리에 등록하면, 아이콘을 사용하는 각 컴포넌트에서는 따로 임포트하지 않아도 되는 방식이다.

• 장점: 여러 컴포넌트에서 사용하는 아이콘을 한 번만 임포트하면 된다.
• 단점: 사용할 아이콘을 등록하는 파일과 실제 사용하는 파일이 분리되어 있기 때문에 관리하기 어렵다. 사용하지 않는 아이콘을 임포트하면 번들 크기가 커져서 성능이 저하될 수 있다.
• 공식 문서에서 추천하지 않는 방식이다.

gatsby-browser.tsx 사용할 모든 아이콘을 라이브러리에 추가한다.

import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { faHandPeace } from '@fortawesome/free-regular-svg-icons'
import { faTwitter, faFontAwesome } from '@fortawesome/free-brands-svg-icons'
 
// fas 를 라이브러리에 추가하면 Classic 패밀리의 Solid 스타일에 속한 모든 아이콘을 번들에 포함하게 됩니다.
// 매우 많은 아이콘이 속해 있기 때문에 사용하는 각 아이콘을 추가하기를 권장해요.
library.add(fas, faHandPeace, faTwitter, faFontAwesome)

<FontAwesomeIcon> 컴포넌트 icon 프로퍼티에 값으로 fa- 로 시작하는 아이콘 클래스 이름을 작성한다. 클래스는 아이콘 패밀리, 스타일, 이름을 나타낸다.

import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { icon } from '@fortawesome/fontawesome-svg-core/import.macro'
 
const ExamplePage: React.FC = () => {
    return (
        <>
            Hello!
            <FontAwesomeIcon icon="fa-regular fa-hand-peace" />
        </>
    );
}
export default ExamplePage

Font Awesome? Fort Awesome?

Font Awesome의 npm 네임스페이스는 @fortawesome다. 프로젝트 이름과 조직 이름의 차이에서 비롯된 표기다.

프로젝트 공식 이름은 Font Awesome이 맞지만 이를 관리하는 조직 이름은 Fort Awesome(=멋진 요새)가 맞다. 이름에 대한 유래는 2023년인 지금으로부터 8~9년 전 프로젝트 개발자인 Dave Gandy가 인터뷰한 기사에서 이유를 찾을 수 있었다.
기사 전문을 보려면 → Awesome Q&A With Font Awesome Developer Dave Gandy

90년대 후반에 한 TV 쇼에서 출연진이 이 이름을 언급했다.

특별한 이름을 가진 무릉도원 같은 집을 갖고 싶었어요. 그래서 Fort Awesome이라고 불렀죠.

Dave Gandy는 추운 겨울 하버드 대학교 캠퍼스를 걷는데 학생들이 골판지 상자로 만든 요새에 "Fort Awesome"이라고 적은 것을 보았다고 한다. 이후 그가 사는 모든 집을 "Fort Awesome"이라고 부르고 직접 찍은 골판지 요새 사진을 걸어 두었다.

자연스럽게 Font Awesome 깃헙 프로젝트 조직도 "Fort Awesome"이라고 부르게 되었다. 여기에서 글자 하나를 바꾼 "Font Awesome"이 아이콘 프로젝트의 이름이 되었다.

참고 자료

이 글에서 참고한 자료는 다음과 같다.

• Font Awesome
• Versions of Font Awesome
• Font Awesome v6 Docs: Set Up with React
• Font Awesome v6 Docs: Use with React - Next.js
• Font Awesome v6 Docs: Add Icons with React
• Font Awesome v6 Docs: Web Fonts vs SVG
• Font Awesome v6 Docs: SVG Core
• npm: @fortawesome/react-fontawesome
• npm: @fortawesome/fontawesome-svg-core
• ImpressPages Blog: Awesome Q&A With Font Awesome Developer Dave Gandy