TypeScript Support

/**
 * Base functional component type for all icons
 * Integrates with Vue 3's type system for proper component typing
 */
type Icon = FunctionalComponent<IconProps>;

/**
 * Import types for proper TypeScript usage
 */
import type { FunctionalComponent, SVGAttributes } from 'vue';

import type { Icon } from '@tabler/icons-vue';
import { IconHome, IconSettings } from '@tabler/icons-vue';

// Type-safe icon component usage
const homeIcon: Icon = IconHome;
const settingsIcon: Icon = IconSettings;

// In Vue components
export default defineComponent({
  components: {
    IconHome,
    IconSettings
  }
});

/**
 * Props interface for all icon components
 * Extends SVGAttributes but replaces 'stroke' for 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;
}

/**
 * Alternative props interface with explicit Vue SVG attributes
 */
interface SVGProps extends Partial<SVGAttributes> {
  /** Icon size with default type support */
  size?: 24 | number | string;
  /** Stroke width for outline icons */
  strokeWidth?: number | string;
}

<template>
  <IconHome v-bind="homeIconProps" />
  <IconSettings :size="settingsSize" :stroke="themeColor" />
</template>

<script setup lang="ts">
import { IconHome, IconSettings } from '@tabler/icons-vue';
import type { IconProps } from '@tabler/icons-vue';

// Type-safe prop objects
const homeIconProps: IconProps = {
  size: 24,
  stroke: 'blue',
  title: 'Home Page'
};

// Type-safe reactive properties
const settingsSize: Ref<number> = ref(32);
const themeColor: Ref<string> = ref('currentColor');
</script>

/**
 * Component factory function signature with full type safety
 */
declare function createVueComponent(
  type: 'outline' | 'filled',
  iconName: string,
  iconNamePascal: string,
  iconNode: IconNode
): Icon;

/**
 * SVG element structure definition
 * Array of [elementName, attributes] tuples for type-safe SVG construction
 */
type IconNode = [elementName: string, attrs: Record<string, string>][];

/**
 * Icon type enumeration for component factory
 */
type IconType = 'outline' | 'filled';

import { createVueComponent } from '@tabler/icons-vue';
import type { IconNode, Icon } from '@tabler/icons-vue';

// Type-safe custom icon creation
const customIconNode: IconNode = [
  ['path', { d: 'M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z' }]
];

const IconCustomStar: Icon = createVueComponent(
  'outline',
  'custom-star',
  'CustomStar',
  customIconNode
);

// Function to create multiple icons with type safety
function createIconSet(iconData: Record<string, IconNode>): Record<string, Icon> {
  const icons: Record<string, Icon> = {};
  
  Object.entries(iconData).forEach(([name, node]) => {
    const componentName = `Icon${name.charAt(0).toUpperCase()}${name.slice(1)}`;
    icons[componentName] = createVueComponent('outline', name, componentName, node);
  });
  
  return icons;
}

/**
 * Default attributes configuration for different icon types
 */
interface DefaultAttributes {
  outline: {
    xmlns: 'http://www.w3.org/2000/svg';
    width: 24;
    height: 24;
    viewBox: '0 0 24 24';
    fill: 'none';
    stroke: 'currentColor';
    'stroke-width': 2;
    'stroke-linecap': 'round';
    'stroke-linejoin': 'round';
  };
  filled: {
    xmlns: 'http://www.w3.org/2000/svg';
    width: 24;
    height: 24;
    viewBox: '0 0 24 24';
    fill: 'currentColor';
    stroke: 'none';
  };
}

/**
 * Export of default attributes object
 */
declare const defaultAttributes: DefaultAttributes;

/**
 * Vue 3 component instance type for icon components
 */
type IconComponentInstance = ComponentPublicInstance<IconProps>;

/**
 * Template ref type for icon components
 */
type IconRef = Ref<IconComponentInstance | null>;

/**
 * Event handler types for icon components
 */
interface IconEventHandlers {
  onClick?: (event: MouseEvent) => void;
  onMouseenter?: (event: MouseEvent) => void;
  onMouseleave?: (event: MouseEvent) => void;
  onKeydown?: (event: KeyboardEvent) => void;
  onFocus?: (event: FocusEvent) => void;
  onBlur?: (event: FocusEvent) => void;
}

<template>
  <IconHome 
    ref="homeIconRef"
    @click="handleHomeClick"
    @keydown="handleKeyDown"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { IconHome } from '@tabler/icons-vue';
import type { IconRef, IconEventHandlers } from '@tabler/icons-vue';

// Type-safe template refs
const homeIconRef: IconRef = ref(null);

// Type-safe event handlers
const eventHandlers: IconEventHandlers = {
  onClick: (event: MouseEvent) => {
    console.log('Home clicked', event);
  },
  onKeydown: (event: KeyboardEvent) => {
    if (event.key === 'Enter') {
      console.log('Home activated via keyboard');
    }
  }
};

function handleHomeClick(event: MouseEvent) {
  console.log('Home icon clicked', event.target);
}

function handleKeyDown(event: KeyboardEvent) {
  if (event.key === 'Enter') {
    handleHomeClick(event as any);
  }
}
</script>

/**
 * Extract icon name from component type
 */
type IconName<T extends Icon> = T extends Icon ? string : never;

/**
 * Union type of all available icon types
 */
type AvailableIconTypes = 'outline' | 'filled';

/**
 * Props type for specific icon styles
 */
type OutlineIconProps = IconProps & {
  strokeWidth?: number | string;
};

type FilledIconProps = Omit<IconProps, 'strokeWidth'>;

/**
 * Conditional props based on icon type
 */
type ConditionalIconProps<T extends AvailableIconTypes> = 
  T extends 'outline' ? OutlineIconProps : FilledIconProps;

import type { Icon, AvailableIconTypes, ConditionalIconProps } from '@tabler/icons-vue';

// Generic icon component wrapper
function createIconWrapper<T extends AvailableIconTypes>(
  iconType: T,
  props: ConditionalIconProps<T>
) {
  // Type-safe logic based on icon type
  if (iconType === 'outline') {
    // props is typed as OutlineIconProps
    console.log('Stroke width:', (props as OutlineIconProps).strokeWidth);
  } else {
    // props is typed as FilledIconProps (no strokeWidth)
    console.log('Filled icon props:', props);
  }
}

// Usage with type inference
createIconWrapper('outline', { 
  size: 24, 
  stroke: 'blue', 
  strokeWidth: 1.5 // Type-safe for outline icons
});

createIconWrapper('filled', { 
  size: 24, 
  stroke: 'red'
  // strokeWidth not available for filled icons
});

/**
 * Module declaration for @tabler/icons-vue
 */
declare module '@tabler/icons-vue' {
  // Component exports
  export const IconHome: Icon;
  export const IconHomeFilled: Icon;
  export const IconSettings: Icon;
  export const IconSettingsFilled: Icon;
  // ... all other icon components

  // Utility exports  
  export const createVueComponent: typeof createVueComponent;
  export const defaultAttributes: DefaultAttributes;
  
  // Type exports
  export type {
    Icon,
    IconProps,
    SVGProps,
    IconNode,
    DefaultAttributes,
    AvailableIconTypes,
    ConditionalIconProps
  };

  // Namespace exports
  export * as icons from './icons/index';
  export * as iconsList from './icons-list';
  export * from './aliases';
}

// 1. Use explicit typing for component props
import type { IconProps } from '@tabler/icons-vue';

const iconConfig: IconProps = {
  size: 24,
  stroke: 'currentColor',
  title: 'Navigation icon'
};

// 2. Type-safe dynamic icon selection
import { IconHome, IconSettings, IconUser } from '@tabler/icons-vue';
import type { Icon } from '@tabler/icons-vue';

const iconMap: Record<string, Icon> = {
  home: IconHome,
  settings: IconSettings,
  user: IconUser
};

function getIcon(name: keyof typeof iconMap): Icon {
  return iconMap[name];
}

// 3. Component wrapper with proper typing
import { defineComponent, type PropType } from 'vue';
import type { Icon, IconProps } from '@tabler/icons-vue';

const IconWrapper = defineComponent({
  props: {
    icon: {
      type: Object as PropType<Icon>,
      required: true
    },
    iconProps: {
      type: Object as PropType<IconProps>,
      default: () => ({})
    }
  },
  setup(props) {
    return () => h(props.icon, props.iconProps);
  }
});

// 4. Typed composable for icon management
function useIcons() {
  const currentIcon: Ref<Icon | null> = ref(null);
  
  function setIcon(icon: Icon) {
    currentIcon.value = icon;
  }
  
  function clearIcon() {
    currentIcon.value = null;
  }
  
  return {
    currentIcon: readonly(currentIcon),
    setIcon,
    clearIcon
  };
}