Core Components

/**
 * Base Icon component with customization options and static methods
 */
const Icon: React.ForwardRefExoticComponent<
  Omit<IconComponentProps, 'ref'> & React.RefAttributes<HTMLSpanElement>
>;

interface IconComponentProps extends IconBaseProps {
  /** SVG viewBox attribute for custom sizing */
  viewBox?: string;
  /** Custom React component to render instead of built-in SVG */
  component?: React.ComponentType<CustomIconComponentProps | React.SVGProps<SVGSVGElement>>;
  /** Accessibility label for screen readers */
  ariaLabel?: React.AriaAttributes['aria-label'];
}

interface IconBaseProps extends React.HTMLProps<HTMLSpanElement> {
  /** Enable spinning animation */
  spin?: boolean;
  /** Rotation angle in degrees */
  rotate?: number;
}

interface CustomIconComponentProps {
  width: string | number;
  height: string | number;
  fill?: string;
  viewBox?: string;
  className?: string;
  style?: React.CSSProperties;
}

import React from "react";
import Icon from "@ant-design/icons";

// Custom SVG component
const CustomSvg = () => (
  <svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor">
    <path d="M512 64L64 512l448 448 448-448L512 64z" />
  </svg>
);

function CustomIconExample() {
  return (
    <div>
      {/* Using custom SVG component */}
      <Icon component={CustomSvg} />
      
      {/* With custom styling */}
      <Icon 
        component={CustomSvg}
        style={{ fontSize: '24px', color: 'red' }}
        spin
      />
      
      {/* With rotation */}
      <Icon component={CustomSvg} rotate={90} />
    </div>
  );
}

/**
 * Internal Ant Design icon component with theme support
 */
interface AntdIconProps extends IconBaseProps {
  /** Override two-tone colors for this specific icon instance */
  twoToneColor?: TwoToneColor;
}

interface IconComponentProps extends AntdIconProps {
  /** Icon definition from @ant-design/icons-svg */
  icon: IconDefinition;
}

type TwoToneColor = string | [string, string];

import React from "react";
import { StarOutlined, HeartTwoTone } from "@ant-design/icons";

function AntdIconExample() {
  return (
    <div>
      {/* Basic icon usage */}
      <StarOutlined />
      
      {/* Two-tone icon with custom colors */}
      <HeartTwoTone twoToneColor="#eb2f96" />
      <HeartTwoTone twoToneColor={["#eb2f96", "#f759ab"]} />
      
      {/* Icon with animations */}
      <StarOutlined spin />
      <StarOutlined rotate={45} />
      
      {/* Icon with custom styling */}
      <StarOutlined 
        style={{ fontSize: '20px', color: '#1890ff' }}
        className="custom-icon"
      />
    </div>
  );
}

/**
 * Base component for rendering SVG icons with color and style management
 */
interface IconProps {
  /** Icon definition containing SVG data */
  icon: IconDefinition;
  /** CSS class name */
  className?: string;
  /** Click event handler */
  onClick?: React.MouseEventHandler<SVGSVGElement>;
  /** Inline styles */
  style?: React.CSSProperties;
  /** Primary color for two-tone icons */
  primaryColor?: string;
  /** Secondary color for two-tone icons */
  secondaryColor?: string;
  /** SVG focusable attribute */
  focusable?: string;
}

interface TwoToneColorPaletteSetter {
  primaryColor: string;
  secondaryColor?: string;
}

interface TwoToneColorPalette extends TwoToneColorPaletteSetter {
  calculated?: boolean;
}

/**
 * Individual icon component with static methods for global two-tone color management
 */
interface IconBaseComponent<Props> extends React.ForwardRefExoticComponent<
  Props & React.RefAttributes<HTMLSpanElement>
> {
  getTwoToneColor(): TwoToneColor;
  setTwoToneColor(twoToneColor: TwoToneColor): void;
}

// Example: StarOutlined has these static methods
const StarOutlined: IconBaseComponent<AntdIconProps>;

import { StarOutlined, StarTwoTone, HeartTwoTone } from "@ant-design/icons";

// Set global two-tone colors using any icon's static methods
StarOutlined.setTwoToneColor('#eb2f96');
StarOutlined.setTwoToneColor(['#1890ff', '#69c0ff']);

// Get current global colors
const currentColors = StarOutlined.getTwoToneColor();
console.log(currentColors); // ['#1890ff', '#69c0ff']

function GlobalColorExample() {
  return (
    <div>
      {/* These will use the global two-tone colors */}
      <StarTwoTone />
      <HeartTwoTone />
      
      {/* This overrides the global setting */}
      <HeartTwoTone twoToneColor="#52c41a" />
    </div>
  );
}