lucide-react는 React 애플리케이션에서 SVG 아이콘을 손쉽게 사용할 수 있도록 지원하는 라이브러리입니다. 인기 있는 Feather 아이콘을 기반으로 제작되었으며, 1000개 이상의 일관성 있는 디자인의 아이콘을 제공합니다.

 

또한 실제 프로젝트에서 사용하는 아이콘만 최종 번들에 포함시켜, 애플리케이션의 용량을 최적화하고 로딩 속도를 개선하는 데 큰 이점을 가집니다. props를 통해 아이콘의 크기, 색상, 두께 등을 자유롭게 커스터마이징할 수 있습니다.

 

주요 기능 및 사용법

설치

npm install lucide-react

기본 사용법

lucide-react 라이브러리에서 원하는 아이콘을 직접 import하여 컴포넌트처럼 사용할 수 있습니다.

import React from 'react';
import { Home, Settings, User } from 'lucide-react';
const MyComponent = () => {
  return (
    <div>
      <Home />
      <Settings color="blue" size={32} />
      <User strokeWidth={3} />
    </div>
  );
};
export default MyComponent;

아이콘 커스터마이징

각 아이콘 컴포넌트는 다양한 props를 지원하여 세부적인 스타일 조정이 가능합니다.

• size: 아이콘의 크기를 조절합니다. (기본값: 24)

• color: 아이콘의 색상을 지정합니다. (기본값: currentColor)

• strokeWidth: 아이콘 선의 두께를 조절합니다. (기본값: 2)

 

이처럼 lucide-react는 개발자에게 가볍고 직관적인 아이콘 사용 경험을 제공하여, React 프로젝트의 UI/UX 품질을 손쉽게 향상시킬 수 있도록 돕습니다.