Icon Components

/**
 * All icon components follow this signature pattern
 * Each icon component is a Vue functional component accepting LucideProps
 */
type IconComponent = FunctionalComponent<LucideProps>;

// Alphabetically organized selection of available icon components:
const AArrowDown: IconComponent;
const AArrowUp: IconComponent;
const ALargeSmall: IconComponent;
const Accessibility: IconComponent;
const Activity: IconComponent;
const AirVent: IconComponent;
const AlarmClock: IconComponent;
const AlarmClockCheck: IconComponent;
const AlarmClockMinus: IconComponent;
const AlarmClockOff: IconComponent;
const AlarmClockPlus: IconComponent;
const Album: IconComponent;
const AlignCenter: IconComponent;
const AlignCenterHorizontal: IconComponent;
const AlignCenterVertical: IconComponent;
const AlignEndHorizontal: IconComponent;
const AlignEndVertical: IconComponent;
const AlignHorizontalDistributeCenter: IconComponent;
const AlignHorizontalDistributeEnd: IconComponent;
const AlignHorizontalDistributeStart: IconComponent;
const AlignHorizontalJustifyCenter: IconComponent;
const AlignHorizontalJustifyEnd: IconComponent;
const AlignHorizontalJustifyStart: IconComponent;
const AlignHorizontalSpaceAround: IconComponent;
const AlignHorizontalSpaceBetween: IconComponent;
const AlignJustify: IconComponent;
const AlignLeft: IconComponent;
const AlignRight: IconComponent;
const AlignStartHorizontal: IconComponent;
const AlignStartVertical: IconComponent;
const AlignVerticalDistributeCenter: IconComponent;
const AlignVerticalDistributeEnd: IconComponent;
const AlignVerticalDistributeStart: IconComponent;
const AlignVerticalJustifyCenter: IconComponent;
const AlignVerticalJustifyEnd: IconComponent;
const AlignVerticalJustifyStart: IconComponent;
const AlignVerticalSpaceAround: IconComponent;
const AlignVerticalSpaceBetween: IconComponent;
const Ambulance: IconComponent;
const Ampersand: IconComponent;
const Ampersands: IconComponent;
const Anchor: IconComponent;
const Angry: IconComponent;
const Annoyed: IconComponent;
const Antenna: IconComponent;
const Anvil: IconComponent;
const Aperture: IconComponent;
const AppWindow: IconComponent;
const AppWindowMac: IconComponent;
const Apple: IconComponent;
const Archive: IconComponent;
const ArchiveRestore: IconComponent;
const ArchiveX: IconComponent;
const AreaChart: IconComponent;
const Armchair: IconComponent;
const ArrowBigDown: IconComponent;
const ArrowBigDownDash: IconComponent;
const ArrowBigLeft: IconComponent;
const ArrowBigLeftDash: IconComponent;
const ArrowBigRight: IconComponent;
const ArrowBigRightDash: IconComponent;
const ArrowBigUp: IconComponent;
const ArrowBigUpDash: IconComponent;
const ArrowDown: IconComponent;
const ArrowDown01: IconComponent;
const ArrowDown10: IconComponent;
const ArrowDownAZ: IconComponent;
const ArrowDownFromLine: IconComponent;
const ArrowDownLeft: IconComponent;
const ArrowDownNarrowWide: IconComponent;
const ArrowDownRight: IconComponent;
const ArrowDownToDot: IconComponent;
const ArrowDownToLine: IconComponent;
const ArrowDownUp: IconComponent;
const ArrowDownWideNarrow: IconComponent;
const ArrowDownZA: IconComponent;
const ArrowLeft: IconComponent;
const ArrowLeftFromLine: IconComponent;
const ArrowLeftRight: IconComponent;
const ArrowLeftToLine: IconComponent;
const ArrowRight: IconComponent;
const ArrowRightFromLine: IconComponent;
const ArrowRightLeft: IconComponent;
const ArrowRightToLine: IconComponent;
const ArrowUp: IconComponent;
const ArrowUp01: IconComponent;
const ArrowUp10: IconComponent;
const ArrowUpAZ: IconComponent;
const ArrowUpDown: IconComponent;
const ArrowUpFromDot: IconComponent;
const ArrowUpFromLine: IconComponent;
const ArrowUpLeft: IconComponent;
const ArrowUpNarrowWide: IconComponent;
const ArrowUpRight: IconComponent;
const ArrowUpToLine: IconComponent;
const ArrowUpWideNarrow: IconComponent;
const ArrowUpZA: IconComponent;
const ArrowsUpFromLine: IconComponent;
const Asterisk: IconComponent;
const AtSign: IconComponent;
const Atom: IconComponent;
const AudioLines: IconComponent;
const AudioWaveform: IconComponent;
const Award: IconComponent;
const Axe: IconComponent;
const Axis3d: IconComponent;
// ... and approximately 1,550+ more icon components following the same pattern

// Popular icons for common use cases:
const Bell: IconComponent;
const Calendar: IconComponent;
const Check: IconComponent;
const ChevronDown: IconComponent;
const ChevronLeft: IconComponent;
const ChevronRight: IconComponent;
const ChevronUp: IconComponent;
const Download: IconComponent;
const Edit: IconComponent;
const Eye: IconComponent;
const EyeOff: IconComponent;
const Heart: IconComponent;
const Home: IconComponent;
const Mail: IconComponent;
const Menu: IconComponent;
const Plus: IconComponent;
const Search: IconComponent;
const Settings: IconComponent;
const Smile: IconComponent;
const Star: IconComponent;
const Trash: IconComponent;
const Upload: IconComponent;
const User: IconComponent;
const X: IconComponent;

<template>
  <div>
    <!-- Basic usage -->
    <Smile />
    <Activity />
    <Home />
    
    <!-- With customization -->
    <Bell :size="32" color="red" />
    <Star :size="24" :stroke-width="1" />
    
    <!-- With all SVG attributes -->
    <Heart 
      :size="48"
      color="pink"
      :stroke-width="2"
      class="animated-heart"
      @click="handleClick"
    />
  </div>
</template>

<script setup>
import { Smile, Activity, Home, Bell, Star, Heart } from "lucide-vue-next";

const handleClick = () => {
  console.log('Heart clicked!');
};
</script>

// Deprecated aliases (examples):
const Edit2: IconComponent; // Alias for Pen
const Pen: IconComponent;   // Current name

// Usage of aliases works but generates deprecation warnings:
const ArrowLeftCircle: IconComponent; // May be alias
const CircleArrowLeft: IconComponent; // Current name

import { icons } from "lucide-vue-next";

// Access any icon through the icons namespace:
// icons.Smile, icons.Activity, icons.Home, etc.

<template>
  <div>
    <component :is="icons.Smile" :size="24" />
    <component :is="icons[selectedIcon]" :size="32" />
  </div>
</template>

<script setup>
import { icons } from "lucide-vue-next";
import { ref } from "vue";

const selectedIcon = ref("Activity");
</script>