react-icons 라이브러리 활용 (Figma, 프로젝트)

React Icons

react에서 아이콘을 사용하는 방법은 대표적으로 아래 2가지가 있다.

1. 아이콘 파일(svg, img, png 등)을 번들 안에 저장해두고 컴포넌트에서 import 해서 사용
2. font-awesome 등의 아이콘 라이브러리 사용

 

그 중에서도 사용하려는 아이콘이 많아지고 출처가 다양해지면 1번도 2번도 비효율적이게 된다.

그때 유용하게 사용할 수 있는 라이브러리가 바로 react-icons이다.

 

React Icons

 

react-icons는 다양한 아이콘을 프로젝트에서 편리하게 import 해 사용할 수 있게 해주는 라이브러리다.

Ant-Design, Bootstrap, Font Awesome 등 유용한 아이콘 라이브러리들을 따로 설치할 필요없이 react-icons 라이브러리 하나만 설치해서 사용할 수 있다.

→ 추가적인 라이브러리를 설치할 필요가 없기에 번들 크기를 줄이고 개발 생산성을 높일 수 있다.

※ 라이브러리 전체를 추가하면 번들 크기가 커질 수 있기 때문에 실제 사용하는 아이콘만 선택하여 import 해 최적화된 번들 크기를 유지하는 것이 중요하다.

 

 

 

 

 

---

 

Figma에서 react-icons 플러그인 활용하기

두 가지 플러그인을 활용할 수 있다.

 

 

1. Import React-Icons

아이콘 셋을 전부 import한다.

어떤 아이콘을 사용할지 고민이 될 때 이미지를 보고 찾을 수 있다. (그러나 너무 많아서 오히려 찾기 힘들 수도 있다…)

 

찾으려는 아이콘이 명확할 때는 ctrl + f 를 통해 검색하여 필요한 아이콘을 찾을 수 있다.

 

 

 

 

2. React Icons for Figma

사용하려는 아이콘 이름을 검색해서 개별 아이콘을 import 하여 사용할 수 있다.

 

 

 

 

 

 

---

 

프로젝트에 react-icons 라이브러리 활용하기

1. 라이브러리 설치

npm install @react-icons/all-files --save

 

 

2. 사용하려는 아이콘 import

import { MdPeople } from "react-icons/md";

 

 

3. < /> 태그로 사용

export default function Nav() {
  return (
    <NavContainer>
				...
        <NavSelector>
	        // MdPeople 아이콘 사용
          <MdPeople />
          <p>동아리</p>
        </NavSelector>
        ...
    </NavContainer>
  );
}