[React Icons] React 아이콘 라이브러리 사용 및 v5.5.0, TypeScript 문제 해결

📌React Icons란?

- 인기 있는 아이콘 라이브러리들을 쉽게 사용할 수 있게 해주는 라이브러리

- Font Awesome, Material Design Icons, Bootstrap Icons, Feather 등

다양한 아이콘 세트를 통합하여 일관된 방식으로 제공.

-  ES6 가져오기를 활용해서 프로젝트에서 사용 중인 아이콘만 포함할 수 있습니다.

 

📍React Icons 설치

npm install react-icons

 

📍 사용하기

확인용으로 react 검색 후 react 아이콘에 대한 정보를 확인!

 

 

🔍 검색을 통해 원하는 아이콘을 보다 쉽게 찾을 수 있어서 사용하기 편하고

여러 종류의 아이콘을 미리보기로 확인할 수 있는 점에서 원하는 아이콘을 쉽고 빠르게 찾아서 사용할 수 있어요! 

 

// react + MdInsertEmoticon
import { FaReact } from "react-icons/fa";
import { MdInsertEmoticon } from "react-icons/md";

<FaReact />
<MdInsertEmoticon />

 

✅ 정상적으로 svg 아이콘을 확인할 수 있어요!

 

📍 size, color 

<FaReact size={36}/>
<FaReact size={48} color="#61DAFB"/>
<MdInsertEmoticon size={36} />
<MdInsertEmoticon size={48} color={'blue'}/>

 

✅ size, color 원하는 값을 입력하면 쉽게 원하는 사이즈와 색상으로 변경할 수 있어요!

 

📍 관리 편의성 & 일관성 있는 네이밍을 사용

아래와 같은 방법으로도 사용할 수 있습니다!

// 🗂️ icon.ts
import { AiFillHome, AiFillInstagram  } from "react-icons/ai";
import { FaReact, FaAndroid, FaBell  } from "react-icons/fa";

export const IconHome = AiFillHome;
export const IconInstagram = AiFillInstagram;
export const IconReact = FaReact;
export const IconAndroid = FaAndroid;
export const IconBell = FaBell;

 

 

⚠️  react-icons@5.5.0에서 일부 아이콘 TypeScript의 타입 추론 오류, JSX 컴포넌트로 사용할 수 없습니다.

- react-icons/fa6 경로 아이콘 문제 발생

- Create React App (CRA)  프로젝트에서 react-scripts 사용, TypeScript, react-icons@5.5.0 버전 문제 발생

 

❌ 오류 메시지

'FaUser' cannot be used as a JSX component.  
Its return type 'ReactNode' is not a valid JSX element.  
Type 'undefined' is not assignable to type 'Element | null'.

 

👉 최신 TypeScript 버전으로 업그레이드하면 아이콘 타입 오류는 해결 가능하지만..!

- 패키지 설치(npm install)나 배포(build) 과정에서 다른 문제가 발생함

-  react-scripts과 typescript 버전과 호환성 문제

- react-scripts@5.0.1 typescript ^3.2.1 || ^4 버전이어야 하는데 TypeScript 버전이 그 이상으로 설치되어 충돌 발생!

 

 

✅ 해결 방법

1. CRA ➡️ Vite로 마이그레이션

2. react-icons 버전 다운그레이드

react-icons : 5.5.0 ➡️ 5.4.0

 

🔗 GitHub issue 참고

npm uninstall react-icons
npm install react-icons@5.4.0

 

👍 해결 완료 

 

✍️ 기록

 

감사합니다. 😁