Icon
The Icon component is used to embed iconography within your application, allowing for the inclusion of scalable graphic elements. This component supports multiple sizes, making it versatile for different visual contexts and UI requirements.
Effective Practices
When using the Icon component, consider the following best practices:
- Accessibility: Always include appropriate alternative text if the icon conveys meaningful information or actions, to ensure accessibility for screen readers.
- Scalability: Utilize the size variants to match the icon’s scale appropriately to its context within the interface.
- Consistency: Maintain visual consistency by using icons of a similar style and proportion across your application.
Usage Guidelines
Basic Icon
Display an icon by passing a React component that renders an SVG or similar graphic.
import { YourIcon } from "./path/to/icons";<Icon icon={YourIcon} />;Size Variants
The size prop allows you to adjust the icon’s dimensions to match the desired visual scale.
xs:
Extra small icon size.
<Icon icon={YourIcon} size="xs" />sm:
Small icon size.
<Icon icon={YourIcon} size="sm" />md:
Medium icon size (default).
<Icon icon={YourIcon} size="md" />lg:
Large icon size.
<Icon icon={YourIcon} size="lg" />Props
icon ComponentType<{}>
The icon component to render.
size ? "xs" | "sm" | "md" | "lg" | null
Optional size of the icon.
Defaults to md