Merge pull request #28112 from osdiab/osdiab/feature/react-native-vector-icons/FontAwesome5

react-native-vector-icons: support font awesome5

types/react-native-vector-icons/FontAwesome5.d.ts

@@ -0,0 +1,43 @@
+import { Component } from "react";
+import { Icon, IconProps, ImageSource } from "./Icon";
+
+export const FA5Style: {
+    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 FontAwesome5IconVariants = keyof Omit<typeof FA5Style, "regular">;
+
+// modified from https://stackoverflow.com/a/49725198/1105281
+export type AllowOnlyOne<T, Keys extends keyof T = keyof T> = Omit<T, Keys> &
+    {
+        [K in Keys]-?: Partial<Pick<T, K>> &
+            Partial<Record<Exclude<Keys, K>, undefined>>
+    }[Keys];
+
+export type FontAwesome5IconProps = AllowOnlyOne<
+    { [K in FontAwesome5IconVariants]?: boolean } & IconProps,
+    FontAwesome5IconVariants
+>;
+
+export default class FontAwesome5Icon extends Component<
+    FontAwesome5IconProps,
+    any
+> {
+    static getImageSource(
+        name: string,
+        size?: number,
+        color?: string,
+        fa5Style?: ValueOf<typeof FA5Style>
+    ): Promise<ImageSource>;
+    static loadFont(file?: string): Promise<void>;
+    static hasIcon(name: string): boolean;
+}

types/react-native-vector-icons/FontAwesome5Pro.d.ts

@@ -0,0 +1,6 @@
+import { Component } from "react";
+import FontAwesome5Icon, { FontAwesome5IconProps } from "./FontAwesome5";
+
+export type FontAwesome5ProIconProps = FontAwesome5IconProps;
+export { FA5Style } from "./FontAwesome5";
+export default FontAwesome5Icon;

types/react-native-vector-icons/react-native-vector-icons-tests.tsx

@@ -3,6 +3,8 @@ import { View, Text, TabBarIOS } from 'react-native';
 import { createIconSet } from 'react-native-vector-icons';
 import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
 import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
+import FontAwesome5Icon from 'react-native-vector-icons/FontAwesome5';
+import FontAwesome5ProIcon from 'react-native-vector-icons/FontAwesome5Pro';
 import Ionicon from 'react-native-vector-icons/Ionicons';
 
 const glyphMap = {
@@ -27,6 +29,9 @@ class Example extends React.Component {
       <View>
         {/* Normal Icon */}
         <MaterialIcon size={30} color="red" name="exit" />
+        <FontAwesome5Icon size={10} name="handshake" />
+        <FontAwesome5Icon size={10} name="handshake" solid />
+        <FontAwesome5ProIcon size={10} name="parachute-box" light />
 
         {/* Icon button  */}
         <FontAwesomeIcon.Button

types/react-native-vector-icons/tsconfig.json

@@ -25,6 +25,8 @@
         "EvilIcons.d.ts",
         "Feather.d.ts",
         "FontAwesome.d.ts",
+        "FontAwesome5.d.ts",
+        "FontAwesome5Pro.d.ts",
         "Foundation.d.ts",
         "Ionicons.d.ts",
         "MaterialCommunityIcons.d.ts",