리액트에서 fontawesome 적용하기

설치하기

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

우선 이 명령어를 이용해서 다 설치한다.

 

적용하기

-적용할 아이콘

 

fontawesome에서 이 아이콘을 적용해보는 예시이다.

 

-import

import { faCaretUp } from '@fortawesome/free-solid-svg-icons';

이렇게 사용할 폰트를 import 한다. 

위 사진에서는 "fa-caret-up"으로 나와있다. 하지만 리액트에서는 "faCaretUp" 이렇게 해줘야한다. 이런 표기법을 카멜 표기법이라고 한다.

 

-화면에 띄우기

        <FontAwesomeIcon icon={faCaretUp} />

이렇게 적용하면 나타나게 된다.