[FE-기술] Using fontawesome with React

1. 환경설정

"@fortawesome/fontawesome-svg-core"

"@fortawesome/free-solid-svg-icons"

"@fortawesome/react-fontawesome"

 

2. 아이콘 넣기

아이콘 이름의 중간에 있는  -를 삭제하고 이름 전체를 카멜케이스로 변경(아이콘은 solid만 무료)

e.g. fa-coffee => faCoffee, <FontAwesomeIcon icon={faCoffee} />

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



<FontAwesomeIcon icon={faCoffee} />

 

3. 아이콘에 스타일 추가하는 방법

컴포넌트 안에(inline) 필요한 스타일을 추가, 4번에 있는 적용 가능한 스타일 안내를 참고

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

 <FontAwesomeIcon icon={faCoffee} size="2x" />

 

4. 적용 가능한 스타일 안내

개인적으로 css파일을 만들어서 className으로 직접 설정해 줄 수도 있음

https://fontawesome.com/docs/web/style/style-cheatsheet