[React] React 에서 Font Awesome 을 사용하기

React에서 Font Awesome 을 사용할 경우

 

이 블로그를 봐주세요!

 

공식문서

Font Awesome

 

FontAwesome 설치

---

npm 또는  yarn 을 이용하여 아래와 같은 명령어로 설치 가능합니다.

 

// npm 일 경우
npm i --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/react-fontawesome
// 추가 아이콘 사용시
npm install --save @fortawesome/free-brands-svg-icons
npm install --save @fortawesome/free-regular-svg-icons


// yarn 일 경우
yarn add @fortawesome/fontawesome-svg-core --save-dev
yarn add @fortawesome/free-solid-svg-icons --save-dev
yarn add @fortawesome/react-fontawesome --save-dev
// 추가 아이콘 사용시
yarn add @fortawesome/free-brands-svg-icons --save-dev
yarn add @fortawesome/free-regular-svg-icons --save-dev

package.json 에서 위와 같은 내용이 설치 된 것을 알 수 있습니다.

 

FontAwesome 을 React에서 사용하기

---

무료 애플 로고를 사용하기 위해 free 와 Brands 를 누르면 찾을 수 있습니다.

 

 

해당 애플 로고는 Html 에서 아래와 같이 사용가능합니다.

<i class="fab fa-apple"></i>

하지만, React 에서는 아래와 같이 사용해야 합니다.

 

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

<FontAwesomeIcon icon={faApple} />

제가 이해한 건 FontAwesome Icon 을 가져와서 icon 은 brands 에 있는 faApple 를 사용한다는 의미로 해석했습니다.

 

왜 fortawesome 이렇게 단어를 조금 변경한지 모르겠지만 사용법을 빨리 이해하고 사용하시길 바랍니다.