Icon

The Icon component is used to display vector icons throughout your application. It extends the Box component, applying specific styling for SVG icons.

Basic Usage

import { Icon } from "@codedazur/fusion-ui";
 
function Example() {
  return <Icon.Home />;
}

Sizes

Icon sizes are defined through component variants:

<Icon.Home size="small" />
<Icon.Home size="medium" /> {/* default */}
<Icon.Home size="large" />

You can also specify a custom numeric size (in pixels) which will be applied to the fontSize property:

<Icon.Home size={16} />
<Icon.Home size={24} />
<Icon.Home size={32} />

Color and Fill

Icons use the currentColor by default, inheriting color from their parent:

<div style={{ color: "blue" }}>
  <Icon.Home /> {/* Will be blue */}
</div>

You can also set a specific color using the Box color prop:

<Icon.Home color="primary.base" />
<Icon.Home color="secondary.base" />
<Icon.Home color="surface.onBase" />

Accessibility

Icons include accessibility attributes for better screen reader support:

<Icon.Search title="Search" focusable={true} aria-label="Search button" />

When title is provided, the icon will:

• Have an SVG <title> element
• Have role="img" instead of aria-hidden="true"

Extending with Custom Icons

You can create custom icons using the createIcon utility:

import { createIcon } from "@codedazur/fusion-ui";
import { ReactComponent as CustomSVG } from "./custom-icon.svg";
 
const CustomIcon = createIcon(CustomSVG);
 
function Example() {
  return <CustomIcon size="large" color="primary.base" />;
}

Inheriting Box Props

Since Icon inherits from Box, you can use all Box props:

<Icon.Settings
  margin={{ right: "300" }}
  padding="200"
  background={{ color: "surface.base" }}
  border={{ radius: "full" }}
  opacity="75"
/>

Responsive Styling

Apply different styles at different breakpoints:

<Icon.Menu
  size={{ small: "small", large: "large" }}
  color={{ small: "primary.base", large: "secondary.base" }}
  display={{ small: "none", medium: "block" }}
/>

Reference

Props

Icon inherits all Box props and adds:

Available Icons

The Icon object contains predefined icons such as:

• UI icons: Home, Close, Menu, Search, etc.
• Action icons: Add, Remove, Edit, Delete, etc.
• Navigation icons: ArrowLeft, ArrowRight, ChevronUp, ChevronDown, etc.
• And many more

For a complete list of available icons, refer to the package source code or component explorer.