Misconfigured and/or missing implementation for all available animation attributes and styling in v6

[DisruptLive]

The FontAwesomeIcon component does not support all of the animations that are included in Font Awesome version 6.0

spin is supported and works: <FontAwesomeIcon icon={solid('heart')} spin />

We should also be able to apply the following attributes: bounce, shake, beat, fade and flip

The flip attribute exists, but there is no way to specify that it should also animate. Currently flip only supports the following possible values: "horizontal" | "vertical" | "both".

beat, fade will work as expected if i manually add them to the definition for FontAwesomeIconProps. See additional note below.

It is also either not possible or not clear how to apply css styling for each of the animations that support such values. I have tried the following which do not work:

<FontAwesomeIcon icon={solid('heart')} spin style="--fa-animation-duration: 3s;" /> <FontAwesomeIcon icon={solid('heart')} spin style={{'--fa-animation-duration' : '3s'}} />

Additional Note: When digging into the defined interface for FontAwesomeIconProps, if i include booleans for beat?: boolean and / or fade?:boolean, they will work, however the same was not true for bounce or shake

export interface FontAwesomeIconProps extends BackwardCompatibleOmit<SVGAttributes<SVGSVGElement>, 'children' | 'mask' | 'transform'> {
  forwardedRef?: ((e: any) => void) | React.MutableRefObject<any> | null
  icon: IconProp
  mask?: IconProp
  className?: string
  color?: string
  spin?: boolean
  beat?: boolean // <-- works
  fade?: boolean // <-- works
  bounce?: boolean // <-- does NOT work
  shake?: boolean // <-- does NOT work
  pulse?: boolean
  border?: boolean
  fixedWidth?: boolean
  inverse?: boolean
  listItem?: boolean
  flip?: FlipProp
  size?: SizeProp
  pull?: PullProp
  rotation?: RotateProp
  transform?: string | Transform
  symbol?: FaSymbol
  style?: CSSProperties
  tabIndex?: number;
  title?: string;
  swapOpacity?: boolean;
}

[robmadole]

@DisruptLive can you tell me what versions of the @fortawesome packages you are using?

[jaredtbrown]

@robmadole I can't speak for @DisruptLive but I am experiencing the same issue and have the following packages:

Package	Version
@fortawesome/fontawesome-svg-core	1.3.0
@fortawesome/free-regular-svg-icons	6.0.0
@fortawesome/free-solid-svg-icons	6.0.0
@fortawesome/react-fontawesome	0.1.17

[jaredtbrown]

Update:

I have primarily been having issues with the bounce animation. However, if I set fa-bounce to the className prop the bounce animation works correctly.

[robmadole]

We've released 0.0.18 which includes the bounce animation. Please give it another try and let us know.

[robmadole]

Oh! Make sure and update to 6.1.0 of the @fortawesome/*-svg-icon packages and also upgrade @fortawesome/fontawesome-svg-core to 6.1.0 as well.

[jaredtbrown]

Thanks, @robmadole! Everything is working perfectly.

Just for anyone coming across this, I believe @robmadole meant upgrading to version 0.1.18 instead of 0.0.18. 😄

[robmadole]

Yes, thank you @jaredtbrown !