리액트 fontawesome 사용방법

fontawesome 의 공식 문서를 참고했습니다. 

 

👇리액트에서 fontawesome 사용하기👇

https://fontawesome.com/docs/web/use-with/react/

 

1. 각종 패키지를 install 을 해줍니다. 

npm i --save @fortawesome/fontawesome-svg-core

# Free icons styles
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons

# Pro icons styles
npm i --save @fortawesome/pro-solid-svg-icons
npm i --save @fortawesome/pro-regular-svg-icons
npm i --save @fortawesome/pro-light-svg-icons
npm i --save @fortawesome/pro-thin-svg-icons
npm i --save @fortawesome/pro-duotone-svg-icons

저는 free 아이콘만 사용할 예정이기에 solid, regular 까지 설치했습니다. 

 

 

2. 폰트 어썸의 리액트 컴포넌트로 설치해줍니다. 

npm i --save @fortawesome/react-fontawesome@latest

 

3. 그리고 Babel Macros 로 설치해줍니다. 

npm install babel-plugin-macros

 

4. 폰트 어썸 아이콘을 사용할 파일 상단에 import를 해줍니다. 

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

 

5. 사용할 아이콘을 import 합니다. 

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

 

6. 사용하고 싶은 위치에 코드를 붙여넣습니다. 

<FontAwesomeIcon icon={faChartLine} size='3x' />

 

 

 

---

예를 들어, 저는 그래프 모양의 아이콘을 가지고 오고 싶습니다. 

 

 

검색창에 graph로 검색해서 가장 마음에 드는 아이콘을 찾았습니다. 

 

아이콘의 이름은 chart-line 입니다. 

그래서 이름으로 faChartLine 으로 해주었습니다.

하이픈으로 이어진 단어의 첫글자를 대문자로 해주고, 앞의 fa는 React 코드에서 힌트를 얻었습니다. 

 

<FontAwesomeIcon icon="fa-solid fa-chart-line" />

 

React 코드를 보니, solid 입니다. 

그래서 import 는 '@fortawesome/free-solid-svg-icons' 에서 해줍니다. 

 

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

 

 

만약, import할 변수명을 못찾았다면 아래와 같이 어마무시한 오류 창을 볼 수 있습니다. 

오류창이지만, 내가 원하는 아이콘의 이름을 찾을 수도 있을 것 같습니다. 

 

 

변수명과 import 해올 곳을 잘 찾았다면 아래와 같이 아이콘을 잘 불러오게 됩니다. 

 

 

 

😃 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장에 큰 도움이 됩니다🤓