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

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

PatternFly React Icons

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

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