tessl/npm-react-icons

SVG React icons of popular icon packs using ES6 imports

—

Pending

Overview

Eval results

Files

Core Components

Name: tessl/npm-react-icons
Author: tessl

Core infrastructure components for rendering and configuring SVG icons. These components provide the foundation for all icon rendering in React Icons.

Capabilities

IconBase Component

The base component for rendering SVG icons with context support and customizable properties.

/**
 * Base component for rendering SVG icons with context support
 * @param props - Icon properties including size, color, and SVG attributes
 * @returns JSX.Element representing the SVG icon
 */
function IconBase(
  props: IconBaseProps & { attr?: Record<string, string> }
): JSX.Element;

interface IconBaseProps extends React.SVGAttributes<SVGElement> {
  /** Child React elements to render inside the SVG */
  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;
}

Usage Examples:

import { IconBase } from "react-icons";

// Basic usage with custom attributes
<IconBase size="24px" color="blue" title="Custom icon">
  <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
</IconBase>

// With custom SVG attributes
<IconBase 
  viewBox="0 0 24 24" 
  strokeWidth="2"
  style={{ border: "1px solid gray" }}
>
  <circle cx="12" cy="12" r="10"/>
</IconBase>

IconType Type

Function type definition for all icon components in the library.

/**
 * Function type for icon components
 * @param props - Icon base properties
 * @returns React node representing the icon
 */
type IconType = (props: IconBaseProps) => React.ReactNode;

GenIcon Function

Utility function that generates icon components from IconTree data structures.

/**
 * Generates icon component from IconTree data
 * @param data - IconTree structure containing SVG element data
 * @returns Function that renders the icon component
 */
function GenIcon(data: IconTree): (props: IconBaseProps) => JSX.Element;

interface IconTree {
  /** SVG element tag name (e.g., "svg", "path", "circle") */
  tag: string;
  /** Element attributes as key-value pairs */
  attr: { [key: string]: string };
  /** Array of child IconTree elements */
  child: IconTree[];
}

Usage Examples:

import { GenIcon } from "react-icons";

// Create a custom icon component from SVG path data
const CustomIcon = GenIcon({
  tag: "svg",
  attr: { viewBox: "0 0 24 24" },
  child: [
    {
      tag: "path",
      attr: { d: "M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" },
      child: []
    }
  ]
});

// Use the generated icon (supports all IconBase props)
<CustomIcon size="32px" color="green" title="Custom House Icon" />

// Complex multi-element icon
const ComplexIcon = GenIcon({
  tag: "svg",
  attr: { viewBox: "0 0 24 24", fill: "currentColor" },
  child: [
    {
      tag: "circle",
      attr: { cx: "12", cy: "12", r: "10", fill: "none", stroke: "currentColor", strokeWidth: "2" },
      child: []
    },
    {
      tag: "path",
      attr: { d: "M9 12l2 2 4-4" },
      child: []
    }
  ]
});

Advanced Usage

Custom Icon Creation

import { IconBase, GenIcon } from "react-icons";

// Method 1: Direct IconBase usage
const DirectIcon = (props) => (
  <IconBase {...props}>
    <path d="M12 2L2 7v10c0 5.55 3.84 9.74 9 11 5.16-1.26 9-5.45 9-11V7l-10-5z"/>
  </IconBase>
);

// Method 2: Using GenIcon
const GeneratedIcon = GenIcon({
  tag: "svg",
  attr: { viewBox: "0 0 24 24" },
  child: [{
    tag: "path",
    attr: { d: "M12 2L2 7v10c0 5.55 3.84 9.74 9 11 5.16-1.26 9-5.45 9-11V7l-10-5z" },
    child: []
  }]
});

Error Handling

Icons gracefully handle missing context by falling back to DefaultContext. Invalid props are handled by React's standard SVG attribute validation.

// Icons work without context
<FaBeer size="24px" /> // Uses default context values

// Invalid props are filtered by React
<FaBeer invalidProp="value" size="24px" /> // invalidProp is ignored

Install with Tessl CLI