[React] fontawesome 폰트어썸 적용법

기존 html css 에서 fontawesome 사용시 cdn으로 불러와서 사용하였으나 리액트에선 역시 같은 방법으로 적용되지 않았다.

리액트는 초반설계가 많이 들어간다는걸 다시 한번 느꼈다. 하지만 모든업무에서 노가다보다 초반설계 오래걸리더라도 제대로 세팅하면 그 이후가 편한다는것을 알기에... 

 

리액트에 폰트어썸 적용방법이다. (출처: https://fontawesome.com/v5.15/how-to-use/on-the-web/using-with/react)

 

 

터미널입력창 (프로젝트에 패키지를 설치)

npm 설치

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

yarn 설치

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

 

적용법 ) 임포트하기

폰트어썸 아이콘이 적용될 위치에 <FontAwesomeIcon icon={faBars} /> 를 입력해주고 상단 import 부분에 해당 아이콘을 추가해준다.( import { faBars } from '@fortawesome/free-solid-svg-icons' )

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

<a id="openMenu"href="#" ><FontAwesomeIcon icon={faBars} /></a>