[Lucide] React 프로젝트에 Lucide 아이콘 연결하기

✨ Lucide 아이콘이란?

1000개 이상의 벡터(svg) 파일을 제공하는 오픈 소스 아이콘 라이브러리

🖌️ props

name	type	default
size	number	24
color	string	currentColor
strokeWidth	number	2
absoluteStrokeWidth	boolean	false

• strokeWidth 
  • 테두리 두께를 조절할 수 있는 props.
  • 특별히 따로 조정할 일은 없을 듯.
• absoluteStrokeWidth
  • true로 설정하면 아이콘의 크기에 관계없이 strokeWidth 가 일정하도록 조정할 수 있음.
  • 특별히 따로 조정할 일은 없을 듯.

🌱 설치

npm install lucide-react

🌱 사용 예시

import { Camera } from 'lucide-react';

// Usage
const App = () => {
  return <Camera color="red" size={48} />;
};

export default App;

📚 참고 자료

• Lucide React 👉🏻 https://lucide.dev/guide/packages/lucide-react
• 아이콘 검색 👉🏻 https://lucide.dev/icons/

Lucide Icons

 

Lucide Icons