Customizing Icons

Custom Icons

Instead of using a specific predefined icon component, you can also use the Icon component directly.

<Icon viewBox="0 0 48 48" padding={300}>
  <path d="..." />
</Icon>

You can pass a path or any other valid SVG element as children, and you can also pass any other valid BoxProps to the Icon component.

To make it reusable, you can turn this into a function component.

const MyIcon = (props: Omit<IconProps, "viewBox" | "children">) => (
  <Icon viewBox="0 0 48 48" {...props}>
    <path d="..." />
  </Icon>
);

<MyIcon padding={300} />

By using the IconProps type, you can ensure that the Icon component will inherit all of the BoxProps, but you may want to exclude the viewBox and children props.

Using createIcon

If you want, you can also use the createIcon function to simplify the creation of the icon.

const MyIcon = createIcon({
  viewBox: "0 0 48 48",
  children: <path d="..." />,
});

<MyIcon padding="300" />

Any Icon component created with the createIcon utility will automatically inherit all of the BoxProps except for the viewBox and children props.

Overriding and Extending

You can remap existing icons to other existing icons, or you can override an existing icon with custom paths, or you can add a completely new icon that isn’t part of Fusion.

import {
  createIcon,
  extendIcon,
  ComponentProvider,
  Icon,
} from "@codedazur/fusion-ui";
 
const MyIcon = extendIcon(Icon, {
  ArrowDropDown: Icon.Add,
  ArrowDropUp: createIcon(<path d="M5 13V11H19V13H5Z" />),
  Star: createIcon(
    <path d="M12 2.5L9.5 8.5H3.5L8.5 12.5L6.5 18.5L12 14.5L17.5 18.5L15.5 12.5L20.5 8.5H14.5L12 2.5Z" />,
  ),
});

You can then provide your icon component to Fusion using the ComponentProvider, so that components in Fusion will use your overrides. As always, depending on where you render the provider, you can override icons for the entire app, or for a particular part of the app.

<ComponentProvider components={{ Icon: MyIcon }}>

Throughout your project, you can use your extended icon component directly.

<MyIcon.Star />

const { Icon } = useComponents();
 
<Icon.Star />;
//    ^^^^ Property "Star" does not exist on type "Icon".