Icon

The Icon type and IconDisplay component provide a unified way to pass icons throughout the component library. Any component that accepts an icon can receive either a PrimeIcons CSS class string or any React node.

Icon Type

import type { Icon } from '@cratis/components/Common';

// A PrimeIcons (or other icon-font) CSS class string
const stringIcon: Icon = 'pi pi-home';

// Any React node — SVG component, third-party icon, emoji wrapper, …
const nodeIcon: Icon = <MyCustomSvgIcon />;

IconDisplay Component

IconDisplay renders an Icon value:

• A non-empty string is treated as a CSS class and rendered as <i className={...} />.
• Any other value (React node) is rendered as-is.

import { IconDisplay } from '@cratis/components/Common';

// Renders: <i className="pi pi-home text-2xl" />
<IconDisplay icon='pi pi-home' className='text-2xl' />

// Renders the SVG element directly
<IconDisplay icon={<MyHomeIcon />} />

Props

Prop	Type	Required	Description
icon	Icon	✅	The icon to render — a CSS class string or a React node.
className	string	—	Extra CSS classes added to the <i> wrapper when icon is a string. Has no effect for React node icons.

Using ReactNode Icons in Toolbar Components

ToolbarButton and ToolbarFanOutItem both accept Icon for their icon prop. String-based usage is unchanged:

import { Toolbar, ToolbarButton, ToolbarFanOutItem } from '@cratis/components/Toolbar';
import { FaPencil, FaShapes } from 'react-icons/fa6';

function MyToolbar() {
    return (
        <Toolbar>
            {/* String — existing usage unchanged */}
            <ToolbarButton icon='pi pi-arrow-up-left' title='Select' />

            {/* ReactNode — third-party icon component */}
            <ToolbarButton icon={<FaPencil />} title='Draw' />

            {/* ReactNode — fan-out trigger */}
            <ToolbarFanOutItem icon={<FaShapes />} tooltip='Shapes'>
                <ToolbarButton icon='pi pi-stop' title='Rectangle' />
                <ToolbarButton icon='pi pi-circle' title='Circle' />
            </ToolbarFanOutItem>
        </Toolbar>
    );
}