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가지 방법이 있습니다.
개별 사용
아이콘을 각 컴포넌트에서 불러와 사용합니다.
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'
// Coffee 아이콘
const coffeeIcon = <FontAwesomeIcon icon={faCoffee} />
글로벌 사용
프로젝트에서 2개 이상의 컴포넌트에서 아이콘을 사용할 수 있습니다. 개별 사용 방법은 각 컴포넌트에서 아이콘을 가져와 사용해야 하므로 반복된 작업에 매우 지루할 수 있습니다. 이런 경우 한 번만 추가 등록해 반복된 작업 없이 사용하는 방법을 선택해 활용할 수 있습니다.
글로벌 라이브러리 등록 방법은 코어에서 library 모듈을 추출한 다음 아이콘을 등록(add) 합니다.
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 속성에 등록 된 아이콘 이름을 설정합니다.
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'])
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" />
참고
