Icon Libraries

// Font Awesome Icons
import { FaBeer, FaFolder, FaRegClipboard } from "react-icons/fa";     // 1,612 icons
import { Fa500Px, FaAccessibleIcon } from "react-icons/fa6";           // 2,045 icons

// Material Design Icons  
import { MdAccessibility, MdHome, MdOutlineHome } from "react-icons/md"; // 4,341 icons

// Popular Icon Sets
import { AiFillFolder, AiOutlineFolder } from "react-icons/ai";         // 831 icons (Ant Design)
import { BsFolder, BsFillFolder } from "react-icons/bs";               // 2,716 icons (Bootstrap)
import { BiFolder, BiFolderOpen } from "react-icons/bi";               // 1,634 icons (BoxIcons)
import { CgFolder, CgFolderAdd } from "react-icons/cg";                // 704 icons (css.gg)
import { CiFolder, CiFolderOpen } from "react-icons/ci";               // 288 icons (Circum Icons)
import { DiFolder, DiGit } from "react-icons/di";                      // 192 icons (Devicons)
import { FcFolder, FcOpenedFolder } from "react-icons/fc";             // 329 icons (Flat Color Icons)
import { FiFolder, FiFolderPlus } from "react-icons/fi";               // 287 icons (Feather)
import { GiFolder, GiFolderOpen } from "react-icons/gi";               // 4,040 icons (Game Icons)
import { GoFolder, GoFileDirectory } from "react-icons/go";            // 264 icons (GitHub Octicons)
import { GrFolder, GrFolderOpen } from "react-icons/gr";               // 635 icons (Grommet Icons)
import { HiFolder, HiFolderOpen } from "react-icons/hi";               // 460 icons (Heroicons)
import { HiOutlineFolder, HiSolidFolder } from "react-icons/hi2";      // 888 icons (Heroicons 2)
import { ImFolder, ImFolderOpen } from "react-icons/im";               // 491 icons (IcoMoon Free)
import { IoFolder, IoFolderOpen } from "react-icons/io";               // 696 icons (Ionicons 4)
import { IoFolderOutline, IoFolder } from "react-icons/io5";           // 1,332 icons (Ionicons 5)
import { LiaFolder, LiaFolderOpenSolid } from "react-icons/lia";       // ~800 icons (Line Awesome)
import { LuFolder, LuFolderOpen } from "react-icons/lu";               // 1,215 icons (Lucide)
import { PiFolder, PiFolderOpen } from "react-icons/pi";               // 9,072 icons (Phosphor Icons)
import { RiFolder2Line, RiFolderOpenLine } from "react-icons/ri";      // 2,860 icons (Remix Icon)
import { RxFolder, RxOpenInNewWindow } from "react-icons/rx";          // 318 icons (Radix Icons)
import { SiFolder, SiGithub } from "react-icons/si";                   // 3,209 icons (Simple Icons)
import { SlFolder, SlFolderAlt } from "react-icons/sl";                // 189 icons (Simple Line Icons)
import { TbFolder, TbFolderOpen } from "react-icons/tb";               // 5,237 icons (Tabler Icons)
import { TfiFolder, TfiFolderOpen } from "react-icons/tfi";            // 352 icons (Themify Icons)
import { TiFolder, TiFolderOpen } from "react-icons/ti";               // 336 icons (Typicons)
import { VscFolder, VscFolderOpened } from "react-icons/vsc";          // 461 icons (VS Code Icons)
import { WiCloud, WiDaySunny } from "react-icons/wi";                  // 219 icons (Weather Icons)

/**
 * Universal icon component interface
 * All icon components implement this pattern
 */
type IconType = (props: IconBaseProps) => React.ReactNode;

interface IconBaseProps extends React.SVGAttributes<SVGElement> {
  /** Child React elements (rarely used with icon components) */
  children?: React.ReactNode;
  /** Icon size override (e.g., "24px", "1.5em", 24) */
  size?: string | number;
  /** Icon color override (e.g., "red", "#ff0000", "currentColor") */
  color?: string;
  /** Accessibility title for screen readers */
  title?: string;
}

import { FaBeer } from "react-icons/fa";
import { MdAccessibility } from "react-icons/md";
import { AiFillHeart } from "react-icons/ai";

// Basic usage
<FaBeer />
<MdAccessibility />
<AiFillHeart />

// With custom properties
<FaBeer size="32px" color="orange" title="Beer icon" />
<MdAccessibility size={24} color="#0066cc" />
<AiFillHeart size="1.5em" style={{ marginRight: 8 }} />

// With SVG attributes
<FaBeer 
  size="48px" 
  color="gold"
  className="beer-icon"
  onClick={() => console.log('Beer clicked!')}
/>

// Font Awesome 5
import { FaBeer, FaFolder, FaHome } from "react-icons/fa";

// Font Awesome 6
import { Fa500Px, FaAccessibleIcon, FaAddressBook } from "react-icons/fa6";

// Material Design
import { MdAccessibility, MdHome, MdSettings } from "react-icons/md";

// Ant Design Icons
import { AiFillFolder, AiOutlineFolder, AiTwotoneLock } from "react-icons/ai";

// Bootstrap Icons
import { BsFolder, BsFillFolder, BsHouse } from "react-icons/bs";

// And so on for all 30+ libraries...

// Individual file imports using the @react-icons/all-files package
// Note: This is a separate npm package that must be installed separately
import FaBeer from "@react-icons/all-files/fa/FaBeer";
import MdHome from "@react-icons/all-files/md/MdHome";

// Installation: npm install @react-icons/all-files

// Only FaBeer and MdHome will be included in your bundle
import { FaBeer } from "react-icons/fa";
import { MdHome } from "react-icons/md";

// This imports the entire fa library (not recommended)
import * as fa from "react-icons/fa";

import * as Icons from "react-icons/fa";

function DynamicIcon({ iconName, ...props }) {
  const Icon = Icons[iconName];
  return Icon ? <Icon {...props} /> : null;
}

// Usage
<DynamicIcon iconName="FaBeer" size="24px" color="gold" />

const iconMap = {
  home: MdHome,
  folder: FaFolder,
  settings: BsGear,
  user: AiOutlineUser
};

function MappedIcon({ type, ...props }) {
  const Icon = iconMap[type];
  return Icon ? <Icon {...props} /> : null;
}