220319

오늘은 리액트에서 fontawesome 쓰는 법에 대해서 열심히 찾아다녔다.

터미널 열고

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

이렇게 세 개 설치해주면 사용할 준비 끝!
fort라고 써있어서 오타난 거 아니야? 하고 바꾸면 안 됨!!

설치가 끝났으면 fontawesome 홈페이지에 가서 사용하고 싶은 아이콘을 검색후 가져오면 된다.

아이콘을 눌러서 react 부분의 코드를 복사해온다.

<FontAwesomeIcon icon="fa-solid fa-circle-user" />

문제는 이대로 써주면 실행이 안 된다는 점이다.
icon 속성값을 바꿔주어야 한다.

<FontAwesomeIcon icon="faCircleUser" />

이런 식으로 원하는 태그 안에 넣어서 작성해주면 끝!! 하지만 이것만으로 충분하다면 우리의 리액트가 아님.

맨 위에서 import도 해주어야함.

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCircleUser, faLink, faLocationDot } from '@fortawesome/free-solid-svg-icons'

위에는 fontawesome에 있는 아이콘을 쓸 수 있도록 모듈을 가져오는 것 같고 밑에는 원하는 아이콘을 쓸 때마다 추가해서 작성해주면 된다. 작성법은 icon 속성값에 입력한 거랑 똑같이 해주면 끝!