[React] 리액트에 font-awesome 적용하기 & 커스텀하기

font-awesome 은 우리가 개발시 아이콘이 필요할 때 자주 사용하는 웹사이트이자 라이브러리이다.

해당 사이트에 들어가면 여러 종류의 아이콘을 무료로 사용할 수 있다.

그냥 html 에 아이콘을 사용할 때는 별도의 라이브러리 없이 웹폰트를 기반으로 하는 <i> 태그로 작성할 수 있는데,
그와 다르게 react 에서는 라이브러리를 사용해 svg기반으로 별도의 컴포넌트로 사용할 수 있다.

svg 기반 아이콘이 기능이나 성능적인 측면에서 유리한 점이 많아 최근 자주 사용하는 추세이다 (화질이 제일 좋기도함)

리액트에서 font awesome 을 사용하는 방법을 알아보도록 하자

---

설치

①  기본 패키지 @fortawesome/fontawesome-svg-core 설치

SVG 기반 아이콘을 활성화 시키기 위해서는 기본 패키지인 @fortawesome/fontawesome-svg-core 설치해야한다.

npm i @fortawesome/fontawesome-svg-core

②  Font Awesome 아이콘 대한 패키지를 설치

* 무료로 제공되는 Solid, Regular Brands 3개의 카테고리에 대한 패키지만 설치하였다
(다 설치할 필요는 없고 사용하고 싶은 아이콘이 속한 카테고리만 설치하면 된다.

npm i @fortawesome/free-solid-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-brands-svg-icons​

 

③  Font Awesome을 React 컴포넌트 형태로 사용할 수 있게 해주는 패키지를 설치

npm i @fortawesome/react-fontawesome

---

react component로 사용

 

이제 설치한 패키지 중에서 필요한 아이콘을 import 하고, component로 불러와 사용하기만 하면 된다!

예를 들어 책 아이콘을 쓰고자 할 때

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

이렇게 FontAwesomeIcon 과 아이콘의 이름을 import 해준다.

  <FontAwesomeIcon icon={faBookOpen} />

그리고 이렇게 jsx에서 컴포넌트로 불러와주기만 하면 된다 !

 

---

custom

아이콘에 크기 변경, 회전, 애니메이션 등을 넣어 원하는 대로 커스텀 할 수도 있다.

공식 문서를 참조하면 잘 나와있다.

예시로 사이즈 변경을 해보자.

  <FontAwesomeIcon icon={faBookOpen} size="lg" />  
  <FontAwesomeIcon icon={faBookOpen} size="2xl" />

이렇게 컴포넌트 안에 size 를 원하는 사이즈로 바꾸어주면 된다. 
사이즈 종류는 마찬가지로 공식문서에 나와있다.

 

---

직접 png나 svg를 삽입하지 않고 icon을 컴포넌트로 불러 올 수 있어 편한 것 같다.

앞으로 자주 이용할 것 같다

 

 

---

참고자료
https://www.daleseo.com/react-font-awesome/