Using icons in components

C3 UI Framework utilizes icons from the FontAwesome library. FontAwesome is a popular library that provides a wide range of scalable vector icons that can be easily customized and integrated into web projects. FontAwesome icons can be used as CSS classNames in the C3 UI Framework by specifying c3-icon- as a prefix to the icon you want to use.

Copy link to this section

Getting the classname for an icon:

1. Visit the FontAwesome Website: Go to the FontAwesome website to explore the available icons.
2. Search for Icons: Use the search bar to find icons related to your needs. You can search by keywords or browse through categories.
3. Select an Icon: Click on the icon you want to use. This will take you to the icon's detail page.
4. Get the Icon Name: On the icon's detail page, you'll find the icon's name and FontAwesome classname. The FontAwesome classname typically starts with "fa-" followed by the specific icon name. Take a note on just the specific icon name and not the full FontAwesome classname.
5. Generate C3 Classname for an Icon: To make sure that an icon is rendered properly in C3 applications, the icon name needs to be prefixed with c3-icon-. For example, the C3-compatible classname for the home icon is c3-icon-home.

Copy link to this section

Using Icons in Declarative Components

Declarative components already have the logic to add the c3-icon- prefix to the icon classname in their implementation. This means that we only need to supply the icon name to the component. The field for icons would typically be named iconSuffix. Here is an example of an instance of UiSdlPageTitle component where the search icon is used in the action button in the component.

{
  "type": "UiSdlConnected<UiSdlPageTitle>",
  "component": {
    "title": "PageTitle",
    "actionGroup": {
      "actions": [
        {
          "name": "Search",
          "actionSuffix": "SEARCH",
          "iconSuffix": "search",
          "usage": "primary"
        }
      ]
    }
  }
}

Copy link to this section

Using Icons in Custom Components

For custom component, we need to make sure that the icon name is prefixed with the c3-icon prefix. Here is an example of a custom button component and how the icon name is prefixed appropriately. The button prop here could be passed in from a .c3typ as a default value, an enum in the tsx file, etc.

const CustomButton = ({ button, height }) => {
  const translate = useTranslate();
  const labelText = translate({ spec: button.label });
  const icon = <div className={classNames('icon', 'c3-icon', `c3-icon-${button.iconName}`)} />;
  const label = <p className={classNames(height?.toLowerCase(), 'c3-segmented-button-text')}>{labelText}</p>;
  return (
    <div className="c3-icon-with-text-container">
      {icon}
      {label}
    </div>
  );
};

Copy link to this section

FontAwesome Version

We are currently using FontAwesome Pro v6.2.1. The SCSS and webfont files are in cssLibrary/src/stylesheets/vendor/fontawesome-pro-6.2.1-web.