Releases · Cratis/Components

Any component accepting an icon as a string should also accept a ReactNode — enabling SVG components, third-party icon libraries, or arbitrary elements as icons without workarounds.

Added

Icon type (string | ReactNode) in Common/Icon.tsx — shared union type for all icon props
IconDisplay component in Common/Icon.tsx — renders a CSS class string as <i className={...} /> or passes a ReactNode through directly; exported from @cratis/components/Common
Storybook stories for IconDisplay covering string icon, string with extra class, SVG ReactNode, arbitrary ReactNode, and a side-by-side comparison (Common/Icon.stories.tsx)
WithReactNodeIcons Storybook story in the Toolbar demonstrating SVG icons in ToolbarButton and ToolbarFanOutItem alongside existing string usage
Documentation/Common/icon.md — covers the Icon type, IconDisplay props, and ReactNode usage examples

Changed

ToolbarButton.icon widened from string to Icon
ToolbarFanOutItem.icon widened from string to Icon
Documentation/Common/index.md and toc.yml updated to include the new Icon page
Documentation/Toolbar/basic-usage.md updated with a ReactNode icons section and cross-reference
Documentation/Toolbar/fan-out.md updated with a ReactNode icons section and cross-reference

Usage example — both forms work interchangeably:

// String (PrimeIcons) — existing usage unchanged
<ToolbarButton icon="pi pi-pencil" tooltip="Draw" />

// ReactNode — now supported
<ToolbarButton icon={<FaPencil />} tooltip="Draw" />
<ToolbarFanOutItem icon={<MyCustomSvg />} tooltip="Shapes">...</ToolbarFanOutItem>