feat: add types for FA CSS vars in style prop

Author: charles4221

src/types/css-variables.ts

@@ -0,0 +1,51 @@
+export interface CSSVariables {
+  '--fa-family'?: string | undefined
+  '--fa-style'?: string | undefined
+  '--fa-display'?: string | undefined
+  '--fa-inverse'?: string | undefined
+  '--fa-width'?: string | undefined
+  '--fa-li-margin'?: string | undefined
+  '--fa-li-width'?: string | undefined
+  '--fa-rotate-angle'?: string | undefined
+  '--fa-animation-delay'?: string | undefined
+  '--fa-animation-direction'?: string | undefined
+  '--fa-animation-duration'?: string | undefined
+  '--fa-animation-iteration-count'?: string | undefined
+  '--fa-animation-timing'?: string | undefined
+  '--fa-beat-scale'?: string | undefined
+  '--fa-fade-opacity'?: string | undefined
+  '--fa-beat-fade-opacity'?: string | undefined
+  '--fa-beat-fade-scale'?: string | undefined
+  '--fa-flip-x'?: string | undefined
+  '--fa-flip-y'?: string | undefined
+  '--fa-flip-z'?: string | undefined
+  '--fa-flip-angle'?: string | undefined
+  '--fa-border-color'?: string | undefined
+  '--fa-border-padding'?: string | undefined
+  '--fa-border-radius'?: string | undefined
+  '--fa-border-style'?: string | undefined
+  '--fa-border-width'?: string | undefined
+  '--fa-pull-margin'?: string | undefined
+  '--fa-stack-z-index'?: string | undefined
+  '--fa-primary-color'?: string | undefined
+  '--fa-primary-opacity'?: string | undefined
+  '--fa-secondary-color'?: string | undefined
+  '--fa-secondary-opacity'?: string | undefined
+  '--fa-font-solid'?: string | undefined
+  '--fa-font-regular'?: string | undefined
+  '--fa-font-light'?: string | undefined
+  '--fa-font-thin'?: string | undefined
+  '--fa-font-duotone'?: string | undefined
+  '--fa-font-duotone-regular'?: string | undefined
+  '--fa-font-duotone-light'?: string | undefined
+  '--fa-font-duotone-thin'?: string | undefined
+  '--fa-font-brands'?: string | undefined
+  '--fa-font-sharp-solid'?: string | undefined
+  '--fa-font-sharp-regular'?: string | undefined
+  '--fa-font-sharp-light'?: string | undefined
+  '--fa-font-sharp-thin'?: string | undefined
+  '--fa-font-sharp-duotone-solid'?: string | undefined
+  '--fa-font-sharp-duotone-regular'?: string | undefined
+  '--fa-font-sharp-duotone-light'?: string | undefined
+  '--fa-font-sharp-duotone-thin'?: string | undefined
+}

src/types/icon-props.ts

@@ -3,6 +3,7 @@ import type { CSSProperties, RefAttributes, SVGAttributes } from 'react'
 import type { IconProp } from '@fortawesome/fontawesome-svg-core'
 
 import type { AnimationProps } from './animation-props'
+import { CSSVariables } from './css-variables'
 import type { TransformProps } from './transform-props'
 
 export interface FontAwesomeIconProps
@@ -50,7 +51,7 @@ export interface FontAwesomeIconProps
    */
   inverse?: boolean | undefined
   /** Any custom styles or CSS variable overrides for the icon element. */
-  style?: CSSProperties | undefined
+  style?: (CSSProperties & CSSVariables) | undefined
   tabIndex?: number | undefined
   /** An accessibility title for the icon to be read by screen-readers or assistive technologies. */
   title?: string | undefined