리액트) 폰트 어썸 font awesome 리액트(react) 에서 사용하기.

리액트 프로젝트에서 

폰트 어썸 아이콘 사용하기. 

 

fontawesome - react 사용하기. - 작성 시점 : 버전5(v5)

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

Set Up with React

 

 

 

1. 설치 - npm이용

// fontawesom core
npm i --save @fortawesome/fontawesome-svg-core
// fontawesome - 무료 solid icon 패키지
npm install --save @fortawesome/free-solid-svg-icons
// fontawesome - 리액트 컴포넌트로 사용하게 하는 패키지
npm install --save @fortawesome/react-fontawesome

 

위 명령어에서 설치되는 기본 아이콘은 무료 solid 아이콘이다. 

 

아이콘은 유료, 무료 아이콘이 있다. -> 필요하면 홈페이지 참조하자 

 

> 무료아이콘 : solid, regular, brands icons 사용 명령어

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

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

 

> 최신 업데이트 하기

npm i --save @fortawesome/react-fontawesome@latest

 

2. import & 사용하기

 

ex) faCoffee icon

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

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

 

이렇게 사용하면 된다~