Font Awesome은 웹에서 아이콘이 필요할 때 가장 많이 사용되는 라이브러리 중에 하나입니다.
Font Awesome4 대비 Font Awesome 5의 가장 강력한 부분은 SVG 기반 아이콘을 지원한다는 것입니다. 즉, 기존에 웹 폰트를 기반으로 하는 <i/> 태그 대신에 SVG 기반인 <svg/> 태그가 사용됩니다.
SVG 기반 아이콘이 기능이나 성능적인 측면에서 유리한 점이 많기 때문에 최근 프로젝트에서는 SVG 기반 아이콘이 점점 더 많이 사용되는 추세입니다.
먼저 Font Awesome 의 SVG 기반 아이콘을 활성화 시키기 위한 기본 패키지를 설치합니다.
$ npm i @fortawesome/fontawesome-svg-core
그 다음 Font Awesome 아이콘에 대한 패키지를 설치해야 합니다.
*Solid, Regular, Light, Brands 4개의 카테고리와 유/무료 여부에 따라 여러개의 패키지가 존재하는데, 여기서는 무료로 제공되는 Solid, Regular, Brands 3개의 카테고리에 대한 패키지를 설치합니다.*
( 항상 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