[React] 리액트에 font-awesome 아이콘 사용하기

---

나같이 실수하여 시간을 잡아먹는 사람들이 있을까 글을 적는다.

너무 화나서 잠시 카테고리를 바꿔버릴 뻔 했지만 참았다...

---

매우 애용하는 대표적인 svg 아이콘 사이트 font-awesome을 첫 리액트 프로젝트에 이용해보기로 했다.

애용하는 이유는 폰트 속성 적용하듯 css로 손쉽게 색, 크기를 변경할 수 있으며 절대로 깨지지 않는다.

fontawesome.com/icons?d=gallery

Font Awesome

일반 html에 넣었던 것 처럼 index.html에 cdn 링크를 넣어야 하는건가? ❌

그렇다면 컴포넌트 파일의 jsx 내부에 링크를 넣어야 하는건가? ❌

링크를 넣어야 한다는 상식을 깨야한다.

시작하자!

---

font-awesome 설치

npm으로 내부에 설치하는 방법이 쉬웠다.

아래 줄을 콘솔창에 입력하자.

여기서 주시해야 하는건 @fontawesome이 아니라 @fortawesome인것...

오타가 아니다.

오늘 삽질을 한 이유도 어떤 사람이 스택오버플로우에 "fort가 아니라 font에요~" 라고 하는 바람에 시간이 지체됐다. 

npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome

그리고 필요한 아이콘의 소속?을 다운받는다.

일단 난 solid만 사용할 것 이기 때문에 solid만 다운받아주었다.

다른 종류가 필요하다면 아래를 참고해 다운받으시길!

 

여러가지를 다운받아야 한다면 @를 기준으로 한번에 설치할 수 있다.

예로 아래와 같이 적는다. 아래는 무료인 것을 한번에 모았다.

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

 

Regular

npm i -S @fortawesome/free-regular-svg-icons
npm i -S @fortawesome/pro-regular-svg-icons

 

Solid

npm i -S @fortawesome/free-solid-svg-icons
npm i -S @fortawesome/pro-solid-svg-icons

 

Light

npm i -S @fortawesome/pro-light-svg-icons

 

Duotone

npm i -S @fortawesome/pro-duotone-svg-icons

 

Brand

npm i -S @fortawesome/free-brands-svg-icons

 

작업중인 파일에 연결시키기

아이콘을 적용시키고 싶은 컴포넌트 파일 맨 위에 아래와 같이 적는다.

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

두번째 줄에 원하는 아이콘을 불러온다. 만약 solid가 아닌 duotone을 받고 싶다면 @부터 복사해서 붙여넣으면 된다.원하는 아이콘 이름은 fa-search였던 것 을 faSearch로 불러온 것이다.이런 규칙을 이용하면 될 것이다.

 

i태그를 써서 불러왔던 아이콘을 이제 i로 불러오지 않는다.

<FontAwesomeIcon icon={faSearch} className="search" />

이렇게 원하는 jsx 태그 내 위치에 넣어준다. 버튼 위에 넣고 싶다면 버튼태그 중간에 FontAwesomeIcon 태그를 넣으면 된다.

 

스타일 적용은 html에서 했던 방식과 같이, 클래스 이름을 부여하고 해당 css파일에서 설정해주면 된다.

---

fontawesome은 왜 패키지를 fortawesome이라고 지은걸까?

주시하지 못한 내 잘못이긴 하지만...여러분은 그런 실수 없길 바라요....😭

---

참고:

www.digitalocean.com/community/tutorials/how-to-use-font-awesome-5-with-react