Icons

reUI components have a minimum set of required icons that must be provided in order to be rendered. Hero Icons provides a great starter set to get up and running quickly:

import { IconProvider } from '@reui/reui';
import { CheckIcon, ChevronUpDownIcon, ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/solid';

export function App() {
    return (
        <IconProvider
            value={{
                CheckIcon,
                ChevronDownIcon,
                ChevronUpIcon,
                ChevronUpDownIcon,
            }}
        >
            <TheRestOfMyApplication />
        </IconProvider>
    );
}

render(<App />);

At a minimum, the following are required:

Name	Example	Usage
CheckIcon		CheckBoxes
ChevronDownIcon		SelectField in default state
ChevronUpIcon		SelectField in open state

Additionally, extra icons can be provided and use in various other locations. For example, many components accept a leadingIcon or trailingIcon property:

import { TextField } from '@reui/reui';

<IconProvider value={{ ...defaultIcons, LinkIcon }}>
    <TextField leadingIcon="LinkIcon" label="Will render a link at the beginning of the input" />
</IconProvider>;