React Icon Button Component

This challenge asks you to build a reusable React component that renders an icon button. Icon buttons are a common UI element used for triggering actions with a visual cue, and creating a flexible, reusable component is a fundamental skill in React development. This component should accept an icon, an onClick handler, and styling options to allow for customization.

Problem Description

You need to create a IconButton component in React using TypeScript. This component should:

• Accept Props:
  • icon: A React node (e.g., an SVG, an image, or a text string) representing the icon to display. This is a required prop.
  • onClick: A function to be called when the button is clicked. This is a required prop.
  • className: (Optional) A string representing CSS class names to apply to the button's root element.
  • disabled: (Optional) A boolean value. If true, the button should be visually disabled (e.g., grayed out) and the onClick handler should not be triggered. Defaults to false.
  • style: (Optional) An object containing inline styles to apply to the button's root element.
• Render a Button Element: The component should render a standard <button> element.
• Apply Styling: The component should apply the provided className and style props to the button element.
• Handle Click Events: The component should call the provided onClick function when the button is clicked, unless it's disabled.
• Visual Disabled State: When the disabled prop is true, the button should be visually disabled. A simple way to achieve this is by adding the disabled attribute to the button and potentially changing its opacity or color.
• Accessibility: Ensure the button is accessible by using appropriate ARIA attributes if necessary (e.g., aria-disabled when disabled is true).

Examples

Example 1:

Input:
<IconButton icon={<FaHome />} onClick={() => console.log("Home clicked")} className="home-button" />
Output:
A button displaying a home icon, with the class "home-button", that logs "Home clicked" to the console when clicked.
Explanation: The component renders a button with the provided icon and class name, and calls the onClick function when clicked.

Example 2:

Input:
<IconButton icon={<FaSearch />} onClick={() => alert("Search")} disabled />
Output:
A button displaying a search icon that is visually disabled and does not trigger the alert when clicked.
Explanation: The component renders a disabled button with the provided icon and does not call the onClick function when clicked.

Example 3:

Input:
<IconButton icon={<FaHeart />} onClick={() => console.log("Like")} style={{backgroundColor: 'red', color: 'white'}} />
Output:
A button displaying a heart icon with a red background and white text, that logs "Like" to the console when clicked.
Explanation: The component renders a button with the provided icon and inline styles.

Constraints

• The component must be written in TypeScript.
• The component should be reusable and accept different icons and onClick handlers.
• The component should handle the disabled state correctly.
• The component should be able to accept and apply CSS class names and inline styles.
• The icon prop can be any valid React node.
• The onClick prop must be a function.

Notes

• Consider using CSS-in-JS libraries (like styled-components or Emotion) or standard CSS modules for styling, but plain CSS is also acceptable.
• Focus on creating a clean, well-structured component that is easy to understand and maintain.
• Think about how you would make this component even more flexible in the future (e.g., adding support for different button sizes, colors, or icon positions).
• You can use any React icon library you prefer (e.g., Font Awesome, React Icons). For the examples, FaHome, FaSearch, and FaHeart are assumed to be imported from a library like Font Awesome. You'll need to install and import the necessary icons for your solution.