Home > @cascadiacollections/fluentui-compat > bundleIcon

bundleIcon() function

Creates an optimized bundled icon component that renders either a filled or regular icon based on the filled prop. The component is memoized for optimal render performance.

Signature:

bundleIcon: (FilledIcon: FluentIcon, RegularIcon: FluentIcon) => React.ComponentType<BundledIconProps>

Parameters

Parameter	Type	Description
FilledIcon	FluentIcon	The filled variant of the icon
RegularIcon	FluentIcon	The regular variant of the icon

**Returns:**

React.ComponentType<BundledIconProps>

A memoized React component that renders the appropriate icon variant

Example

import { bundleIcon } from 'fluentui-compat';
import { HeartFilled, HeartRegular } from '@fluentui/react-icons';

const HeartIcon = bundleIcon(HeartFilled, HeartRegular);

// Usage in component
<HeartIcon filled={isLiked} onClick={handleToggle} />