React에서 Font Awesome 사용방법

처음 Font Awesome을 알게되고, html, css, javascript 파일구조에서 사용할때는 태그형식으로 사용할 수 있었다.

<i class="fas fa-camera"></i>

React를 베이스로 진행된 프로젝트에서 Font Awesome 아이콘을 사용할 일이 있었는데, 사용이 안되어 당황해서 찾아보니 리액트에서 사용할 수있게 해주는 모듈이 별도로 있었다는 것을 알고 해결 할 수있었다.

 

조금 지나면 까먹을까봐 사용방법 기록 끄적끄적.

 

1.Font Awesome의 SVG 아이콘을 불러 오는 패키지 설치

npm i @fortawesome/fontawesome-svg-core

2.사용할 아이콘종류에 대한 패키지 설치

npm i @fortawesome/free-solid-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-brands-svg-icons

3.Font Awesome을 React에서 사용할 수 있게 해주는 패키지 설치

npm i @fortawesome/react-fontawesome

4.사용하려는 리액트 페이지에서 모듈 사용을 위해 위에서 설치한 모듈을 불러오기

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; //리액트에서 사용가능하게 해줌
import { faHeart } from "@fortawesome/free-solid-svg-icons"; //내가 사용할 아이콘을 불러오기

5.FontAwesomeIcon 컴포넌트 불러와서 렌더링하여 사용하기

export const App = () => {
  return(
      <FontAwesomeIcon icon={faHeart}/>   //props로 faHeart를 내려준다
  )
}

6.완료