[React.js] 리액트에서 fontawesome 쓰는 법

터미널에 다음 명령어 입력

yarn add @fortawesome/fontawesome-free

기존에 HTML에서 쓰던 것처럼(<i class="fas 뭐시기 등등")  하고 싶은 경우는 index.js에서 다음과 같이 작성해준다.

import '@fortawesome/fontawesome-free/js/all.js';

그리고 폰트어썸에서 쓰고 싶은 거 카피해서 그대로 쓰면 됨. 단 class속성은 JSX문법답게 className으로 바꿔서 쓸 것

 

아니면 리액트답게 쓰는 방법?으로 컴포넌트 형식으로 폰트어썸을 사용할 수도 있음. 사용하고자 하는 jsx파일에서

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

위 코드를 입력해준 후,

const Component = (props) => {
  return <FontAwesomeIcon icon={faHome} />
};

이런 식으로 쓰면 된다.

 

패키지 매니저를 yarn이 아니라 npm등을 쓸 경우는 yarn add 대신 npm install등으로 대체하면 됨