React에서 Font Awsome 패키지로 설치하여 사용하기

Font Awsome 라이브러리를 직접 호출해서 사용하는 것도 좋지만, 한 번 패키지를 설치해서 사용해보고 난 후로는 이 방식이 더 편하다. 다만 매번 검색하고 적용하는 것이 번거로워서 아예 글을 작성해두려고 한다.

 

우선 기본 패키지를 설치한다. 이 때 Fontawsome이 아니라 Fortawsome이라는 점에 주의하자. 패키지 이름은 Fortawsome이다.

npm i @fortawesome/fontawesome-svg-core

 

다음은 아이콘 관련 패키지를 설치한다. Font Awsome 아이콘은 카테고리별로 나뉘는데, 그 중에서 나는 Solid와 Regular만 설치한다. 만약 Light나 Brands 카테고리를 사용하려면 얘네도 같이 설치해주면 된다.

npm i @fortawesome/free-solid-svg-icons @fortawesome/free-regular-svg-icons

 

마지막으로 Font Awesome을 React 컴포넌트 형태로 사용할 수 있도록 해주는 패키지를 설치하면 설치는 끝.

npm i @fortawesome/react-fontawesome

 

다음은 Icon을 import 하는 방법을 알아보자. 나는 보통 styles라는 디렉터리 안에 Fontawsome.tsx(혹은 jsx) 파일을 생성하여 Icons를 관리한다. 이렇게 한 곳에 다 모아놓으면 필요할 때마다 꺼내쓰면 돼서 간편하다.

// 라이브러리
import { library } from "@fortawesome/fontawesome-svg-core";
// 라이브러리
import { library } from "@fortawesome/fontawesome-svg-core";
// 사용할 아이콘 import
import { faArrowLeft, faBell, faUser } from "@fortawesome/free-solid-svg-icons";
import { faCopy } from "@fortawesome/free-regular-svg-icons";

// 사용할 아이콘을 라이브러리에 추가
library.add(faArrowLeft, faUser, faBell, faCopy);

 

마지막으로 꺼내쓰는 방법은 아래와 같다. 매우 간편하다. prop을 통해 다양하게 사용할 수도 있는데, 그 부분은 다루지 않겠다. 기본적인 설정은 여기까지다. 도움이 되었길.

import React from "react";
import "../../styles/Fontawsome";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

const UserIcon = () => {
  return (
    <div>
      {/* icon은 fa를 제외한 이름을 케밥케이스로 작성할 것 */}
      <FontAwesomeIcon icon="user" size="1x" color="#5D7A93" />
    </div>
  );
};

export default UserIcon;