React: React에서 Font Awesome 사용하기

summereuna🐥·2022년 6월 20일

fontawesome

React JS

목록 보기

20/69

React | Font Awesome Docs

React에서 Font Awesome을 시작하려면 npm 및 yarn 같은 패키지 관리자를 사용하여 패키지를 설치해야 한다.

01. 세팅

SVG + JS 메서드를 사용하여 아이콘을 렌더하는 방식(v.6.1.1.)

1. SVG Core 추가하기

먼저 npm을 사용하여 아이콘을 작동시키는 모든 유틸리티를 포함하는 핵심 패키지를 설치해야 한다.

`SVG + JS method`를 사용하여 아이콘을 렌더해 보자. _(v.6.1.1.)_

2. 아이콘 패키지 추가하기

사용 하려는 무료/프로 아이콘 패키지를 설치하면 된다.

Pro 아이콘의 경우 먼저 비밀 Font Awesome npm 토큰과 글로벌 또는 프로젝트별 액세스를 설정해야 한다.

# Free icons styles
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons

# Pro icons styles
npm i --save @fortawesome/pro-solid-svg-icons
npm i --save @fortawesome/pro-regular-svg-icons
npm i --save @fortawesome/pro-light-svg-icons
npm i --save @fortawesome/pro-thin-svg-icons
npm i --save @fortawesome/pro-duotone-svg-icons

3. 리액트 컴포넌트 추가하기

폰트아썸 리액트 컴포넌트를 설치한다.

npm i --save @fortawesome/react-fontawesome@latest

요약

아래 처럼 각 패키지 관리자를 사용하여 필요한 모든 항목과 무료 solid 아이콘 스타일을 설치하면 된다.

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

02. 아이콘 추가하기

React 프로젝트에 아이콘을 추가하는 데는 몇 가지 방법이 있다. 프로젝트에 적합한 옵션을 선택한 다음 FontAwesome을 사용하여 UI에 아이콘을 추가하면 된다.

난 지금 individually 옵션을 사용하는 중인데 아래 표의 단점에서 말하는 것 처럼 아주 귀찮다..🥲

옵션	이점	단점
Dynamit Icon Import	구성요소에 사용 중인 아이콘만 자동으로 포함시켜 최종 번들을 최적화한다. 즉, 사용하는 아이콘만 번들에 포함된다.	바벨 매크로를 추가하고 구성해야 한다.
Individually	아이콘을 부분 집합화하여 최종 번들을 최적화할 수 있다. 즉, 가져오는 아이콘만 번들에 포함된다.	프로젝트의 많은 컴포넌트 각각에 아이콘을 명시적으로 가져오는 작업을 해야 한다.🥲
Globally	아이콘을 init 모듈에서 한 번만 개별적으로 가져오기 - 일단 아이콘을 라이브러리에 추가한 후에는 각 구성 요소로 가져올 필요가 없다.	사용하지 않고 성능에 영향을 줄 수 있는 파일을 포함할 수도 있다. 즉, 앱이 무거워 진다.

🔥 동적 아이콘 가져오기(Dynamic Icon Importing)

가장 쉬운 방법은 사용 중인 아이콘과 사용 중인 아이콘만 자동으로 가져오는 동적 아이콘 가져오기(Dynamic Icon Importing)를 사용하는 것이다.

동적 아이콘 가져오기를 사용하면 개별 아이콘을 선언할 필요가 없으므로 아이콘을 추가하고 사용하지 않는 아이콘을 추적하는 시간을 절약할 수 있다. 이 작업은 javascripter의 babel 매크로 플러그인을 기반으로 한다.

1. 바벨 매크로 설치하기

npm install babel-plugin-macros

2. 바벨 Configs 셋업하기

그런 다음 바벨 플러그인을 구성해야 한다. 아래 내용을 babel.config.js 파일에 추가하면된다.

module.exports = function (api) {
  return {
    plugins: ['macros'],
  }
}

그런 다음 babel-plugin-macros.config.js 파일을 만들고 fontawesome-svg-core 설정을 추가하면 된다.
사용하려는 아이콘에 따라 사용권을 무료 또는 프로로 설정할 수도 있다.

module.exports = {
  'fontawesome-svg-core': {
    'license': 'free'
  }
}

3. 내 프로젝트에 아이콘 추가하기

그런 다음 프로젝트에 아이콘을 표시할 위치에 아래 구문을 사용하여 아이콘을 추가할 수 있다.

다음은 솔리드 스타일, 일반 스타일, 브랜드 스타일을 가져온 다음 coffee 아이콘과 user-secret 아이콘과 트위터 아이콘을 앱 UI에 추가하는 예이다.

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { solid, regular, brands } from '@fortawesome/fontawesome-svg-core/import.macro' // <-- import styles to be used

<FontAwesomeIcon icon={solid('user-secret')} />
<FontAwesomeIcon icon={regular('coffee')} />
<FontAwesomeIcon icon={brands('twitter')} />

4. (참고) 스타일링 옵션

스타일링 옵션

🔥 개별 아이콘 명시적으로 추가하기(Add Individual Icons Explicitly)

동적 아이콘 가져오기 방법을 사용할 수 없거나 사용하지 않으려는 경우 각 컴포넌트에 개별 아이콘을 명시적으로 추가하면 된다.

import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'

const element = <FontAwesomeIcon icon={faCoffee} />

ReactDOM.render(element, document.body)

(참고) faCoffee 아이콘은 @fortawesome/free-solid-svg-icons에서 객체(object)로 가져온 후 객체인 아이콘 prop으로 제공된다.

🔥 전역으로 아이콘 추가하기(Add Icons Globally) (❌ 비추)

이 방법은 추천하지 않는다고 한다. 아이콘을 전역으로 가져오면 사용하지 않는 아이콘이 있는 번들의 크기가 커질 수 있기 때문이다. 또한 내 컴포넌트들을 아이콘을 관리하는 다른 모듈과 연결한다.

여튼 전역으로 아이콘을 추가하는 방법은 다음과 같다.

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

library.add(fas, faTwitter, faFontAwesome)

library.add()를 호출하면 다음과 같은 내용을 패스할 수 있다.

fas
: @for twoesome/free-solid-svg-icons에 있는 모든 아이콘을 나타낸다.
(❗️ 아이콘이 많기 때문에 전체 스타일을 가져오는 데 주의해야 한다.)
따라서 해당 패키지의 아이콘은 앱의 다른 위치에서 문자열로 아이콘 이름으로 참조될 수 있다.
예를 들어 coffee, check-square, 혹은 spinner.
faTwitter 및 faFontAsome
: 이러한 브랜드 아이콘을 개별적으로 추가하면 icon string names, twitter 및 font-awesome로 앱 전체에서 해당 아이콘을 참조할 수 있다.

그러면 각 컴포넌트로 다시 가져올 필요 없이 앱의 모든 위치에서 이러한 아이콘을 사용할 수 있다. 따라서 몇 가지 구성 요소에 아이콘을 사용하면 다음과 같이 된다.

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

export const Beverage = () => (
  <div>
    <FontAwesomeIcon icon="fa-solid fa-check-square" />
    Your <FontAwesomeIcon icon="fa-regular fa-coffee" /> is hot!
  </div>
)

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

export const Showcase = () => (
  <div>
    <FontAwesomeIcon icon="fa-brands fa-twitter" />
    <FontAwesomeIcon icon="fa-brands fa-font-awesome" />

    <FontAwesomeIcon icon="fa-regular fa-mug-hot" />
    The coffee is ready at these companies!
  </div>
)