FontAwesome for React

폰트 어썸~! React 컴포넌트 활용

Font Awesome은 공식적으로 React 애플리케이션에서 아이콘을 멋지게 활용 할 수 있는 컴포넌트를 제공합니다.

패키지 설치

React에서 FontAwesome 컴포넌트를 사용하기 위해 필요한 각 패키지를 설치합니다. (솔리드 아이콘 설치)

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

그리고 필요한 경우 브랜드, 레귤러 아이콘 (무료) 아이콘을 추가 설치합니다.

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

Pro 아이콘

"prop-" 접두사가 붙은 FontAwesome 패키지는 구매 후 사용 가능합니다.

npm i @fortawesome/pro-solid-svg-icons \
      @fortawesome/pro-brands-svg-icons \
      @fortawesome/pro-regular-svg-icons \
      @fortawesome/pro-duotone-svg-icons      

아이콘 사용 방법

프로젝트에 필요한 모든 패키지를 설치했으면 Font Awesome을 React와 함께 사용할 수 있는 2가지 방법이 있습니다.

타입	장점	단점
개별 사용	최종 번들 최적화 (사용한 아이콘만 번들)	사용할 때 마다 아이콘을 불러와야 함
글로벌 사용	init 모듈에서 아이콘을 한 번만 가져 옴	사용하지 않는 아이콘도 번들에 포함 됨

개별 사용

아이콘을 각 컴포넌트에서 불러와 사용합니다.

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

// Coffee 아이콘
const coffeeIcon = <FontAwesomeIcon icon={faCoffee} />

글로벌 사용

프로젝트에서 2개 이상의 컴포넌트에서 아이콘을 사용할 수 있습니다. 개별 사용 방법은 각 컴포넌트에서 아이콘을 가져와 사용해야 하므로 반복된 작업에 매우 지루할 수 있습니다. 이런 경우 한 번만 추가 등록해 반복된 작업 없이 사용하는 방법을 선택해 활용할 수 있습니다.

글로벌 라이브러리 등록 방법은 코어에서 library 모듈을 추출한 다음 아이콘을 등록(add) 합니다.

App.js

import { fab } from '@fortawesome/free-brands-svg-icons'
import { faCheckSquare, faCoffee } from '@fortawesome/free-solid-svg-icons'
import { library } from '@fortawesome/fontawesome-svg-core'

// 라이브러리에 등록
library.add(fab, faCheckSquare, faCoffee)

fab는 모든 브랜드(예: apple, microsoft, google 등) 아이콘을 말하며, 모든 브랜드 아이콘을 라이브러리에 등록합니다. 반면 faCoffee, faCheckSquare는 개별 솔리드 아이콘을 지칭하며 선택적으로 등록합니다.

글로벌 등록 된 아이콘은 개별 사용 때처럼 별도 불러오기 없이 사용할 수 있습니다. FrontAwesomeIcon 컴포넌트를 불러와 icon 속성에 등록 된 아이콘 이름을 설정합니다.

Beverage.js

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

// Beverage 컴포넌트
export const Beverage = () => (
  <div className="beverage">
    <FontAwesomeIcon icon="check-square" />
    따뜻한 <FontAwesomeIcon icon="coffee" />가 준비되었어요!
  </div>
)

Showcase 컴포넌트는 브랜드 아이콘과 체크 스퀘어 솔리드 아이콘을 사용합니다. 모든 브랜드 아이콘이 라이브러리에 등록되어 있으므로 별도 불러오기 없이 apple, microsoft, google 브랜드 아이콘을 바로 사용할 수 있습니다.

기본 값으로 추론되는 솔리드(fas) 타입과 달리, 브랜드(fab) 타입은 명시적이어야 합니다. 명시적으로 사용할 fab 타입을 설정하려면 icon 속성에 다음과 같이 배열을 사용해야 합니다. (예: ['fab', 'samsung'])

Showcase.js

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

// Showcase 컴포넌트
export const Showcase = () => (
  <div className="showcase">
    <FontAwesomeIcon icon={['fab', 'apple']} />
    <FontAwesomeIcon icon={['fab', 'microsoft']} />
    <FontAwesomeIcon icon={['fab', 'google']} />

    <FontAwesomeIcon icon="check-square" />
    고객사에 가면 항상 따뜻한 커피가 준비 되어 행복합니다. 😍
  </div>
)

아이콘 구문

앞서 소개한 아이콘 컴포넌트 사용법은 HTML에서의 사용법과는 다릅니다.

// [개별 사용] 불러온 faCoffee 모듈 설정
<FontAwesomeIcon icon={faCoffee} />

// [글로벌 사용] 솔리드(fas) 타입 암시적 사용
<FontAwesomeIcon icon="coffee" />
// [글로벌 사용] 솔리드(fas) 타입 명시적 사용
<FontAwesomeIcon icon={['fas', 'coffee']} />
// [글로벌 사용] 레귤러(far) 타입 명시적 설정
<FontAwesomeIcon icon={['far', 'coffee']} />

커스텀 클래스 설정

className 속성을 사용해 스타일링을 목적으로 하는 커스텀 클래스 이름을 추가할 수 있습니다.

<FontAwesomeIcon icon="spinner" className="highlight" />

아이콘 검색

무료 아이콘을 키워드로 검색해 찾을 수 있습니다.

아이콘 크기

아이콘 Size 설정 방법은 다음과 같습니다.

<FontAwesomeIcon icon="coffee" size="xs" />
<FontAwesomeIcon icon="coffee" size="lg" />
<FontAwesomeIcon icon="coffee" size="6x" />

고정 너비 아이콘

아이콘 Fixed Width 설정 방법은 다음과 같습니다.

<FontAwesomeIcon icon="coffee" fixedWidth />

반전 아이콘

아이콘 Inverse 설정 방법은 다음과 같습니다.

<FontAwesomeIcon icon="coffee" inverse />

리스트 아이콘

리스트 아이콘을 설정하는 방법은 다음과 같습니다.

<FontAwesomeIcon icon="coffee" listItem />

회전 아이콘

회전 아이콘을 설정하는 방법은 다음과 같습니다.

<FontAwesomeIcon icon="coffee" rotation={90} />
<FontAwesomeIcon icon="coffee" rotation={180} />
<FontAwesomeIcon icon="coffee" rotation={270} />

플립 아이콘

아이콘을 수평(horizontal), 수직(vertical) 또는 양 방향(both)으로 설정하는 방법은 다음과 같습니다.

<FontAwesomeIcon icon="coffee" flip="horizontal" />
<FontAwesomeIcon icon="coffee" flip="vertical" />
<FontAwesomeIcon icon="coffee" flip="both" />

애니메이션 아이콘

애니메이션 아이콘 설정 방법은 다음과 같습니다.

<FontAwesomeIcon icon="spinner" spin />
<FontAwesomeIcon icon="spinner" pulse />

보더 아이콘

보더 아이콘 설정 방법은 다음과 같습니다.

<FontAwesomeIcon icon="coffee" border />

풀드 아이콘

풀드(pulled) 아이콘 설정 방법은 다음과 같습니다.

<FontAwesomeIcon icon="coffee" pull="left" />
<FontAwesomeIcon icon="coffee" pull="right" />

트랜스폼 아이콘

트랜스폼 아이콘 설정 방법은 다음과 같습니다.

<FontAwesomeIcon icon="coffee" transform="shrink-6 left-4" />
<FontAwesomeIcon icon="coffee" transform={{ rotate: 42 }} />

마스킹 아이콘

마스킹 아이콘 설정 방법은 다음과 같습니다.

<FontAwesomeIcon icon="coffee" mask={['far', 'circle']} />

레이어 아이콘

레이어 아이콘 설정 방법은 다음과 같습니다.

<span className="fa-layers fa-fw">
  <FontAwesomeIcon icon="square" color="green" />
  <FontAwesomeIcon icon="check" inverse transform="shrink-6" />
</span>

SVG 스프라이트 아이콘

SVG 스프라이트 아이콘 설정 방법은 다음과 같습니다.

<FontAwesomeIcon icon="coffee" symbol />
<FontAwesomeIcon icon="coffee" symbol="beverage-icon" />

참고

https://fontawesome.com/how-to-use/on-the-web/using-with/reactfontawesome.com