react에서 fontawesome 사용하기

1. 패키지 설치

Font Awesome의 SVG 기반 아이콘을 활성화 시키기 위한 기본 패키지 설치

npm i @fortawesome/fontawesome-svg-core

Font Awesome에 대한 패키지 설치

Solid, Regular, Light, Brands 4개의 카테고리가 있으며 이 안에 유/무료가 있음

무료로 제공되는 카테고리는 Solid, Regular, Brands이며 필요한 것만 설치하면 됨

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

마지막으로 Font Awesome을 리액트 컴포넌트 형태로 사용할 수 있도록 해주는 패키지 설치

npm i @fortawesome/react-fontawesome

2. import하고 사용하기

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { light } from '@fortawesome/fontawesome-svg-core/import.macro';

폰트어썸을 컴포넌트로 사용하기 위한 패키지와 원하는 카테고리의 패키지를 import 한다

<FontAwesomeIcon icon={light('user')} />

사용법은 위와 같다.

 

(2의 사용법은 pro(유료)를 사용한 프로젝트에서 쓴 방식이며 free의 경우에도 적용되는지는 확실하지 않음.

검색하면 나오는 방법과는 상이함)