tessl/npm-react-icons
SVG React icons of popular icon packs using ES6 imports
—
index.mddocs/
React Icons
React Icons provides a comprehensive collection of popular icon libraries as React SVG components, enabling developers to easily include icons from Font Awesome, Material Design, Ionicons, Feather, and many other icon sets in their React applications. It offers tree-shaking support through ES6 imports, allowing developers to import only the specific icons they need, significantly reducing bundle size.
Package Information
- Package Name: react-icons
- Package Type: npm
- Language: TypeScript/JavaScript
- Installation:
npm install react-icons - Version: 5.5.0
- React Compatibility: Requires React 16.3+ (for Context API support)
Core Imports
import { IconContext } from "react-icons";
import { FaBeer } from "react-icons/fa";
import { MdAccessibility } from "react-icons/md";
import { AiFillFolder } from "react-icons/ai";For CommonJS:
const { IconContext } = require("react-icons");
const { FaBeer } = require("react-icons/fa");Basic Usage
import React from "react";
import { IconContext } from "react-icons";
import { FaBeer } from "react-icons/fa";
import { MdAccessibility } from "react-icons/md";
function MyComponent() {
return (
<div>
{/* Basic icon usage */}
<FaBeer color="red" size="24px" title="Beer icon" />
{/* Using context for global configuration */}
<IconContext.Provider value={{ color: "blue", size: "1.5em" }}>
<MdAccessibility />
<FaBeer />
</IconContext.Provider>
</div>
);
}Architecture
React Icons is built around several key components:
- Core Components:
IconBase,IconContext, and utility functions for rendering SVG icons - Icon Libraries: 30+ individual icon libraries (fa, md, ai, etc.) with thousands of components each
- Tree-shaking Support: ES6 imports allow bundlers to include only used icons
- Type System: Full TypeScript integration with proper type definitions
- Context System: React Context API for global icon configuration
Capabilities
Core Components
Core infrastructure components for rendering and configuring SVG icons. These components provide the foundation for all icon rendering.
interface IconContext {
color?: string;
size?: string;
className?: string;
style?: React.CSSProperties;
attr?: React.SVGAttributes<SVGElement>;
}
const IconContext: React.Context<IconContext>;
interface IconBaseProps extends React.SVGAttributes<SVGElement> {
children?: React.ReactNode;
size?: string | number;
color?: string;
title?: string;
}
function IconBase(props: IconBaseProps & { attr?: Record<string, string> }): JSX.Element;Icon Libraries
Access to 40,000+ icons from 30+ different icon libraries including Font Awesome, Material Design, Bootstrap, Feather, and many more. Each library provides hundreds to thousands of individual icon components.
type IconType = (props: IconBaseProps) => React.ReactNode;
// Example icon imports from various libraries
import { FaBeer, FaFolder, FaRegClipboard } from "react-icons/fa";
import { MdAccessibility, MdHome, MdOutlineHome } from "react-icons/md";
import { AiFillFolder, AiOutlineFolder } from "react-icons/ai";
import { BsFolder, BsFillFolder } from "react-icons/bs";Context Configuration
Global configuration system using React Context API for setting default icon properties across your application.
const DefaultContext: IconContext;
interface IconContext {
color?: string;
size?: string;
className?: string;
style?: React.CSSProperties;
attr?: React.SVGAttributes<SVGElement>;
}Icons Manifest
Metadata about all available icon libraries, providing information about each library including name, project URL, and license details.
interface IconManifestType {
id: string;
name: string;
projectUrl: string;
license: string;
licenseUrl: string;
}
const IconsManifest: IconManifestType[];Usage Examples:
import { IconsManifest } from "react-icons";
// Alternative import path:
// import { IconsManifest } from "react-icons/lib";
// Get information about all available libraries
console.log(IconsManifest);
// Output: Array of library metadata including fa, md, ai, bs, etc.
// Find specific library information
const faLibrary = IconsManifest.find(lib => lib.id === 'fa');
console.log(faLibrary.name); // "Font Awesome 5"
console.log(faLibrary.license); // "CC BY 4.0 License"Types
interface IconTree {
tag: string;
attr: { [key: string]: string };
child: IconTree[];
}Install with Tessl CLI
npx tessl i tessl/npm-react-icons