Individual Icons

// All icons follow this component signature
type IconComponent = React.ForwardRefExoticComponent<
  AntdIconProps & React.RefAttributes<HTMLSpanElement>
>;

interface AntdIconProps extends IconBaseProps {
  twoToneColor?: TwoToneColor;
}

interface IconBaseProps extends React.HTMLProps<HTMLSpanElement> {
  spin?: boolean;
  rotate?: number;
}

type TwoToneColor = string | [string, string];

// Common outlined icons
const StarOutlined: IconComponent;
const HeartOutlined: IconComponent;
const SettingOutlined: IconComponent;
const UserOutlined: IconComponent;
const HomeOutlined: IconComponent;
const SearchOutlined: IconComponent;
const MenuOutlined: IconComponent;
const CloseOutlined: IconComponent;
const EditOutlined: IconComponent;
const DeleteOutlined: IconComponent;

// Business/Finance icons
const AccountBookOutlined: IconComponent;
const BankOutlined: IconComponent;
const CreditCardOutlined: IconComponent;
const ShoppingCartOutlined: IconComponent;
const WalletOutlined: IconComponent;

// Communication icons
const MailOutlined: IconComponent;
const MessageOutlined: IconComponent;
const PhoneOutlined: IconComponent;
const CommentOutlined: IconComponent;
const NotificationOutlined: IconComponent;

// Media icons
const PlayCircleOutlined: IconComponent;
const PauseCircleOutlined: IconComponent;
const SoundOutlined: IconComponent;
const VideoCameraOutlined: IconComponent;
const PictureOutlined: IconComponent;

// File/Document icons
const FileOutlined: IconComponent;
const FolderOutlined: IconComponent;
const PdfFileOutlined: IconComponent;
const FileTextOutlined: IconComponent;
const DownloadOutlined: IconComponent;
const UploadOutlined: IconComponent;

// Navigation icons
const LeftOutlined: IconComponent;
const RightOutlined: IconComponent;
const UpOutlined: IconComponent;
const DownOutlined: IconComponent;
const CaretLeftOutlined: IconComponent;
const CaretRightOutlined: IconComponent;

// Status/Action icons
const CheckOutlined: IconComponent;
const CloseOutlined: IconComponent;
const PlusOutlined: IconComponent;
const MinusOutlined: IconComponent;
const InfoCircleOutlined: IconComponent;
const WarningOutlined: IconComponent;
const ExclamationCircleOutlined: IconComponent;

// Common filled icons
const StarFilled: IconComponent;
const HeartFilled: IconComponent;
const SettingFilled: IconComponent;
const UserFilled: IconComponent;
const HomeFilled: IconComponent;

// Business/Finance icons
const AccountBookFilled: IconComponent;
const BankFilled: IconComponent;
const CreditCardFilled: IconComponent;
const ShoppingCartFilled: IconComponent;
const WalletFilled: IconComponent;

// Communication icons
const MailFilled: IconComponent;
const MessageFilled: IconComponent;
const PhoneFilled: IconComponent;
const BellFilled: IconComponent;

// Media icons
const PlayCircleFilled: IconComponent;
const PauseCircleFilled: IconComponent;
const SoundFilled: IconComponent;
const VideoCameraFilled: IconComponent;
const PictureFilled: IconComponent;

// Status/Action icons
const CheckCircleFilled: IconComponent;
const CloseCircleFilled: IconComponent;
const PlusCircleFilled: IconComponent;
const MinusCircleFilled: IconComponent;
const InfoCircleFilled: IconComponent;
const WarningFilled: IconComponent;
const ExclamationCircleFilled: IconComponent;

// Common two-tone icons
const StarTwoTone: IconComponent;
const HeartTwoTone: IconComponent;
const SettingTwoTone: IconComponent;
const UserTwoTone: IconComponent;
const HomeTwoTone: IconComponent;

// Business/Finance icons
const AccountBookTwoTone: IconComponent;
const BankTwoTone: IconComponent;
const CreditCardTwoTone: IconComponent;
const ShoppingCartTwoTone: IconComponent;
const WalletTwoTone: IconComponent;

// Communication icons
const MailTwoTone: IconComponent;
const MessageTwoTone: IconComponent;
const PhoneTwoTone: IconComponent;
const BellTwoTone: IconComponent;

// Media icons
const PlayCircleTwoTone: IconComponent;
const PauseCircleTwoTone: IconComponent;
const SoundTwoTone: IconComponent;
const VideoCameraTwoTone: IconComponent;
const PictureTwoTone: IconComponent;

// File/Document icons
const FileTwoTone: IconComponent;
const FolderTwoTone: IconComponent;
const FileTextTwoTone: IconComponent;

// Status/Action icons
const CheckCircleTwoTone: IconComponent;
const CloseCircleTwoTone: IconComponent;
const InfoCircleTwoTone: IconComponent;
const WarningTwoTone: IconComponent;
const ExclamationCircleTwoTone: IconComponent;

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

function IconShowcase() {
  return (
    <div>
      {/* Different themes of the same icon */}
      <StarOutlined />
      <StarFilled />
      <StarTwoTone />
      
      {/* Two-tone with custom colors */}
      <HeartTwoTone twoToneColor="#eb2f96" />
      
      {/* Icon with animations and styling */}
      <SettingOutlined 
        spin 
        style={{ fontSize: '24px', color: '#1890ff' }} 
      />
    </div>
  );
}