[React] Lucide-react로 아이콘 쉽게 쓰기 🤩

오늘은 필자가 프로젝트에서 항상 즐겨쓰는 오픈소스 아이콘 라이브러리, lucide-react에 관해 정리해보고자 한다!

 

---

Lucide-react란?

Lucide-react는 React 프로젝트에서 사용할 수 있는 오픈소스 아이콘 라이브러리다.

Feather icons를 기반으로 제작되었으며, 간단하고 깔끔한 디자인의 아이콘들을 제공하고 있다!

 

특히 React 환경에서 쉽게 사용할 수 있도록 최적화되어 있어 개발 생산성을 크게 향상시킬 수 있는데,

Lucide는 단순히 아이콘 모음이 아닌, React 컴포넌트로 제공되기 때문에 React의 특성을 살려 동적으로 아이콘을 조작할 수 있다.

(또한 TypeScript를 기본적으로 지원하여 타입 안정성도 보장한다!!)

---

설치 방법

프로젝트에 Lucide-react를 추가하는 방법은 매우 간단하다. -> npm이나 yarn을 사용하여 설치

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

 

---

기본 사용법

Lucide-react는 각각의 아이콘을 개별 컴포넌트로 제공하며, 원하는 아이콘을 import하여 바로 사용할 수 있다!

import { Heart, Home, Settings } from 'lucide-react';

function MyComponent() {
  return (
    <div>
      <Heart />
      <Home />
      <Settings />
    </div>
  );
}

위 코드에서는 Heart, Home, Settings 아이콘을 import하여 컴포넌트처럼 사용하고 있다.

(각 아이콘은 기본적으로 24x24 크기로 렌더링되며, stroke 스타일의 아이콘으로 표시됨)

---

아이콘 커스터마이징

Lucide-react 아이콘은 다양한 props를 통해 커스터마이징할 수 있다!

import { Heart } from 'lucide-react';

function CustomizedIcon() {
  return (
    <Heart
      size={32}
      color="red"
      strokeWidth={3}
      className="my-icon"
    />
  );
}

이 예시에서 사용된 props들의 의미는 다음과 같다.

 

• size: 아이콘의 크기를 픽셀 단위로 지정.
• color: 아이콘의 색상을 지정.
• strokeWidth: 선의 굵기를 지정.
• className: CSS 클래스를 추가.

 

---

실제 구현 예시

아이콘을 활용한 간단한 네비게이션 메뉴를 구현해보겠다.

import { Home, User, Settings, Bell } from 'lucide-react';
import { useState } from 'react';

function Navigation() {
  const [activeIcon, setActiveIcon] = useState('home');

  return (
    <nav className="flex gap-4 p-4 bg-gray-100">
      <Home
        color={activeIcon === 'home' ? '#0066ff' : '#666666'}
        onClick={() => setActiveIcon('home')}
        className="cursor-pointer"
      />
      <User
        color={activeIcon === 'user' ? '#0066ff' : '#666666'}
        onClick={() => setActiveIcon('user')}
        className="cursor-pointer"
      />
      <Bell
        color={activeIcon === 'bell' ? '#0066ff' : '#666666'}
        onClick={() => setActiveIcon('bell')}
        className="cursor-pointer"
      />
      <Settings
        color={activeIcon === 'settings' ? '#0066ff' : '#666666'}
        onClick={() => setActiveIcon('settings')}
        className="cursor-pointer"
      />
    </nav>
  );
}

이 예시에서는 useState를 사용하여 현재 활성화된 아이콘을 관리하고, 클릭된 아이콘의 색상을 변경하는 인터랙티브한 네비게이션 바를 구현했다.

(각 아이콘은 클릭 가능하며, 활성화된 아이콘은 파란색으로 표시됨)

---

항상 아이콘 모음 사이트에서 아이콘을 가져다 썼던 필자는 이렇게 좋은 라이브러리를 만나서 행복하게 개발중이다! 😊