React FontAwesome Icon 사용하는 방법

How to use FontAwesome ICON in React Project?

 

 

 

FontAwesome은 웹 애플리케이션에서 다양한 아이콘을 사용할 수 있는 서비스를 제공한다. HTML에서 코드를 작성할 때는 FontAwesome CDN을 head 태그에 삽입 후 HTML용 태그문법을 사용하면 되지만 아이콘을 React에서 사용한다면 얘기가 조금 달라진다.

 

 

FontAwesome Install

 

npm을 사용해 React 프로젝트를 수행중이라면 아래 명령어로 react-fontawesome 설치가 가능하다.

 

npm i --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/react-fontawesome

// 추가 아이콘 사용
npm install --save @fortawesome/free-brands-svg-icons
npm install --save @fortawesome/free-regular-svg-icons

 

설치가 완료되면 node_modules 디렉토리 하위에 fontawesome 라이브러리가 추가 된다. solid, brands, regular 모두 다른 라이브러리기 때문에 사용할 라이브러리를 잘 확인해야 한다. solid는 속이 채워진 아이콘이고, regular는 속이 비어 있는 아이콘이다.

 

 

How to Use FontAwesome in React

 

React 프로젝트에서 Icon을 사용하기 위해서는 먼저 관련 라이브러리들을 import 해줘야 한다. 사용할 Icon들을 개별적으로 import 해주는게 조금 귀찮은 작업이다. 

 

주의할 점은 import 해오는 host가 @fortawesome 이라는 것이다. fontawesome을 사용하지 않은 이유는 분명 있겠지만 철자를 주의해야 한다.

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCommentDots,faBell } from '@fortawesome/free-regular-svg-icons'
import { faCalendarCheck, faCaretRight } from '@fortawesome/free-solid-svg-icons'

 

라이브러리를 가져왔다면 FontAwesomeIcon 이라는 컴포넌트를 사용할 수 있다. HTML 용 Icon은 Regular든 Solid든 <i> 태그에 담긴 소스만 가져오면 되지만 React에서 사용하기 위해서는 관련 라이브러리를 먼저 설치해주고 import 해준 다음, 아이콘을 사용해야 한다.

 

<FontAwesomeIcon className='CLASS_NAME' icon={faCommentDots}/>
<FontAwesomeIcon className='CLASS_NAME' icon={faBell}/>

 

아이콘 이름도 HTML 용 Icon과는 다르다. 예를 들어 fa-comment-dots라는 아이콘을 사용한다고 하면 HTML 에서와 React에서의 Icon 이름이 다름. -를 camel 형식의 변수로 변경해서 사용해줘야 한다.

 

// HTML 용 Icon
<i class="fa-regular fa-comment-dots"></i>

// React 용 Icon
<FontAwesomeIcon icon={faCommentDots} />