Closed DisruptLive closed 2 years ago
@DisruptLive can you tell me what versions of the @fortawesome packages you are using?
@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 |
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.
We've released 0.0.18
which includes the bounce
animation. Please give it another try and let us know.
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.
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
. 😄
Yes, thank you @jaredtbrown !
The
FontAwesomeIcon
component does not support all of the animations that are included in Font Awesome version 6.0spin
is supported and works:<FontAwesomeIcon icon={solid('heart')} spin />
We should also be able to apply the following attributes:
bounce
,shake
,beat
,fade
andflip
The
flip
attribute exists, but there is no way to specify that it should also animate. Currentlyflip
only supports the following possible values:"horizontal" | "vertical" | "both"
.beat
,fade
will work as expected if i manually add them to the definition forFontAwesomeIconProps
. 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 forbeat?: boolean
and / orfade?:boolean
, they will work, however the same was not true forbounce
orshake