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) 합니다.
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)글로벌 등록 된 아이콘은 개별 사용 때처럼 별도 불러오기 없이 사용할 수 있습니다. 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" /> 참고
Last updated
Was this helpful?