[React JS] React에서 Font Awesome icon 적용하기

이번에 제작하고 있었던 Movie App에 css를 적용하던 중 icon을 사용하고 싶은데 방법을 몰라서 여기저기 찾아봤다.

그 방법을 적어보려고 한다.

우선 다음의 내용들을 설치한다

$ 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

둘 다 설치해도 되고, solid icon을 사용할 거면 첫 번째, regular icon을 사용할 거면 두 번째를 설치해준다.

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

마지막으로 해당 내용을 설치한다.

 

이후 사용하고자 하는 js파일에서

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
/*기본적으로 import해야한다*/
import { faHouse } from "@fortawesome/free-solid-svg-icons";
/*원하는 icon명을 찾아서 입력해준다. (faSearch, faMap 등등)*/
import { faSquare } from "@fortawesome/free-regular-svg-icons";
/* 해당 icon이 solid인지 regular인지 구분해서 import 할 것 */

마지막으로 원하는 부분에

        <h2>
          <Link className={styles.home} to={`/`}>
            <FontAwesomeIcon icon={faHouse} />
          </Link>
        </h2>

필자는 링크안에 icon을 넣어줬다.

결과화면