React | Font Awesome 사용하기

npm install

npm 을 통해 패키지를 install 해주어야 한다.

// svg 기반 아이콘을 활성화 시키기 위한 기본 패키지
npm i --save @fortawesome/fontawesome-svg-core

// 아이콘에 대한 패키지 설치 solid , regular, light, brands 등등.
npm install --save @fortawesome/free-solid-svg-icons

// react 컴포넌트형태 ( <FontAwesomeIcon></FontAwesomeIcon> )로 사용할 수 있도록 해주는 패키지 설치
npm install --save @fortawesome/react-fontawesome

import icons

웹에서 fontawsome을 사용한다면 수많은 아이콘을 모두 로드해야하기때문에 비효율이 발생하지만, React 에서는 특정 카테고리에서 필요한 아이콘만 import 해올 수 있는 장점이 있다.

나의 경우 search 아이콘만 필요했기 때문에 해당 아이콘이 필요한 Component 에서 아래와 같이 import 구문을 작성해주었다.
이외에 또 불러오고 싶은 같은 solid 종류의 아이콘이라면 , 뒤에 이름을 작성해주면 되고 만약 다른 종류의 아이콘이라면 경로에 "@fortawesome/free-regular-svg-icons" 등으로 다운받은 아이콘 패키지에 접근해주면 된다.

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

React 컴포넌트로 사용하기

<FontAwesomeIcon icon={ 아이콘의 이름 }></FontAwesomeIcon> 이렇게 작성해서 해당 영역에 적어주면 된다.
아래는 네비게이션 바에 search icon 을 사용하기 위해 작성한 코드이다.

<div className="js-navigation navigation__search">
  // fontawesome !!! 
   <FontAwesomeIcon
      icon={faSearch}
      className="fa-search"
   ></FontAwesomeIcon>
   <input className="js-search-input" placeholder="검색" />
      <div className="hide search-container">
         <ul className="search-list"></ul>
      </div>
</div>

FontAwesomeIcon 컴포넌트는 icon prop 외에도 size,rotation,flip 등등 다양하게 사용해 볼 만한 것들이 나와있다.

ref :
React | Font Awesome
React에서 Font Awesome 사용하기