React에서 Font Awesome 사용하기

kako·2022년 6월 28일
0

React에서 Font Awesome을 사용해 보자!

1. npm으로 설치하자.

// 핵심 기능이 담긴 SVG Core package
npm i --save @fortawesome/fontawesome-svg-core

// 설치를 원하는 icon package (아래의 경우 무료 solid icon)
npm i --save @fortawesome/free-solid-svg-icons

// Font Awesome을 react component 형태로 사용하게 하는 package
npm i --save @fortawesome/react-fontawesome@latest

여러 icon package를 한꺼번에 받으려면 아래처럼 쓸 수 있다.

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

2. React Component 형태로 사용하자.

사용을 원하는 component에서 Font Awesome을 react component 형태로 사용하기 위한 패키지를 import를 해주자.

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

2. 필요한 icon을 import 하자.

마지막으로 Font Awesome에서 필요한 icon을 찾았다면, 해당 package에서 icon을 import 해준다.
icon 이름은 fa-coffeefaCoffee 형태로 바꾸어 주면된 다.

// Free solid package의 예시
import { faCoffee } from '@fortawesome/free-solid-svg-icons'

최종 코드는 아래와 같다.
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCoffee } from '@fortawesome/free-solid-svg-icons';

// JSX 태그 내
<FontAwesomeIcon icon={faCoffee} />

참고로 icon은 크게

  • Solid, Regular, Light, Thin, Duotone

총 5개의 pro/free package가 있다.

이 중, free packageSolid, Regular이다. 필요에 따라 package를 선택하여 설치하면 되겠다.

[참고] https://fontawesome.com/v6/docs/web/use-with/react/#contentHeader

profile
개발에 뛰어든 팬더씨◟( ˘ ³˘)◞

0개의 댓글