ProtrakFontAwesomeIcon

Reference

• This component is ideal for rendering FontAwesome icons with additional customization and dynamic fetching capabilities.
• The ProtrakFontAwesomeIcon component is a wrapper around the FontAwesomeIcon component from the @fortawesome/react-fontawesome library.
• It simplifies the usage of FontAwesome icons by integrating a utility function to fetch icons dynamically.
• It Fetches FontAwesome icons dynamically based on the provided name.
• It Supports custom styles, classes, and event handling.
• It Displays a tooltip using the title prop.

Props

1. className

   • Type: string
   • Description: The CSS class name(s) to apply to the icon for styling.

2. fontAwesomeIconName

   • Type: string
   • Default: ''
   • Description: The name of the FontAwesome icon to render.

3. style

   • Type: object
   • Default: {}
   • Description: Inline styles to apply to the icon.

4. onClick

   • Type: function
   • Default: () => {}
   • Description: Callback function triggered when the icon is clicked.

5. title

   • Type: string
   • Default: ''
   • Description: Tooltip text displayed when hovering over the icon.

Usage Example

import { ProtrakFontAwesomeIcon } from './ProtrakFontAwesomeIcon';

function Example(pageContext) {
const { protrakComponents } = React.useContext(customWidgetContext);
const { ProtrakFontAwesomeIcon } = protrakComponents;
return(
  <ProtrakFontAwesomeIcon
    className="custom-icon"
    fontAwesomeIconName="faCoffee"
    style={{ color: 'blue', fontSize: '24px' }}
    onClick={() => console.log('Icon clicked!')}
    title="Coffee Icon"
  />
);
}

• This renders a blue coffee icon with a tooltip "Coffee Icon" and logs a message when clicked.