CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-patternfly--react-icons

PatternFly 4 Icons as React Components providing tree-shakable icon imports with TypeScript support

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview
Eval results
Files

PatternFly React Icons

PatternFly React Icons provides over 1,100 icon components for React applications, offering a comprehensive collection from FontAwesome, PatternFly design system, and custom Red Hat ecosystem icons. All icons are provided as tree-shakable React components with full TypeScript support and built-in accessibility features.

Package Information

  • Package Name: @patternfly/react-icons
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @patternfly/react-icons

Core Imports

import { UserIcon, ArrowRightIcon } from "@patternfly/react-icons";
import { createIcon } from "@patternfly/react-icons/dist/esm/createIcon";
import type { SVGIconProps, IconDefinition } from "@patternfly/react-icons/dist/esm/createIcon";

For individual icon imports (recommended for tree-shaking):

import UserIcon from "@patternfly/react-icons/dist/esm/icons/user-icon";
import ArrowRightIcon from "@patternfly/react-icons/dist/esm/icons/arrow-right-icon";

For CommonJS:

const { UserIcon, ArrowRightIcon } = require("@patternfly/react-icons");

Basic Usage

import { UserIcon, ArrowRightIcon, CheckIcon } from "@patternfly/react-icons";

function MyComponent() {
  return (
    <div>
      {/* Simple icon usage */}
      <UserIcon />
      
      {/* Icon with accessibility title */}
      <ArrowRightIcon title="Navigate to next page" />
      
      {/* Icon with custom styling */}
      <CheckIcon className="text-green-500" style={{ fontSize: '24px' }} />
    </div>
  );
}

Architecture

PatternFly React Icons is built around several key components:

  • Icon Factory: createIcon function generates React class components from icon definitions
  • Icon Components: Over 1,100 pre-built icon components with consistent naming ({Name}Icon)
  • Type System: Full TypeScript integration with SVGIconProps and IconDefinition interfaces
  • Accessibility Engine: Built-in ARIA support with optional titles and semantic markup
  • Build System: Generated components support both ESM and CJS with optimal tree-shaking

Capabilities

Icon Components

Pre-built React components for all icons from FontAwesome, PatternFly, and custom sources. Each icon follows consistent naming patterns and includes accessibility features.

// Example icon components
const UserIcon: React.ComponentClass<SVGIconProps>;
const ArrowRightIcon: React.ComponentClass<SVGIconProps>;
const CheckIcon: React.ComponentClass<SVGIconProps>;

interface SVGIconProps extends Omit<React.HTMLProps<SVGElement>, 'ref'> {
  title?: string;
  className?: string;
}

Icon Components

Icon Factory

Factory function for creating custom icon components from icon definitions, enabling creation of custom icons that match the library's patterns.

function createIcon(iconDefinition: IconDefinition): React.ComponentClass<SVGIconProps>;

interface IconDefinition {
  name?: string;
  width: number;
  height: number;
  svgPath: string | SVGPathObject[];
  xOffset?: number;
  yOffset?: number;
  svgClassName?: string;
}

interface SVGPathObject {
  path: string;
  className?: string;
}

Icon Factory

Icon Collections

Comprehensive categorized collections of icons from different sources, each with specific naming conventions and use cases.

// FontAwesome Icons (1000+ icons)
const TimesIcon: React.ComponentClass<SVGIconProps>;          // Solid icons
const OutlinedUserIcon: React.ComponentClass<SVGIconProps>;  // Regular icons  
const FacebookIcon: React.ComponentClass<SVGIconProps>;      // Brand icons

// PatternFly Icons (100+ icons)
const SaveAltIcon: React.ComponentClass<SVGIconProps>;
const EditAltIcon: React.ComponentClass<SVGIconProps>;

// Custom Icons (10 icons)
const OpenshiftIcon: React.ComponentClass<SVGIconProps>;
const AzureIcon: React.ComponentClass<SVGIconProps>;

Icon Collections

Types

interface SVGIconProps extends Omit<React.HTMLProps<SVGElement>, 'ref'> {
  /** Accessibility title for the icon */
  title?: string;
  /** Additional CSS classes */
  className?: string;
}

interface IconDefinition {
  /** Display name for the icon component */
  name?: string;
  /** Icon width in pixels */
  width: number;
  /** Icon height in pixels */
  height: number;
  /** SVG path data or array of path objects */
  svgPath: string | SVGPathObject[];
  /** X-axis offset (default: 0) */
  xOffset?: number;
  /** Y-axis offset (default: 0) */
  yOffset?: number;
  /** CSS class for the SVG element */
  svgClassName?: string;
}

interface SVGPathObject {
  /** SVG path data */
  path: string;
  /** CSS class for this specific path */
  className?: string;
}

interface IconConfig {
  name: string;
  height: number;
  width: number;
  svgPath: string | SVGPathObject[];
  yOffset: number;
  xOffset: number;
  svgClassName: string | null;
}

Install with Tessl CLI

npx tessl i tessl/npm-patternfly--react-icons
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@patternfly/react-icons@6.3.x
Publish Source
CLI
Badge
tessl/npm-patternfly--react-icons badge