TypeScript Types

type IconVariant = "solid" | "original" | "gradient" | "multicolor";

type FitMode = "contain" | "cover" | "tight";

type GradientDirection = "horizontal" | "vertical";

type GradientType = "linear" | "radial" | "angular" | "diamond";

type IconProps = Omit<React.SVGProps<SVGSVGElement>, "name" | "width" | "height"> & {
  // Base props
  name: string;                    // Icon name
  variant?: IconVariant;           // Variant (default: "solid")

  // Sizes
  size?: number | string;          // Size (width)
  width?: number | string;         // Width (override)
  height?: number | string;        // Height (override)

  // Colors
  color?: string;                  // Main color

  // Multicolor variant: dynamic colors
  color1?: string;                 // Color 1
  color2?: string;                 // Color 2
  color3?: string;                 // Color 3
  // ... colorN

  // Gradient options (only for variant="gradient")
  gradientType?: GradientType;     // Gradient type (default: "linear")
  gradientDirection?: GradientDirection; // Direction for linear
  gradientAngle?: number;          // Angle for angular/diamond (default: 0)
  gradientRadius?: number;         // Radius for radial (default: 50)
  colorFirst?: string;             // Gradient start color
  colorSecond?: string;            // Gradient end color
  offsetFirst?: string;            // Start position (default: "0%")
  offsetSecond?: string;           // End position (default: "100%")

  // Opacity
  opacity?: number;                // Opacity (0-1, default: 1)

  // Shadow options
  shadow?: boolean;                // Enable shadow
  shadowColor?: string;            // Shadow color (default: "#000000")
  shadowBlur?: number;             // Shadow blur (default: 4)
  shadowOffsetX?: number;          // X offset (default: 0)
  shadowOffsetY?: number;          // Y offset (default: 2)
  shadowOpacity?: number;          // Shadow opacity (default: 0.3)

  // Fit mode
  fit?: FitMode;                   // Fit mode (default: "contain")
};