자바블로그

react 작업시 기존에 사용하던 fontawesome 를 사용하기 위해 작업을 진행 하면서 정리한 내용 입니다.

공식 홈페이지에 워낙에 잘 정리가 되어 있어 적을 필요가 없을거 같긴 한데...

만약 검색을 하다 이 페이지 오신 분이라면 아래 링크를 타고 들어가시면 잘 정리된 내용을 

확인 할 수 있습니다.

https://fontawesome.com/docs/web/use-with/react/

우선 fontawesome 관련 모듈을 추가 해줍니다. 전 yarn으로 작업 하기 때문에 아래의 add명령을 실행 해줍니다.

add명령은 작업 하려는 프로젝트 폴더에서 진행 해주시면 됩니다.

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

fontawesome-svg-core 예전에는 <i 태그로 아이콘을 사용했지만 현재는 svg태그로 아이콘을 사용 한다고 합니다.

(웹은 기술 뿐만 아니라 규약, 라이브러리 모든것이 너무 빨리 변해서 따라 가는게 힘이 듭니다. 전자정부 같은 SI만 하다보면 개인 프로젝트 하면서 따라 간다는게 쉬운일이 아니네요)

free-solid-svg-icons, free-regular-svg-icons 아이콘 페키지 입니다. solid와 regular 2개의 패키지를 추가 했습니다.

(거의 solid만 사용하긴 하는데 하는김에 regular도 가끔 사용하니 추가 해줍니다.)

react-fontawesome@latest react와 fontawesome를 연결 해주는 패키지를 추가 해줍니다. 추가시 버전은 latest(최신)

입니다.

패키지를 설치 하고 나서는 아래의 내용을 보고 사용하려는 페이지에 아이콘을 추가 해주시면 됩니다.

https://fontawesome.com/docs/web/use-with/react/add-icons

전 단건으로 추가해도 상관 없으니

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

<FontAwesomeIcon icon={faCrosshairs} />

형식으로 추가 했지만 여러곳에서 많은 아이콘을 사용한다면 설명중 Dynamic Icon Importing 방식이 작업이 

편할거 같습니다.

(Dynamic Icon Importing 을 하려고 했는데... babel.config.js, babel-plugin-macros.config.js 관련 설정을 하지 못해 잠시 미뤄둔 상태 입니다. 작업 하는데로 내용 갱신 진행 하겠습니다.)