PERN - 설정 시작 setting first 01 - lucide-react

PERN - 설정 시작 setting first 01 - lucide-react

​

---

*FIRST

​

/root

$ npm create vite@latest

$ y

client

react

Javascript

---

​

$ cd client

$ npm install

$ npm install react-router-dom

$ npm install lucide-react

​

*lucide-react는 React용 아이콘 라이브러리

한마디로 설명하자면:

"Lucide 아이콘을 React 컴포넌트로 사용할 수 있게 해주는 패키지"

Lucide는 Feather Icons의 포크(fork)로,

오픈소스로 유지보수되고 있는 깔끔하고 일관된 스타일의 벡터 아이콘 모음!

​

*lucide-react 주요 특징

React 컴포넌트 형태로 아이콘 사용

SVG 기반이어서 가볍고 커스터마이징 쉬움

Tree-shaking 지원 (사용한 아이콘만 번들링됨)

Tailwind, ShadCN 등 최신 UI 프레임워크와 호환성 우수

 

*lucide-react 공식 문서 & 웹사이트

NPM 페이지:

https://www.npmjs.com/package/lucide-react

Lucide 공식 웹사이트 (아이콘 검색 및 미리보기):

https://lucide.dev

GitHub 저장소:

https://github.com/lucide-icons/lucide

​

---

*vscode extention install

es7-react-js-snippets

​

$ npm install tailwindcss @tailwindcss/vite

https://tailwindcss.com/docs/installation/using-vite