React에서 fontawesome 사용

시작하기

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

 

 

추가 스타일

추가 스타일 아이콘을 사용하기 위해 새로 더 설치한다.

npm i --save @fortawesome/pro-solid-svg-icons
npm i --save @fortawesome/pro-regular-svg-icons
npm i --save @fortawesome/pro-light-svg-icons
npm i --save @fortawesome/pro-duotone-svg-icons

 

 

적용할 아이콘 선택

fontawesome 사이트에 들어가서 이 아이콘을 적용하고 싶다.

 

 

불러오기

import { faBasketShopping } from "@fortawesome/free-solid-svg-icons";

 

html에서는 <i class="fa-solid fa-basket-shopping"></i>

이렇게 작성하면 되는데 React에서는 faBasketShopping 이렇게 작성을 해야 한다.

안 그러면 불러와지지 않는다.

 

적용

              <FontAwesomeIcon icon={faBasketShopping} />

적용할 부분에 이렇게 작성을 하면 된다.

이 부분도 마찬가지로 카멜 표기법으로 작성해야 적용이 된다.