React에서 Icon 편하게 사용하기

사이드 프로젝트를 만들면서 아이콘은 필수적으로 사용된다.

내가 아이콘을 사용할 때의 과정은 다음과 같다.

• 매 번 필요한 아이콘을 정적 파일로 다운받아서 asset 폴더에 저장 후 import로 가져와 사용한다

이 방식은 일일히 다운받고 폴더에 가져오는 과정이 굉장히 귀찮게 느껴진다. 그래서 다음과 같은 방법도 사용할 수 있다.

• 아이콘 사이트에서 svg 코드를 가져와 사용한다.

svg 코드는 상당히 길기 때문에 코드의 가독성을 떨어뜨리게 된다.

그래서 이 모든 단점을 없앨 수 있는 React Icons이 존재한다. 사용방법 또한 굉장히 쉽고 자주 사용되는 아이콘 또한 거의 존재한다.

React Icons에서 사용할 수 있는 아이콘은 React Icons 깃허브 페이지에서 확인해 볼 수 있다.

사용법

install

npm install react-icons --save

아이콘 선택

왼쪽 상단 검색창에 원하는 아이콘 검색 후 선택하면 친절하게도 코드 사용법도 같이 나온다.

아이콘 사용

아이콘은 컴포넌트 형태로 가져오며, properties로 사이즈와 색상을 설정할 수 있다. 또한 onClick 등의 핸들러도 장착할 수 있다.

import { FaArrowLeftLong } from "react-icons/fa6";

const Component = () => {
  ...
  
  return (
    <div>
    	<FaArrowLeftLong size={18} color="white"/>
    </div>
  );
}

중요한 정보

react-icons는 그룹 별로 아이콘이 저장되어 있기 때문에 번들 사이즈를 불필요하게 차지한다. 예를들어, fa6의 화살표 아이콘을 하나 사용할 때, fa6의 모든 아이콘들을 같이 가져오는 것이다.

이것은 번들 사이즈를 크게 만들기 때문에 성능적인 면에 지장을 준다.

@react-icons/all-files 사용하기

해당 라이브러리는 아이콘 컴포넌트 파일을 개별적으로 가지고 있기 때문에 불필요한 아이콘은 가져오지 않게 된다.

install

npm i @react-icons/all-file

아이콘 사용

import { IoMdHeart } from "@react-icons/all-files/io/IoMdHeart";

const Component = () => {
  ...
  return (
    <div>
   	  <IoMdHeart />
    </div>
  )
}

이렇게 번들 사이즈를 줄여 성능을 개선 시킬 수 있다. @react-icons/all-file의 단점으로는 최근에 나온 아이콘은 import가 안되어 사용할 수 없는 이슈가 있다..