React Icons

웹 UI 디자인에서 아이콘은 필수 요소이다. 하지만 SVG 파일을 매번 다운로드하고 컴포넌트로 변환하는 건 꽤 귀찮은 작업이다. 이럴 때 개발자들의 사랑을 받는 라이브러리 중 하나가 바로 react-icons다.

---

✅ React Icons란?

react-icons는 Font Awesome, Material Icons, Heroicons 등 다양한 유명 아이콘 라이브러리를 한 번에 통합해서 사용할 수 있게 해주는 React용 아이콘 패키지다.

📌 특징

특징	설명
다양한 아이콘 지원	Font Awesome, Material Design, Feather 등 수십 가지 라이브러리 포함
React용 컴포넌트 제공	<IconName /> 형태로 바로 사용 가능
필요한 아이콘만 import	트리 셰이킹 가능 → 번들 크기 최소화
스타일 커스터마이징 쉬움	size, color 등 props로 쉽게 조정

---

📦 설치 방법

npm install react-icons
# 또는
yarn add react-icons

---

💡 기본 사용 방법

import { FaReact } from 'react-icons/fa';

function App() {
  return (
    <div>
      <h1>React Icons 👇</h1>
      <FaReact size={50} color="#61dafb" />
    </div>
  );
}

export default App;

size와 color는 대표적인 커스터마이징 props이다.

---

📚 지원되는 아이콘 라이브러리

Prefix	라이브러리
fa	Font Awesome
io	Ionicons
md	Material Design
bs	Bootstrap Icons
bi	BoxIcons
ai	Ant Design Icons
fi	Feather Icons
ri	Remix Icons
tb	Tabler Icons

예: FaBeer, MdHome, RiHeartFill 등

---

🔍 원하는 아이콘 찾는 방법

1. 공식 사이트 접속: https://react-icons.github.io/react-icons/
2. 검색창에 원하는 키워드 입력 (예: ‘search’, ‘home’, ‘login’)
3. 마음에 드는 아이콘 클릭 → import 구문 복사해서 사용

---

🎨 스타일링

<FaReact className="text-5xl text-sky-400 hover:scale-110 duration-300" />

---

🚀 팁: 조건부 아이콘 렌더링

{isLiked ? <FaHeart color="red" /> : <FaRegHeart />}

상태 값에 따라 아이콘을 토글할 수 있어 UI에 생기를 줄 수 있다.

---

✅ 마무리

react-icons는 간단하게 설치하고 직관적으로 사용할 수 있는 아이콘 라이브러리다. 다양한 아이콘 세트를 한 번에 사용할 수 있고, 필요한 것만 import하기 때문에 퍼포먼스에도 이점이 있다.

👉 React 프로젝트에서 아이콘이 필요할 때 가장 먼저 고려해 볼 만한 필수 라이브러리다.