Font Awesome icon component for Material UI

FontAwesomeSvgIcon.tsx

import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';
import makeStyles from '@material-ui/styles/makeStyles';
import React, { forwardRef } from 'react';

type Props = Omit<SvgIconProps, 'viewBox'> & {
  icon: IconDefinition;
};

const useStyles = makeStyles({
  root: {},
  colorSecondary: {},
  colorAction: {},
  colorDisabled: {},
  colorError: {},
  colorPrimary: {},
  fontSizeInherit: {},
  fontSizeSmall: {},
  fontSizeLarge: {},
  pathPrimary: {},
  pathSecondary: {
    opacity: 0.4,
  },
});

export const FontAwesomeSvgIcon = forwardRef<SVGSVGElement, Props>((props, ref) => {
  const {
    icon: {
      icon: [width, height, , , svgPathData],
    },
    classes,
    ...svgIconProps
  } = props;

  const {
    pathPrimary: pathPrimaryClassName,
    pathSecondary: pathSecondaryClassName,
    ...svgIconClasses
  } = useStyles(props);

  return (
    <SvgIcon
      ref={ref}
      {...svgIconProps}
      classes={svgIconClasses}
      viewBox={`0 0 ${width} ${height}`}>
      {typeof svgPathData === 'string' ? (
        <path d={svgPathData} />
      ) : (
        /**
         * For whatever reason the 0th path is considered "secondary"
         */
        svgPathData.map((d, i) => (
          <path className={i === 0 ? pathSecondaryClassName : pathPrimaryClassName} d={d} />
        ))
      )}
    </SvgIcon>
  );
});