Fontawesome6 (Closes #1408)

[johnf]

Adds support for Font Awesome 6 and the new styles.

Builds on the work of @basbase in #1449

[RavenJock]

Working well for me 👍

[efstathiosntonas]

Hey folks, thanks for implementing this. It seems that the @types/react-native-vector-icons are not updated yet, FontAwesome6Pro.d.ts and FontAwesome6.d.ts are missing.

Here's a quick patch:

@types+react-native-vector-icons+6.4.13.patch

diff --git a/node_modules/@types/react-native-vector-icons/FontAwesome6.d.ts b/node_modules/@types/react-native-vector-icons/FontAwesome6.d.ts
new file mode 100755
index 0000000..9d91637
--- /dev/null
+++ b/node_modules/@types/react-native-vector-icons/FontAwesome6.d.ts
@@ -0,0 +1,46 @@
+import { Component } from "react";
+import { Icon, IconButtonProps, IconProps, ImageSource } from "./Icon";
+
+export const FA6Style: {
+  regular: 0;
+  light: 1;
+  solid: 2;
+  brand: 3;
+};
+
+export type ValueOf<T> = T[keyof T];
+
+// borrowed from
+// https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-8.html
+export type Omit<T, K> = Pick<T, Exclude<keyof T, K>>;
+
+export type FontAwesome6IconVariants = keyof Omit<typeof FA6Style, "regular">;
+
+export type FontAwesome6IconProps = {
+  [K in FontAwesome6IconVariants]?: boolean;
+} & IconProps;
+
+export class FontAwesome6IconButton extends Component<
+  { [K in FontAwesome6IconVariants]?: boolean } & IconButtonProps,
+  any
+> {}
+
+export default class FontAwesome6Icon extends Component<FontAwesome6IconProps, any> {
+  static getImageSource(
+    name: string,
+    size?: number,
+    color?: string,
+    fa5Style?: ValueOf<typeof FA6Style>
+  ): Promise<ImageSource>;
+  static getImageSourceSync(
+    name: string,
+    size?: number,
+    color?: string,
+    fa5Style?: ValueOf<typeof FA6Style>
+  ): ImageSource;
+  static loadFont(file?: string): Promise<void>;
+  static hasIcon(name: string): boolean;
+  static TabBarItem: typeof Icon.TabBarItem;
+  static TabBarItemIOS: typeof Icon.TabBarItemIOS;
+  static Button: typeof FontAwesome5IconButton;
+}
diff --git a/node_modules/@types/react-native-vector-icons/FontAwesome6Pro.d.ts b/node_modules/@types/react-native-vector-icons/FontAwesome6Pro.d.ts
new file mode 100755
index 0000000..e305e5e
--- /dev/null
+++ b/node_modules/@types/react-native-vector-icons/FontAwesome6Pro.d.ts
@@ -0,0 +1,6 @@
+import { Component } from "react";
+import FontAwesome6Icon, { FontAwesome6IconProps } from "./FontAwesome6";
+
+export type FontAwesome6ProIconProps = FontAwesome6IconProps;
+export { FA6Style } from "./FontAwesome6";
+export default FontAwesome6Icon;

[hernanif1]

For now I'm adding a declaration file to workaround that.

declare module 'react-native-vector-icons/FontAwesome6' {
  import { IconProps } from 'react-native-vector-icons/Icon';

  export interface FontAwesome6IconProps extends IconProps {
    solid?: boolean;
    light?: boolean;
    regular?: boolean;
    // brand?: boolean; I'm not using brands
    weight?: number;
  }

  // eslint-disable-next-line import/no-default-export
  export default class FontAwesome6Icon extends React.Component<FontAwesome6IconProps> {}
}