Icon Components

interface IconProps {
  /** Accessibility title for screen readers */
  a11yTitle?: string;
  /** Icon color - theme color name or CSS color value, or 'plain' to preserve original colors */
  color?: string;
  /** Icon size - predefined size or custom CSS value */
  size?: 'small' | 'medium' | 'large' | 'xlarge' | string;
}

type Icon = React.ComponentType<IconProps & JSX.IntrinsicElements['svg']>;

import { Add, Close, Facebook, StatusGood } from 'grommet-icons';

// Basic usage
<Add />

// With accessibility title
<Close a11yTitle="Close dialog" />

// With custom color
<Facebook color="plain" />
<Add color="#ff0000" />
<StatusGood color="brand" />

// With size
<Add size="small" />
<Close size="large" />
<Facebook size="48px" />

// Basic UI actions
declare const Add: Icon;
declare const Close: Icon;
declare const Menu: Icon;
declare const More: Icon;
declare const MoreVertical: Icon;
declare const Search: Icon;
declare const Filter: Icon;
declare const Clear: Icon;
declare const Refresh: Icon;

// Navigation
declare const Next: Icon;
declare const Previous: Icon;
declare const Up: Icon;
declare const Down: Icon;
declare const CaretUp: Icon;
declare const CaretDown: Icon;
declare const CaretNext: Icon;
declare const CaretPrevious: Icon;
declare const CaretLeftFill: Icon;
declare const CaretRightFill: Icon;
declare const CaretUpFill: Icon;
declare const CaretDownFill: Icon;

// Form controls
declare const Checkbox: Icon;
declare const CheckboxSelected: Icon;
declare const Checkmark: Icon;
declare const FormAdd: Icon;
declare const FormClose: Icon;
declare const FormEdit: Icon;
declare const FormSearch: Icon;
declare const FormFilter: Icon;

// Media controls
declare const Play: Icon;
declare const PlayFill: Icon;
declare const Pause: Icon;
declare const PauseFill: Icon;
declare const Stop: Icon;
declare const StopFill: Icon;
declare const FastForward: Icon;
declare const Rewind: Icon;
declare const Volume: Icon;
declare const VolumeMute: Icon;

// Status indicators
declare const StatusGood: Icon;
declare const StatusCritical: Icon;
declare const StatusWarning: Icon;
declare const StatusInfo: Icon;
declare const StatusUnknown: Icon;
declare const StatusDisabled: Icon;
declare const StatusPlaceholder: Icon;

// Small status variants
declare const StatusGoodSmall: Icon;
declare const StatusCriticalSmall: Icon;
declare const StatusWarningSmall: Icon;
declare const StatusInfoSmall: Icon;
declare const StatusUnknownSmall: Icon;
declare const StatusDisabledSmall: Icon;
declare const StatusPlaceholderSmall: Icon;

// Alert and info
declare const Alert: Icon;
declare const CircleAlert: Icon;
declare const CircleInformation: Icon;
declare const CircleQuestion: Icon;
declare const Info: Icon;
declare const Emergency: Icon;
declare const Risk: Icon;

// Social media
declare const Facebook: Icon;
declare const FacebookOption: Icon;
declare const Twitter: Icon;
declare const Instagram: Icon;
declare const LinkedIn: Icon;
declare const LinkedinOption: Icon;
declare const Youtube: Icon;
declare const TikTok: Icon;
declare const Snapchat: Icon;
declare const Pinterest: Icon;
declare const Reddit: Icon;
declare const Tumblr: Icon;
declare const WeChat: Icon;
declare const WhatsApp: Icon;

// Technology companies
declare const Google: Icon;
declare const GooglePlay: Icon;
declare const GooglePay: Icon;
declare const Apple: Icon;
declare const AppleAppStore: Icon;
declare const AppleMusic: Icon;
declare const Microsoft: Icon;
declare const Amazon: Icon;
declare const Netflix: Icon;
declare const Spotify: Icon;

// Development platforms
declare const Github: Icon;
declare const Gitlab: Icon;
declare const Figma: Icon;
declare const CodeSandbox: Icon;
declare const Codepen: Icon;
declare const StackOverflow: Icon;
declare const Npm: Icon;
declare const Docker: Icon;

// Generic document
declare const Document: Icon;
declare const DocumentText: Icon;
declare const DocumentImage: Icon;
declare const DocumentVideo: Icon;
declare const DocumentSound: Icon;

// Specific document types
declare const DocumentPdf: Icon;
declare const DocumentWord: Icon;
declare const DocumentExcel: Icon;
declare const DocumentPpt: Icon;
declare const DocumentTxt: Icon;
declare const DocumentRtf: Icon;
declare const DocumentCsv: Icon;
declare const DocumentZip: Icon;

// Document states and actions
declare const DocumentLocked: Icon;
declare const DocumentMissing: Icon;
declare const DocumentVerified: Icon;
declare const DocumentDownload: Icon;
declare const DocumentUpload: Icon;
declare const DocumentUpdate: Icon;

// File management
declare const Folder: Icon;
declare const FolderOpen: Icon;
declare const FolderCycle: Icon;
declare const Archive: Icon;
declare const Download: Icon;
declare const Upload: Icon;
declare const Copy: Icon;
declare const Cut: Icon;
declare const Duplicate: Icon;

// System components
declare const Server: Icon;
declare const ServerCluster: Icon;
declare const Database: Icon;
declare const Network: Icon;
declare const Cloud: Icon;
declare const Storage: Icon;
declare const Memory: Icon;
declare const Cpu: Icon;

// Operating systems
declare const Windows: Icon;
declare const Apple: Icon;
declare const Linux: Icon;
declare const Ubuntu: Icon;
declare const Debian: Icon;
declare const Redhat: Icon;
declare const Android: Icon;

// Development tools
declare const Terminal: Icon;
declare const Code: Icon;
declare const Console: Icon;
declare const Cli: Icon;
declare const Docker: Icon;
declare const Kubernetes: Icon;
declare const Git: Icon;

// Programming languages
declare const JavaScript: Icon;
declare const TypeScript: Icon;
declare const Python: Icon;
declare const Java: Icon;
declare const React: Icon;
declare const Node: Icon;
declare const Html5: Icon;
declare const Css3: Icon;

import { 
  StatusGood, 
  StatusCritical, 
  Facebook, 
  DocumentPdf,
  Server 
} from 'grommet-icons';

// Status indicators
<StatusGood color="green" />
<StatusCritical color="red" />

// Social media with original colors
<Facebook color="plain" />

// Document with custom size
<DocumentPdf size="large" />

// System icon with accessibility
<Server a11yTitle="Server status" />

import { 
  Accessibility,
  Achievement, 
  Add,
  Alert,
  Amazon,
  // ... any other needed icons
} from 'grommet-icons';

interface IconProps {
  /** Accessibility title for screen readers */
  a11yTitle?: string;
  /** Icon color - theme color name, CSS color value, or 'plain' for original colors */
  color?: string;
  /** Icon size - 'small', 'medium', 'large', 'xlarge', or custom CSS value */
  size?: 'small' | 'medium' | 'large' | 'xlarge' | string;
  /** All standard SVG element props are also supported */
  className?: string;
  style?: React.CSSProperties;
  onClick?: (event: React.MouseEvent) => void;
  onMouseOver?: (event: React.MouseEvent) => void;
  // ... all other SVG props
}