[React] 리액트에서 Fontawesome 사용하기

React에서 Fontawesome 을 사용하는 방법에 대해 알아보자.

 

 

1. font-awesome 설치

 

다음은 무료 아이콘들 종류를 모두 모아 놓은 것이다.

npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons

 

 

2. 파일에 import 하기

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faSearch } from "@fortawesome/free-solid-svg-icons";

Search 아이콘을 사용한다는 가정하에 위 처럼 "faSearch"를 import하고,

solid / regular / light / duotone 에 따라서 @ 뒤를 바꿔준다.

 

 

3. 아이콘 사용하기

 

<FontAwesomeIcon icon={faSearch}/>

 

 

참고링크

https://fontawesome.com/v5/docs/web/use-with/react#icon-syntax