React에서 Font Awesome 사용하기

Font Awesome 이란?

Font Awesome은 웹페이지에서 소개된 바와 같이 인기있는 아이콘 세트 및 툴킷이라고 합니다. svg로 된 아이콘을 무료로 제공하여 사용 할 수 있습니다. react-fontawesome패키지를 이용하겠습니다.

설정방법

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

Font Awesome을 사용하려면 3개의 패키지를 설치해야합니다. @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome를 위 코드를 이용하여 한 번에 설치 합니다.

src/경로에 FontAwesome.tsx파일을 생성합니다.

jsx

import { library } from '@fortawesome/fontawesome-svg-core';
import { faSmile } from '@fortawesome/free-solid-svg-icons';

library.add(faSmile);

library에 사용할 icon을 추가합니다. @fortawesome/free-solid-svg-icons에서 사용 가능 한 아이콘을 선택해야합니다. smile 아이콘을 사용하려면 faSmile을 패키지에서 불러온 후 library에 추가합니다.

jsx

import './FontAwesome';

index.tsx에서 FontAwesome파일을 추가합니다.

jsx

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

<FontAwesomeIcon icon="smile" size="7x"/>

사용 할 파일에서 FontAwesomeIcon을 불러온 후 icon의 이름으로 smile을 사용하면 다음과 같이 svg icon을 사용 할 수 있습니다.