[React] FontAwesome 사용하기

(내가 잘 까먹어서 올려두는) 리액트에서 폰트 어썸 사용하기 

폰트어썸을 모를땐 파일에 jpg를 추가해서.. 하나씩 넣었다. 블로그에 올리고 img주소를 복붙했다. 이 얼마나 고된 작업이던가 

하지만 폰트어썸을 만나고 난 뒤, 내 인생은 360도 변했다. 폰트어썸.., 나의 빛(까진 아님), 폰트어썸, 나의 구원 ! 

어쨌든 정말 간편하다! 

 

1. fontAwesome설치

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

 

 

2. FontAwesome.jsx 파일 만들기 

import { library } from "@fortawesome/fontawesome-svg-core";

우선 이렇게 라이브러리를 import해주고 아이콘을 선택하여 아이콘도 import해주자!

 

 

3. fontAwesome 사이트에서 사용하고자 하는 아이콘 선택 

Font Awesome

 

3-1. 아이콘 선택 

✔️ fa-house 선택

 

 

3-2. FontAwesome.jsx파일에 추가

import { library } from "@fortawesome/fontawesome-svg-core";

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

library.add(faHouse);

 

3-3. 사용하고자하는 페이지 or 컴포넌트에서 import해서 사용

예시) Footer.jsx

<Link to="/" className="nav-link" onClick={() => setActiveNav(1)}> 
    <div>
        <FontAwesomeIcon 
        icon ="house"
        className={activeNav === 1 ? "nav-item active" : "nav-item"}/>
    </div>
</Link>

해당 컴포넌트 내에서 Link-div-FontAwesomeIcon구조로 사용하면 간편하다. link가 필요없는 곳이라면 div내에 해줘도 충분하다. 

 

크기 조정은 "size: 2x" 로 설정해줄 수도 있지만 해당 작업에서는 딱히 필요가 없어서 추가하지 않았다.

 

 

4. 결과

 

이렇게 폰트어썸을 활용해서 Footer는 금방금방 만들 수 있다. 

Header, Side Nav에 많이 활용하시길 ~