React에서 Fontawesome 사용하기

시작하기

고해상도의 아이콘을 손쉽게 사용할수 있는 라이브러리입니다.
리액트에서 fontawesome을 사용하겠습니다.

패키지 설치

React-fontawesome 패키지를 설치합니다.
react-fontawesome npm

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

사용하기

Fontawesome사이트에서 사용할 아이콘을 선택합니다. 아이콘의 이름을 기억합니다.

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

library.add(faCoffee)

// Component.tsx
const Component:React.FC = () => {
    return <FontAwesomeIcon icon="coffee"/>    
}

App.tsx 최상단파일에 사용할 아이콘을 @fortawesome/free-solid-svg-icons에서 불러오고
아이콘을 library.add 에 추가합니다.
그러면 자식 컴포넌트에서 아이콘을 사용할수 있습니다.