Icon Components

/**
 * Base interface for all icon components
 * Extends Vue's SVGAttributes but replaces 'stroke' prop for better Vue compatibility
 */
interface IconProps extends Partial<Omit<SVGAttributes, 'stroke'>> {
  /** Icon size in pixels (width and height) - Default: 24 */
  size?: string | number;
  /** Stroke color for outline icons or fill color for filled icons - Default: 'currentColor' */
  stroke?: string | number;
  /** Accessibility title element content */
  title?: string;
}

/**
 * Functional component type for all icon components
 */
type Icon = FunctionalComponent<IconProps>;

// Examples of outline icon components
declare const IconHome: Icon;
declare const IconSettings: Icon;
declare const IconUser: Icon;
declare const IconMail: Icon;
declare const IconPhone: Icon;
declare const IconCalendar: Icon;
declare const IconSearch: Icon;
declare const IconMenu: Icon;
declare const IconChevronDown: Icon;
declare const IconPlus: Icon;

<template>
  <!-- Basic outline icon -->
  <IconHome />
  
  <!-- Customized outline icon -->
  <IconHome 
    color="blue" 
    size="32" 
    stroke-width="1"
  />
  
  <!-- With accessibility title -->
  <IconSettings title="Open Settings" />
  
  <!-- With event handlers -->
  <IconSearch @click="performSearch" />
</template>

<script setup>
import { IconHome, IconSettings, IconSearch } from '@tabler/icons-vue';

function performSearch() {
  console.log('Search clicked');
}
</script>

// Examples of filled icon components  
declare const IconHomeFilled: Icon;
declare const IconSettingsFilled: Icon;
declare const IconUserFilled: Icon;
declare const IconMailFilled: Icon;
declare const IconPhoneFilled: Icon;
declare const IconCalendarFilled: Icon;
declare const IconSearchFilled: Icon;
declare const IconMenuFilled: Icon;
declare const IconChevronDownFilled: Icon;
declare const IconPlusFilled: Icon;

<template>
  <!-- Basic filled icon -->
  <IconHomeFilled />
  
  <!-- Customized filled icon -->
  <IconHomeFilled 
    color="red" 
    size="28"
  />
  
  <!-- Filled icons don't use stroke-width -->
  <IconSettingsFilled fill="green" />
</template>

<script setup>
import { IconHomeFilled, IconSettingsFilled } from '@tabler/icons-vue';
</script>

// Naming pattern examples
declare const IconHome: Icon;              // outline version
declare const IconHomeFilled: Icon;        // filled version

declare const IconArrowUp: Icon;           // outline version  
declare const IconArrowUpFilled: Icon;     // filled version

declare const IconBrandGithub: Icon;       // brand icons (outline only)
declare const IconNumber123: Icon;         // number icons
declare const IconLetterA: Icon;           // letter icons

// Multi-word icons use PascalCase
declare const IconAccessible: Icon;
declare const IconAccessibleFilled: Icon;
declare const IconShoppingCart: Icon;
declare const IconShoppingCartFilled: Icon;

/**
 * Size property - controls both width and height
 * @param size - Number in pixels or string with units
 */
size?: string | number; // Default: 24

/**
 * Color property - stroke color for outline, fill color for filled
 * @param stroke - CSS color value
 */
stroke?: string | number; // Default: 'currentColor'

/**
 * Alternative color properties (Vue attribute compatibility)
 */
color?: string;      // Alternative to stroke
strokeWidth?: string | number; // Outline icons only

/**
 * Accessibility support
 * @param title - Screen reader title text
 */
title?: string;

/**
 * CSS class support
 */
class?: string | string[] | Record<string, boolean>;

/**
 * Style attribute support
 */
style?: string | Record<string, string>;

// Automatic CSS classes applied to all icons
class="tabler-icon tabler-icon-{icon-name}"

// Examples:
// <IconHome /> gets: class="tabler-icon tabler-icon-home"
// <IconSettings /> gets: class="tabler-icon tabler-icon-settings"
// <IconShoppingCart /> gets: class="tabler-icon tabler-icon-shopping-cart"

/* Style all tabler icons */
.tabler-icon {
  transition: color 0.2s ease;
}

/* Style specific icon */
.tabler-icon-home {
  color: blue;
}

/* Hover effects */
.tabler-icon:hover {
  color: var(--primary-color);
}

<template>
  <!-- Click events -->
  <IconHome @click="goHome" />
  
  <!-- Mouse events -->
  <IconSettings 
    @mouseenter="showTooltip"
    @mouseleave="hideTooltip"
  />
  
  <!-- Keyboard events -->
  <IconSearch 
    tabindex="0"
    @keydown.enter="performSearch"
  />
</template>

<script setup>
import { IconHome, IconSettings, IconSearch } from '@tabler/icons-vue';

function goHome() {
  console.log('Home clicked');
}

function showTooltip() {
  console.log('Show tooltip');
}

function hideTooltip() {
  console.log('Hide tooltip');
}

function performSearch() {
  console.log('Search triggered');
}
</script>

<template>
  <!-- Add custom SVG elements to an icon -->
  <IconHome>
    <circle cx="12" cy="12" r="2" fill="red" />
  </IconHome>
  
  <!-- Add text elements -->
  <IconSettings>
    <text x="12" y="16" text-anchor="middle" font-size="6">!</text>
  </IconSettings>
</template>

<script setup>
import { IconHome, IconSettings } from '@tabler/icons-vue';
</script>

// Example aliases (100+ available)
declare const IconCodeAsterix: Icon;        // Alias for IconCodeAsterisk
declare const IconDiscount2: Icon;          // Alias for IconRosetteDiscount  
declare const Icon2fa: Icon;                // Alias for IconAuth2fa
declare const Icon3dCubeSphere: Icon;       // Alias for IconCube3dSphere
declare const IconCircle0: Icon;            // Alias for IconCircleNumber0
declare const IconSquare1: Icon;            // Alias for IconSquareNumber1

<template>
  <!-- Using aliases - same as regular icons -->
  <IconCodeAsterix />
  <Icon2fa />
  <IconCircle0 />
</template>

<script setup>
import { IconCodeAsterix, Icon2fa, IconCircle0 } from '@tabler/icons-vue';
</script>