[React] react-fontawesome 패키지 사용법

npm i @fortawesome/react-fontawesome

npm i @fortawesome/fontawesome-svg-core

위 라이브러리 설치

 

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

무료 아이콘용 npm 패키지는 Regular, Solid, Brands 3개가 있다. 사용할 아이콘이 속한 패키지만 골라 설치

 

{
    "dependencies": {
        "@fortawesome/fontawesome-svg-core": "^6.4.0",
        "@fortawesome/free-brands-svg-icons": "^6.4.0",
        "@fortawesome/free-regular-svg-icons": "^6.4.0",
        "@fortawesome/free-solid-svg-icons": "^6.4.0",
        "@fortawesome/react-fontawesome": "^0.2.0"
    }
}

package.json 파일을 보면 설치한 모든 Font Awesome 패키지를 확인할 수 있다.

 

사용법

이와 같을 때

 

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCircleUser } from "@fortawesome/free-solid-svg-icons";

<FontAwesomeIcon icon={faCircleUser} />

위 코드처럼 import 후 icon={아이콘이름} 사용