[SvelteKit] Lucide-svelte 사용해서 아이콘 표현하기

| 서론

안녕하세요 팡일입니다.

현재 re:log 프로젝트를 진행하면서, 버튼이나 네비게이션 바 등에서 간단한 아이콘을 함께 넣고 싶을 때가 많았는데요?

react-icons와 같이 아이콘을 제공하는 패키지가 무엇이 있을지 찾아보다가 발견한 lucide-svelte에 대해서 공유해보려고 합니다.

Lucide는 Feather Icons를 기반으로 만들어진 오픈소스 아이콘 세트로,
모던하고 심플한 디자인 덕분에 SvelteKit과 가장 잘 어울리는 아이콘 라이브러리 중 하나입니다.

| 설치

터미널에서 아래 명령어를 실행합니다.

npm install lucide-svelte

설치가 완료되면, /node_modules/lucide-svelte 내부에 다양한 아이콘 컴포넌트를 확인할 수 있습니다.

| 기본 사용법

Lucide 아이콘은 Svelte 컴포넌트 형태로 제공되므로, 원하는 아이콘을 import해서 바로 사용할 수 있습니다.

원하는 아이콘은 Lucide Icons에서 선택할 수 있습니다.

<script lang="ts">
  import { Search, User, ArrowRight } from 'lucide-svelte';
</script>

<div class="flex items-center gap-2">
  <Search size="20" />
  <User size="20" />
  <ArrowRight size="20" />
</div>

위처럼 import { 아이콘이름 } 방식으로 불러와 사용하면 됩니다.

각 아이콘은 SVG 형태로 렌더링되며, Tailwind CSS나 인라인 스타일을 이용해 자유롭게 꾸밀 수 있습니다.

| props로 크기·색상 제어하기

Lucide의 각 아이콘은 다음과 같은 props를 지원합니다.

1) 예시

<Search size="28" color="#2563eb" strokeWidth="1.5" />

→ 파란색(blue-600) 계열의 얇은 검색 아이콘이 표시됩니다.

| Tailwind와 함께 쓰기

Tailwind CSS를 사용하는 경우, 스타일을 인라인으로 지정하지 않고 클래스 형태로 제어할 수 있습니다.

<button class="flex items-center gap-2 text-gray-600 hover:text-blue-500">
  <Search class="w-5 h-5" />
  검색
</button>

이 방식은 다크 모드 전환이나 호버 스타일 변경에도 매우 유연합니다.

| 마무리

Lucide-svelte는

• 설치가 간단하고

• SVG 기반이라 빠르며

• Svelte의 반응형 구조와 자연스럽게 맞물립니다.

요약하자면,

“SvelteKit 프로젝트에서 아이콘을 깔끔하게 쓰고 싶다면, Lucide-svelte는 거의 정답에 가깝다.”

? 참고 링크Lucide 공식 사이트: https://lucide.devnpm: https://www.npmjs.com/package/lucide-svelte