font awesome을 사용해보니 13 버전의 _app 에서 수정하는 것만 나오길래 14버전에서 수정하는 방법을 알아봤다.

설치

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

이렇게 설치를 해줬다.

fontawesome 인데 설치는 왜 fort awssome일까 ?

solid 와 regular 가 있는데 차이는 아이콘이 색상이 차있는가 없는가의 차이 같다. 둘다 쓸것 같아서 일단 둘다 받았다.

설치 하고 14버전에서는 layout.tsx 에서 수정을 해준다.

import "@fortawesome/fontawesome-svg-core/styles.css";
import { config } from "@fortawesome/fontawesome-svg-core";
config.autoAddCss = false;

이 문구를 넣어 주면 된다.

사용

예시로 arrow 를 사용하는 것을 가져왔다.

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faArrowRight } from "@fortawesome/free-solid-svg-icons/faArrowRight";

이런 형식으로 사용하면 된다.

간략하지만 14버전을 찾고 있는 이들을 위해, 나중에 나를 위해 작성