Icon Components

import type { ComponentProps, ReactNode } from 'react';

// Arrow icon for navigation and dropdowns
function IconArrow(props: ComponentProps<'svg'>): ReactNode;

// Dark mode icon for theme toggle
function IconDarkMode(props: ComponentProps<'svg'>): ReactNode;

// Light mode icon for theme toggle  
function IconLightMode(props: ComponentProps<'svg'>): ReactNode;

// System color mode icon for theme toggle
function IconSystemColorMode(props: ComponentProps<'svg'>): JSX.Element;

// Edit icon for edit this page links
function IconEdit(props: ComponentProps<'svg'>): ReactNode;

// Home icon for navigation
function IconHome(props: ComponentProps<'svg'>): ReactNode;

// Menu icon for mobile navigation toggle
function IconMenu(props: ComponentProps<'svg'>): ReactNode;

// Close icon for closing modals and sidebars
function IconClose(props: ComponentProps<'svg'>): ReactNode;

// Copy icon for code block copy buttons
function IconCopy(props: ComponentProps<'svg'>): ReactNode;

// Language icon for locale dropdown
function IconLanguage(props: ComponentProps<'svg'>): ReactNode;

// Success icon for confirmation states
function IconSuccess(props: ComponentProps<'svg'>): ReactNode;

// External link icon for links to external sites
function IconExternalLink(props: ComponentProps<'svg'>): ReactNode;

// Word wrap icon for code block controls
function IconWordWrap(props: ComponentProps<'svg'>): ReactNode;

import type { ComponentProps, ReactNode } from 'react';

// Twitter/X icon
function IconTwitter(props: ComponentProps<'svg'>): ReactNode;
function IconX(props: ComponentProps<'svg'>): ReactNode;

// GitHub icon
function IconGitHub(props: ComponentProps<'svg'>): ReactNode;

// LinkedIn icon
function IconLinkedIn(props: ComponentProps<'svg'>): ReactNode;

// Stack Overflow icon
function IconStackOverflow(props: ComponentProps<'svg'>): ReactNode;

// Bluesky social icon
function IconBluesky(props: ComponentProps<'svg'>): ReactNode;

// Instagram icon
function IconInstagram(props: ComponentProps<'svg'>): ReactNode;

// Threads icon
function IconThreads(props: ComponentProps<'svg'>): ReactNode;

// YouTube icon
function IconYouTube(props: ComponentProps<'svg'>): ReactNode;

// Twitch icon
function IconTwitch(props: ComponentProps<'svg'>): ReactNode;

// Mastodon icon
function IconMastodon(props: ComponentProps<'svg'>): ReactNode;

// Default social icon for unknown platforms
function IconDefaultSocial(props: ComponentProps<'svg'>): ReactNode;

import IconArrow from '@theme/Icon/Arrow';
import IconDarkMode from '@theme/Icon/DarkMode';
import IconGitHub from '@theme/Icon/Socials/GitHub';

// Basic icon usage
function MyComponent() {
  return (
    <div>
      <button>
        <IconArrow className="rotate-icon" />
        Dropdown
      </button>
      
      <IconDarkMode className="theme-toggle-icon" />
      
      <a href="https://github.com/example">
        <IconGitHub />
        GitHub
      </a>
    </div>
  );
}

import type { ComponentProps } from 'react';

// All icon components extend SVG props
interface IconProps extends ComponentProps<'svg'> {
  className?: string;
  width?: string | number;
  height?: string | number;
  fill?: string;
  stroke?: string;
}