React FontAwesomeIcon

FontAwesomeIcon.tsx

import React, { FC } from 'react';
import cx from 'clsx';

export interface FontAwesomeIconProps {
    animate?: 'spin' | 'pulse' | undefined;
    border?: boolean;
    className?: string | undefined;
    color?: string | undefined;
    fixedWidth?: boolean;
    flip?: 'vertical' | 'horizontal' | 'both' | undefined;
    fontWeight?: 900 | 400 | 300 | undefined;
    inverse?: boolean | undefined;
    mask?: string;
    name: string;
    prefix?: 'fas' | 'far' | 'fal' | 'fad' | 'fab';
    pull?: 'left' | 'right' | undefined;
    rotate?: 90 | 180 | 270 | undefined;
    size?:
        | 'xs'
        | 'sm'
        | 'md'
        | 'lg'
        | '2x'
        | '3x'
        | '4x'
        | '5x'
        | '6x'
        | '7x'
        | '8x'
        | '9x'
        | '10x';
    stack?: boolean | '1x' | '2x';
    style?: Object;
    swapOpacity?: boolean;
    transform?: string;
    [key: string]: any; // so the rest spread works properly with TS
}

const FontAwesomeIcon: FC<FontAwesomeIconProps> = ({
    animate,
    border,
    className,
    color,
    fixedWidth,
    flip,
    fontWeight,
    inverse,
    mask,
    name,
    prefix = 'fas',
    pull,
    rotate,
    size = 'md',
    stack,
    style,
    swapOpacity,
    transform,
    ...rest
}) => (
    <i
        className={cx(
            prefix,
            `fa-${name}`,
            `fa-${size}`,
            {
                'data-fa-mask': mask,
                'data-fa-transform': transform,
                'fa-border': border,
                'fa-fw': fixedWidth,
                'fa-inverse': inverse,
                'fa-pulse': animate === 'pulse',
                'fa-spin': animate === 'spin',
                'fa-swap-opacity': swapOpacity,
                [`fa-flip-${flip}`]: flip,
                [`fa-pull-${pull}`]: pull,
                [`fa-rotate-${rotate}`]: rotate,
                [`fa-stack${stack === true ? '' : `-${stack}`}`]: stack,
            },
            className,
        )}
        style={{ ...style, color, fontWeight }}
        {...rest}
    />
);
    
export default FontAwesomeIcon;

my-icon.less

.my-error--error {
    &:--error {
        color: red;
    }
}

MyIcon.tsx

import React, { FC } from 'react';

import './my-icon.less';

const MyErrorIcon: FC = () => (
    <FontAwesomeIcon name="exclamation-triangle" className="my-icon--error" />
);

export default MyErrorIcon;

See official documentation for how these props work: https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use