TypeScript Types

Всі типи, які використовуються у згенерованих компонентах

type

IconVariant

Варіанти відображення іконки

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

FitMode

Режим адаптації іконки до розміру

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

GradientDirection

Напрямок лінійного градієнта

TypeScript
type GradientDirection = "horizontal" | "vertical";
type

GradientType

Тип градієнта

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

IconProps

Основні props компонента іконки

TypeScript
type IconProps = Omit<React.SVGProps<SVGSVGElement>, "name" | "width" | "height"> & {
  // Базові props
  name: string;                    // Назва іконки
  variant?: IconVariant;           // Варіант (default: "solid")

  // Розміри
  size?: number | string;          // Розмір (ширина)
  width?: number | string;         // Ширина (override)
  height?: number | string;        // Висота (override)

  // Кольори
  color?: string;                  // Основний колір

  // Multicolor variant: динамічні кольори
  color1?: string;                 // Колір 1
  color2?: string;                 // Колір 2
  color3?: string;                 // Колір 3
  // ... colorN

  // Gradient options (тільки для variant="gradient")
  gradientType?: GradientType;     // Тип градієнта (default: "linear")
  gradientDirection?: GradientDirection; // Напрямок для linear
  gradientAngle?: number;          // Кут для angular/diamond (default: 0)
  gradientRadius?: number;         // Радіус для radial (default: 50)
  colorFirst?: string;             // Початковий колір градієнта
  colorSecond?: string;            // Кінцевий колір градієнта
  offsetFirst?: string;            // Початкова позиція (default: "0%")
  offsetSecond?: string;           // Кінцева позиція (default: "100%")

  // Opacity
  opacity?: number;                // Прозорість (0-1, default: 1)

  // Shadow options
  shadow?: boolean;                // Увімкнути тінь
  shadowColor?: string;            // Колір тіні (default: "#000000")
  shadowBlur?: number;             // Розмиття тіні (default: 4)
  shadowOffsetX?: number;          // Зміщення по X (default: 0)
  shadowOffsetY?: number;          // Зміщення по Y (default: 2)
  shadowOpacity?: number;          // Прозорість тіні (default: 0.3)

  // Fit mode
  fit?: FitMode;                   // Режим адаптації (default: "contain")
};

Важливо!

Props color1, color2, color3... працюють тільки для variant="multicolor"

Варіанти

  • solid - монохромна іконка (використовує currentColor)
  • original - оригінальні кольори з SVG
  • gradient - градієнт (linear, radial, angular, diamond)
  • multicolor - багатокольорова іконка з динамічними кольорами

Розміри

size встановлює ширину. Висота обчислюється автоматично на основі viewBox для збереження пропорцій. Можна перевизначити через width та height.

Приклади використання

Базове використання

React TSX
<Icon name="my-icon" size={32} />

Multicolor з динамічними кольорами

React TSX
<Icon
  name="my-icon"
  variant="multicolor"
  size={32}
  color1="#FF5733"
  color2="#33FF57"
  color3="#3357FF"
/>

Градієнт

React TSX
<Icon
  name="my-icon"
  variant="gradient"
  gradientType="linear"
  gradientDirection="vertical"
  colorFirst="#8B5CF6"
  colorSecond="#EC4899"
/>

З тінню

React TSX
<Icon
  name="my-icon"
  size={32}
  shadow={true}
  shadowColor="#000000"
  shadowBlur={8}
  shadowOpacity={0.4}
/>

Прозорість

React TSX
<Icon
  name="my-icon"
  size={32}
  opacity={0.5}
/>