tessl/npm-patternfly--react-icons
PatternFly 4 Icons as React Components providing tree-shakable icon imports with TypeScript support
—
Quality
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
icon-components.mddocs/
Icon Components
Pre-built React icon components providing access to over 1,100 icons from FontAwesome, PatternFly design system, and custom Red Hat ecosystem collections. Each icon is a React class component with consistent properties and built-in accessibility features.
Capabilities
Component Structure
All icon components share the same structure and properties.
/**
* Base icon component interface - all icons implement this structure
*/
interface IconComponent extends React.ComponentClass<SVGIconProps> {
/** Component display name for debugging */
displayName: string;
}
interface SVGIconProps extends Omit<React.HTMLProps<SVGElement>, 'ref'> {
/** Accessibility title for screen readers */
title?: string;
/** Additional CSS classes */
className?: string;
}Usage Patterns
Icons can be imported and used in multiple ways depending on your bundling requirements.
Named Imports (for development convenience):
import { UserIcon, ArrowRightIcon, CheckIcon } from "@patternfly/react-icons";
<UserIcon />
<ArrowRightIcon title="Next page" />
<CheckIcon className="success-icon" />Individual Imports (recommended for production 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";
<UserIcon />
<ArrowRightIcon title="Next page" />Icon Props
All icon components accept standard SVG element properties plus additional options.
/**
* Props accepted by all icon components
*/
interface SVGIconProps extends Omit<React.HTMLProps<SVGElement>, 'ref'> {
/**
* Accessibility title - adds <title> element and aria-labelledby attribute
* When omitted, icon has aria-hidden="true"
*/
title?: string;
/** Additional CSS classes to apply to the SVG element */
className?: string;
/** Standard SVG properties like style, onClick, onMouseOver, etc. */
// Inherits all React.HTMLProps<SVGElement> except 'ref'
}Usage Examples:
// Accessibility with title
<UserIcon title="User profile" />
// Custom styling
<ArrowRightIcon
className="nav-arrow"
style={{ color: 'blue', fontSize: '20px' }}
/>
// Event handling
<CheckIcon
onClick={() => console.log('Clicked')}
onMouseOver={() => console.log('Hovered')}
/>
// ARIA attributes and other SVG props
<TimesIcon
role="button"
tabIndex={0}
data-testid="close-button"
/>Accessibility Features
All icons include comprehensive accessibility support out of the box.
ARIA Attributes:
role="img"for semantic meaningaria-hidden="true"when no title is providedaria-labelledbylinks to title element when title is provided
Visual Properties:
fill="currentColor"inherits text color from parentwidth="1em"andheight="1em"scale with font sizeviewBoxproperly configured for each icon
Title Support:
- Optional
titleprop adds<title>element with unique ID - Automatically manages
aria-labelledbyrelationship for screen readers
CSS Classes
Every icon receives consistent CSS classes for styling integration.
/**
* CSS classes applied to all icon components
*/
interface IconCSSClasses {
/** Base PatternFly v6 SVG identifier - always present */
'pf-v6-svg': true;
/** Icon-specific class from svgClassName property (if defined) */
[iconSpecificClass: string]: boolean;
/** Custom classes from className prop */
[customClass: string]: boolean;
}Styling Examples:
/* Target all PatternFly icons */
.pf-v6-svg {
transition: color 0.2s ease;
}
/* Custom icon styling */
.my-icon {
color: #0066cc;
font-size: 18px;
}
/* Hover effects */
.clickable-icon:hover .pf-v6-svg {
color: #004499;
}Icon Configuration Objects
Each icon component also exports a configuration object containing its definition data.
/**
* Configuration object exported alongside each icon component
* Available as {IconName}Config export
*/
interface IconConfig {
/** Component name */
name: string;
/** Icon height in pixels */
height: number;
/** Icon width in pixels */
width: number;
/** SVG path data or array of path objects */
svgPath: string | SVGPathObject[];
/** Y-axis offset */
yOffset: number;
/** X-axis offset */
xOffset: number;
/** CSS class for the SVG element */
svgClassName: string | null;
}Usage Example:
import { UserIcon, UserIconConfig } from "@patternfly/react-icons";
console.log(UserIconConfig);
// {
// name: 'UserIcon',
// height: 448,
// width: 448,
// svgPath: 'M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128z...',
// yOffset: 0,
// xOffset: 0,
// svgClassName: null
// }Naming Convention
All icon components follow a consistent PascalCase naming pattern with "Icon" suffix.
Transform Rules:
- Kebab-case to PascalCase:
arrow-right→ArrowRightIcon - Numbers to words:
500px→FiveHundredPxIcon - Special prefixes:
outlined-user→OutlinedUserIcon - Brand names preserved:
facebook→FacebookIcon
Component Examples:
// Standard icons
const UserIcon: React.ComponentClass<SVGIconProps>;
const ArrowRightIcon: React.ComponentClass<SVGIconProps>;
const CheckCircleIcon: React.ComponentClass<SVGIconProps>;
// Outlined (FontAwesome regular) icons
const OutlinedUserIcon: React.ComponentClass<SVGIconProps>;
const OutlinedBellIcon: React.ComponentClass<SVGIconProps>;
// Brand icons
const FacebookIcon: React.ComponentClass<SVGIconProps>;
const TwitterIcon: React.ComponentClass<SVGIconProps>;
const GithubIcon: React.ComponentClass<SVGIconProps>;
// PatternFly renamed icons
const SaveAltIcon: React.ComponentClass<SVGIconProps>;
const EditAltIcon: React.ComponentClass<SVGIconProps>;
const UserSecIcon: React.ComponentClass<SVGIconProps>;
// Custom Red Hat ecosystem icons
const OpenshiftIcon: React.ComponentClass<SVGIconProps>;
const AzureIcon: React.ComponentClass<SVGIconProps>;
const OpenstackIcon: React.ComponentClass<SVGIconProps>;Install with Tessl CLI
npx tessl i tessl/npm-patternfly--react-icons