[React] 폰트어썸 아이콘 사용

FontAwesome 공식문서

📌 폰트어썸 설치

기본패키지 설치 및 solid, regular, brands만 설치했고, 추가적으로 light 등 다른 아이콘 형식을 적용하고 싶다면 설치를 따로 해줘야 함

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

📌폰트어썸 import

< 북마크 아이콘 예시이다. 아이콘을 사용하게 되면서 주의할 점 >
⚠️북마크 아이콘에 색이 채워진 것을 사용하고 싶다면 faBookmark as faSolidBookmark 두개 다 불러와야 한다. faSolidBookmark만 필요하다고 한개만 적어주게 되면 작동이 정상적으로 안 될 수도 있다.

• import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
• import { faBookmark } from "@fortawesome/free-regular-svg-icons";
• import { faBookmark as faSolidBookmark } from "@fortawesome/free-solid-svg-icons";

---

📌폰트어썸 아이콘 사용

• 북마크 아이콘 사용예시
  

REACT로 탭 변경을 해주게 되면 나오는 탭은 아래 코드가 나온다

<FontAwesomeIcon icon="fa-solid fa-bookmark" />

리액트에서는 이렇게 사용하면 아이콘이 나오지 않는데 camelCase 방법으로 faBookmark 또는 faSolidBookmark 이런 식으로 작성하고, import도 똑같이 불러오면 된다. 아래 코드는 프로젝트 하면서 사용해본 코드인데 적용은 간단하다.

<FontAwesomeIcon
  className="buttons"
  icon={
  positionData[i].isBookMark === false ? faBookmark : faSolidBookmark
  } 
  // 기본적으로는 faBookmark(빈 북마크) 또는 faSolidBookmark(채워진 북마크) 
  //한 개만 적어줘도 적용이 가능한데 클릭할 때마다 형식을 바꿔주고 싶어서 사용한 로직임.
  size="xl" 
  onClick={AddpositionBookMark}
/>