[React] 리액트에 Font Awesome 적용하기

프로젝트에 fontawesome 이 필요해서 하던 대로  html에 <script>를 넣고 <i> 태그를 썼는데 전혀 놀랍도록 아무 일도 일어나지 않아 폰트 어썸 페이지로 가서 문서를 읽어보았다.

React에는 i태그가 아니고 npm이나 yarn으로 따로 다운을 받아야 사용할 수 있었다.

 

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

 

yarn add @fortawesome/fontawesome-svg-core
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/react-fontawesome

 

원하는 대로 다운받은 후 하나하나 필요한 폰트 어썸 파일을 추가해야 한다.

 

기본

npm install --save @fortawesome/free-brands-svg-icons
npm install --save @fortawesome/free-regular-svg-icons

 

pro 전용

npm i --save @fortawesome/pro-solid-svg-icons
npm i --save @fortawesome/pro-regular-svg-icons
npm i --save @fortawesome/pro-light-svg-icons
npm i --save @fortawesome/pro-duotone-svg-icons

 

이제 아이콘을 사용하기 위해 jsx파일(js파일)에 임포트를 해야 한다.

 

import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'

const element = <FontAwesomeIcon icon={faCoffee} />

ReactDOM.render(element, document.body)

 

나는 fab 부분이 필요했었는데 임포트를 제대로 했는데도 불구하고 나오지 않아 시도를 많이 해본 결과 library.add를 이용하기로 했다.

 

먼저 app.js에 추가할 것

import { library } from '@fortawesome/fontawesome-svg-core'
import { fab } from '@fortawesome/free-brands-svg-icons'

library.add(fab)

 

나는 fab 부분이 필요했기 때문에 fab만 넣어져 있지만 faCheckSquare나 다른 부분을 더 추가하고 싶다면

해당하는 것을 import를 해주고 library 부분에 계속 추가를 해주면 된다.

library.add(fab, faCheckSquare)

 

그리고 내가 써야 할 파일에 와서 임포트를 한번 더 해줘야 한다.

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

 

이제 기본 세팅은 끝났다.

 

그냥 컴포넌트 사용하듯 원하는 부분에 넣어주면 된다.

(애플 로고)

<FontAwesomeIcon icon={['fab', 'apple']} />

 

그럼 이렇게 감격스럽게도 결과가 나온다

이제 css로 이쁘게 꾸며주면 끝이난다!!!