[React] 리액트에 폰트어썸 매우 쉽게 적용하기 (4단계)

1. npm 설치

$ 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

---

2. import 해주기

FontAwesome 을 사용하기 위해 선언을 하나 해준다.

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

---

3. 변수명을 스네이크 표기법-> 카멜 표기법으로 변경해주기

사용할 FontAwesome 의 아이콘은 아래의 링크와 같다.

https://fontawesome.com/icons/bars?s=solid

Font Awesome

• {  } 안의 변수명 : fa + 아이콘 이름
• 이때 아이콘의 이름은 카멜 표기법처럼 대문자를 사용해주어야한다. 
• from 뒷 부분 : solid 부분만 해당되는 내용으로 변경할 것

import { faBars } from "@fortawesome/free-solid-svg-icons";

---

4. 본문에서 호출방법!

위에서 지은 변수명을 { } 안에 적어주면 된다.

<FontAwesomeIcon icon={faBars} />

---

5. 전체적으로 살펴보기

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

...


<FontAwesomeIcon icon={faBars} />

---

( + ) 카멜 표기법으로 변경해주었는데 적용이 왜 안되지?

무료가 아니고 유료일 경우에는 안됩니다

아이콘 밑에 free인지 아닌지 확인할 것