or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

context-configuration.mdcore-components.mdicon-libraries.mdindex.md
tile.json

tessl/npm-react-icons

SVG React icons of popular icon packs using ES6 imports

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/react-icons@5.5.x

To install, run

npx @tessl/cli install tessl/npm-react-icons@5.5.0

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;

Core Components

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";

Icon Libraries

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>;
}

Context Configuration

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[];
}