Vue.js 프로젝트에서 lucide-vue-next 아이콘 활용하기

lucide-vue-next 활용가이드

들어가며

Vue.js로 웹 애플리케이션을 개발할 때 아이콘은 사용자 인터페이스를 직관적으로 만들어주는 중요한 요소입니다.

다양한 아이콘 라이브러리 중에서도 lucide-vue-next는 Vue 3 프로젝트에 쉽게 통합할 수 있는 오픈 소스 아이콘 라이브러리로, 심플하면서도 아름다운 디자인의 아이콘을 제공합니다.

이 글에서는 lucide-vue-next가 무엇인지, 그리고 Vue.js 프로젝트에 어떻게 적용하는지 알아보겠습니다.

 

lucide-vue-next란?

Lucide는 Feather 아이콘의 커뮤니티 포크로 시작된 오픈 소스 아이콘 라이브러리입니다.

lucide-vue-next는 이 Lucide 아이콘을 Vue 3에 맞게 최적화한 패키지로, 300개 이상의 아이콘을 제공하며 다음과 같은 특징이 있습니다.

• Vue 3 컴포저블 API와 완벽하게 호환
• 트리 쉐이킹 지원으로 필요한 아이콘만 번들링
• 간단한 스타일 커스터마이징
• TypeScript 지원
• SVG 기반 아이콘으로 고해상도 디스플레이에서도 선명한 렌더링

공식홈페이지 : https://lucide.dev/

Lucide Icons

 

Vue.js 프로젝트에 lucide-vue-next 설치하기

lucide-vue-next를 프로젝트에 적용하는 과정은 매우 간단합니다.

 

1. 패키지 설치

npm이나 yarn을 사용하여 lucide-vue-next 패키지를 설치합니다.

# npm 사용
npm install lucide-vue-next

# 또는 yarn 사용
yarn add lucide-vue-next

 

 

2. 아이콘 사용하기

설치가 완료되면 두 가지 방법으로 아이콘을 사용할 수 있습니다.

개별 아이콘 임포트

<template>
  <div>
    <Home />
    <Settings :size="24" color="blue" />
  </div>
</template>

<script setup>
import { Home, Settings } from 'lucide-vue-next';
</script>

 

Icon 컴포넌트를 생성해 사용하기

아이콘을 로드하기 위해 일반적인 아이콘 구성 요소를 하나만 만들 수는 있지만 권장하지는 않습니다.

아래 예제는 모든 ES 모듈을 가져오기 때문에 사용할 때는 주의해야 합니다. 모든 아이콘을 가져오면 어플리케이션의 빌드 크기가 상당히 커져 성능에 부정적인 영향을 미치기 때문입니다.

 

IconComponent.vue

<script setup>
import { computed } from 'vue';
import * as icons from "lucide-vue-next";

const props = defineProps({
	name: {
		type: String,
		required: true
	},
	size: Number,
	color: String,
	strokeWidth: Number,
	defaultClass: String
})

const icon = computed(() => icons[props.name]);
</script>

<template>
	<component
		:is="icon"
		:size="size"
		:color="color"
		:stroke-width="strokeWidth" :default-class="defaultClass"
	/>
</template>

 

위의 컴포넌트 생성하고 아래와 같이 사용할 수 있습니다.

<script setup>
import Icon from '@/components/IconComponent.vue';

</script>

<template>
	<Icon name="Airplay" />
	<Icon name="Book" />
</template>

 

3. 전역 등록(선택 사항)

아이콘을 프로젝트 전체에서 사용하려면 main.js에서 전역으로 등록할 수 있습니다.

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import { LucideVue } from 'lucide-vue-next';

// 모든 아이콘 등록
const app = createApp(App);
app.use(LucideVue, { componentPrefix: 'Icon' });
app.mount('#app');

// 이제 모든 컴포넌트에서 <Icon{아이콘이름}> 형식으로 사용 가능
// 예: <IconHome />, <IconSettings />

 

아이콘 커스터마이징

lucide-vue-next는 다양한 props를 통해 아이콘을 쉽게 커스터마이징 할 수 있습니다.

<template>
  <Heart 
    size="32"
    color="red"
    stroke-width="1.5"
    class="animate-pulse"
  />
</template>

 

마무리

lucide-vue-next는 Vue.js 프로젝트에 아름다운 아이콘을 쉽게 추가할 수 있는 최적의 솔루션입니다.

심플한 디자인과 쉬운 사용법, 그리고 다양한 커스터마이징 옵션으로 프로젝트의 UI/UX를 한 단계 업그레이드할 수 있습니다. 또한 트리 쉐이킹을 지원하므로 번들 크기 최적화에도 도움이 됩니다.

 

다음 프로젝트에서는 lucide-vue-next를 활용하여 더 직관적이고 아름다운 인터페이스를 만들어보세요!