createIcon

A utility function for creating custom icon components compatible with the Fusion UI icon system.

Usage

The createIcon utility takes SVG path elements and returns a new Icon component that integrates with Fusion UI’s styling system. This is particularly useful when you need to add custom icons to your application.

You can create an icon by passing the SVG’s <path> elements to createIcon.

const CustomIcon = createIcon(
  <>
    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" />
    <path d="M12 12m-5 0a5 5 0 1010 0 5 5 0 10-10 0" />
  </>
);

render(<CustomIcon size="large" text={{ color: "success.base" }} />);

By default, the viewBox is set to 0 0 24 24, so any paths are assumed to be in this coordinate space. However, you can also provide a viewBox property if your icon requires a specific viewport.

import { createIcon } from "@codedazur/fusion-ui";
 
const CustomIcon = createIcon({
  viewBox: "0 0 100 100",
  children: <path d="M25 50v-15h10v15h12.5v-20h7.5L50 7.5 12.5 45h7.5v20z" />,
});

API

The createIcon function returns an Icon component that can be used throughout your application and accepts standard Icon props like size and color. You can either pass the SVG path elements directly as the first argument or an object with the children and viewBox properties.

function createIcon(children: React.ReactNode): Icon;
function createIcon(options: {
  children: React.ReactNode;
  viewBox?: string;
}): Icon;

Parameters

• children: The SVG path elements (<path>, <g>, etc.) that make up the icon.
• viewBox (optional): The viewBox attribute for the SVG.

Returns

• An Icon component that can be used throughout your application and accepts standard Icon props like size and color.