LucideIcon

The LucideIcon component provides a flexible way to use Lucide icons with support for different naming conventions.

Usage

Copy<script setup lang="ts">
import { LucideIcon } from '@/components/LucideIcon'
</script>

<template>
  <LucideIcon name="icon-home" />
  <LucideIcon name="lucide:home" />
  <LucideIcon name="home" />
</template>

Features

Multiple Naming Conventions

Supports three naming formats:

• icon-* (e.g., icon-home)
• lucide:* (e.g., lucide:home)
• Direct name (e.g., home)

Automatic Conversion

Converts kebab-case to PascalCase:

• arrow-left → ArrowLeft
• user-circle → UserCircle

API Reference

LucideIcon

Examples

Basic Usage

Copy<template>
  <LucideIcon name="home" />
</template>

With Prefix

Copy<template>
  <LucideIcon name="icon-edit" />
  <LucideIcon name="lucide:settings" />
</template>

Kebab Case

Copy<template>
  <LucideIcon name="arrow-left" />
  <LucideIcon name="user-circle" />
</template>

Integration

This component is used throughout the template for:

• Navigation icons in sidebar
• Page icons in frontmatter
• Component icons

Set icons in markdown frontmatter:

Copy---
title: My Page
---