[React] React 에서 Font Awesome 사용해보기

💡 실습 포인트!

• Font Awesome 은 웹에서 아이콘이 필요할 때 가장 많이 사용되는 라이브러리에 해당한다.
• 일반적인 HTML 파일에서 코드를 작성할 때와 Font Awesome 사용 방법이 다른데 터미널에서 패키지 설치할 때 매번 검색하기 힘들 것 같아서(...) 내가 보려고 포스팅을 해본다.

---

💜 터미널에서 Font Awesome 패키지 설치하기

🤍 Font Awesome 의 SVG 기반 아이콘을 활성화하기 위한 기본 패키지를 설치한다. (필수)

npm i @fortawesome/fontawesome-svg-core

---

🤍 Font Awesome 아이콘에 대한 패키지를 설치한다.

• Font Awesome 에는 Solid, Regular, Light, Brands 와 같은 카테고리나 유/무료 여부에 따라 패키지들이 다양하다.
• 모든 패키지들을 설치할 필요는 없으며, 사용하고 싶은 아이콘이 속한 카테고리 패키지만 설치하면 된다.

// SOLID 무료 패키지
npm i @fortawesome/free-solid-svg-icons 

// REGULAR 무료 패키지
npm i @fortawesome/free-regular-svg-icons 

// BRANDS 무료 패키지
npm i @fortawesome/free-brands-svg-icons

---

🤍 Font Awesome 을 React 컴포넌트 형태로 사용할 수 있도록 도와주는 패키지를 설치한다. (필수)

npm i @fortawesome/react-fontawesome

---

💜 Font Awesome 아이콘 import 하기

• 웹에서 바로 Font Awesome 을 사용하면 다수의 아이콘을 모두 로드해야하므로 비효율적이다.
• React 에서 Font Awesome 을 사용할 때에는 특정 카테고리에서 필요한 아이콘만 import 해주는 것이 가능하다.

---

💜 Font Awesome 패키지 설치 및 import 해보기

🤍 Font Awesome 홈페이지에서 맘에 드는 아이콘을 고른다.

• 맘에 드는 아이콘을 클릭하면 위와 같은 화면이 나오고 React 탭을 클릭하면 코드가 나온다.
  (그냥 "그렇구나~" 하고 아이콘 이름과 어느 패키지에 속해있는지만 확인하고 넘어가면 된다. 어차피 저거 그대로 사용 못한다.)
• 내가 고른 아이콘의 경우 아이콘 이름은 대략 star-and-crescent 이며, solid 패키지에 속해있음을 알 수 있다.

---

🤍 터미널에서 Font Awesome 과 관련하여 필요한 패키지들을 설치한다.

• 필수로 설치해야하는 패키지 2개와 내가 필요한 solid 패키지를 설치해주었다.

---

🤍 React 프로젝트로 Font Awesome 아이콘 import 하기

• 일반 HTML 파일과는 아이콘을 가져오는 방식이 다르므로 React 에 아이콘을 가져오는 게 처음이라면 조금 헤맬 수 있다.

• 일단 아이콘을 import 하려는 파일 상단에 위와 같이 코드를 적어준다.

// 아이콘을 넣을 위치에 작성해야 하는 코드
<FontAwesomeIcon icon={아이콘명} />

• 그리고 아이콘이 들어가야 하는 위치에 위와 같이 코드를 작성해준다.
• 아마 아이콘을 고르긴 했지만 내가 본 아이콘 이름을 그대로 넣을 수도 없기 때문에 아이콘 이름을 정확하게 뭐라고 넣어야 할지 모를 것이다.

• 그럴 때는 아이콘을 고를 때 확인했던 이름을 활용하면 된다.
• 내가 고른 아이콘의 경우 fa-solid fa-star-and-crescent 였기 때문에 키워드로 starand 까지 입력해주었더니 자동완성으로 faStarAndCrescent 가 나와서 선택해주었다.
  (참고로 React 에서 사용하는 JSX 문법의 경우 CamelCase 로 작성하며, 따옴표를 사용하지 않고 중괄호를 사용하므로 눈치껏 'star-and-crescent' 가 아님을 알 수 있었다.)

• 그렇게 작성이 완료되면 상단에 자동으로 faStarAndCrescent 아이콘이 import 되었음을 확인할 수 있다.

---

🤍 React 프로젝트를 미리보기하여 브라우저에서 확인하기

• 여기까지 진행했으면 프로젝트에 잘 적용이 되었는지 확인을 해보면 된다.
• 작업중인 프로젝트를 VSCode 에디터에서 오픈한 상태로 터미널에 npm start 를 입력하면 현재 작업중인 프로젝트를 브라우저에서 미리보기처럼 확인할 수 있다.

• 나의 경우 로고 이미지로 Font Awesome 이미지를 삽입한 건데 제대로 잘 반영이 되어있음을 확인할 수 있었다.