Update fontawesome readmes

oblador · May 17, 2024 · c93d043 · c93d043
1 parent 50d12f0
commit c93d043
Show file tree

Hide file tree

Showing 8 changed files with 83 additions and 237 deletions.
diff --git a/packages/fontawesome-common/README.md b/packages/fontawesome-common/README.md
@@ -1,73 +1 @@
-# FontAwesome 5 Pro
-
-## Installing the Pro Fonts
-
-You need your FontAwesome npm token which can be obtained by logging into your
-account and then access the `Services` tab.
-
-Run `yarn fa5-upgrade` and enter the token
-when asked to in order to upgrade to the Pro version. It will install the fonts
-in your repo in the `rnvi-fonts` directory but the folder can be customized by
-setting it when executing the command: `yarn fa5-upgrade [destination]`.
-
-### Manually
-
-If the shell script does not work you can install the Pro version manually.
-All you really need to do is adding the Pro fonts to the `rnvi-fonts` directory
-
-## Usage
-
-Using the standard icons works just like the standard icons in this library.
-
-```javascript
-import FontAwesome5Pro from 'react-native-vector-icons/FontAwesome5Pro';
-
-const icon = <FontAwesome5Pro name="comments" />;
-```
-
-Something special about the FontAwesome5Pro class is that you can also pass props
-to change the style of the icon:
-
-```javascript
-import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
-
-const icon = <FontAwesome5Pro name="comments" solid />;
-const icon = <FontAwesome5Pro name="git" brand />;
-```
-
-**Valid types**
-
-| Type      | Description                                 |
-| --------- | ------------------------------------------- |
-| **brand** | Uses the Brands font                        |
-| **light** | Uses the Light font (pro) or Regular (Free) |
-| **solid** | Uses the Solid font                         |
-
-No specified type indicates Regular font.
-
-### getImageSource
-
-`getImageSource` works a little different due to its native backend and how
-the font is separated into different files. Therefore, the enum FA5Style is
-defined to help setting the style of the font:
-
-```javascript
-const FA5Style = {
-  regular: 0,
-  light: 1,
-  solid: 2,
-  brand: 3,
-};
-```
-
-Use this to select which style the generated image should have:
-
-```javascript
-import FontAwesome5, { FA5Style } from 'react-native-vector-icons/FontAwesome5';
-
-FontAwesome5.getImageSource('comments', 30, '#000', FA5Style.solid).then(
-  (source) => this.setState({ image: source })
-);
-```
-
-Not passing a style will result in Regular style.
+# FontAwesome Common
diff --git a/packages/fontawesome-common/generators/app/templates/src/index.tsx b/packages/fontawesome-common/generators/app/templates/src/index.tsx
@@ -97,23 +97,18 @@ const Icon = (props: Props) => {
 type GetImageSourceFunc = {
 <% meta.styleNames.forEach((styleName) => { -%>
   (
-    name: keyof typeof <%= styleName %>GM,
-    size: number,
-    color: TextStyle['color'],
     iconStyle: '<%= styleName %>',
+    name: keyof typeof <%= styleName %>GM,
+    size?: number,
+    color?: TextStyle['color'],
   ): ReturnType<(typeof Icons.<%= styleName %>)['getImageSource']>;
 <% }) -%>
-  (
-    name: keyof typeof <%= meta.defaultStyleName %>GM,
-    size: number,
-    color: TextStyle['color'],
-  ): ReturnType<(typeof Icons.<%= meta.defaultStyleName %>)['getImageSource']>;
 };
 const getImageSource: GetImageSourceFunc = (
+  iconStyle,
   name,
   size = DEFAULT_ICON_SIZE,
   color = DEFAULT_ICON_COLOR,
-  iconStyle = '<%= meta.defaultStyleName %>',
 ) => {
   switch (iconStyle) {
 <% meta.styleNames.forEach((styleName) => { -%>
@@ -130,23 +125,18 @@ Icon.getImageSource = getImageSource;
 type GetImageSourceSyncFunc = {
 <% meta.styleNames.forEach((styleName) => { -%>
   (
-    name: keyof typeof <%= styleName %>GM,
-    size: number,
-    color: TextStyle['color'],
     iconStyle: '<%= styleName %>',
+    name: keyof typeof <%= styleName %>GM,
+    size?: number,
+    color?: TextStyle['color'],
   ): ReturnType<(typeof Icons.<%= styleName %>)['getImageSourceSync']>;
 <% }) -%>
-  (
-    name: keyof typeof <%= meta.defaultStyleName %>GM,
-    size: number,
-    color: TextStyle['color'],
-  ): ReturnType<(typeof Icons.<%= meta.defaultStyleName %>)['getImageSourceSync']>;
 };
 const getImageSourceSync: GetImageSourceSyncFunc = (
+  iconStyle,
   name,
   size = DEFAULT_ICON_SIZE,
   color = DEFAULT_ICON_COLOR,
-  iconStyle = 'regular',
 ) => {
   switch (iconStyle) {
 <% meta.styleNames.forEach((styleName) => { -%>

diff --git a/packages/fontawesome5-pro/README.md b/packages/fontawesome5-pro/README.md
@@ -31,45 +31,34 @@ to change the style of the icon:
 ```javascript
 import FontAwesome5Pro from '@react-native-vector-icons/fontawesome5-pro';
 
-const icon = <FontAwesome5Pro name="comments" solid />;
-const icon = <FontAwesome5Pro name="git" brand />;
+const icon = <FontAwesome5Pro name="comments" iconStyle="solid" />;
+const icon = <FontAwesome5Pro name="git" iconStyle="brand" />;
 ```
 
 **Valid types**
 
-| Type           | Description               |
-| -------------- | ------------------------- |
-| **brand**      | Uses the Brands font      |
-| **solid**      | Uses the Solid font       |
-| **light**      | Uses the Light font       |
-| **duotone**    | Uses the Duotone font     |
+| Type         | Description               |
+| ------------ | --------------------- |
+| **regular**  | Uses the Regular font |
+| **brand**    | Uses the Brands font  |
+| **solid**    | Uses the Solid font   |
+| **light**    | Uses the Light font   |
+| **duotone**  | Uses the Duotone font |
 
 No specified type indicates Regular font.
 
 ### getImageSource
 
-`getImageSource` works a little different due to its native backend and how
-the font is separated into different files. Therefore, the enum FA5Style is
-defined to help setting the style of the font:
-
-```javascript
-const FA5Style = {
-  regular: 'regular',
-  light: 'light',
-  solid: 'solid',
-  brand: 'brand',
-  duotone: 'duotone',
-};
-```
+`getImageSource` works a little different due to its native backend and how the
+font is separated into different files. An extra argument to specify the font
+style is required.
 
 Use this to select which style the generated image should have:
 
 ```javascript
-import FontAwesome5, { FA5Style } from 'react-native-vector-icons/FontAwesome5';
+import FontAwesome5Pro from '@react-native-vector-icons/fontawesome5-pro';
 
-FontAwesome5.getImageSource('comments', 30, '#000', FA5Style.solid).then(
+FontAwesome5Pro.getImageSource('solid', 'comments', 30, '#000').then(
   (source) => this.setState({ image: source })
 );
 ```
-
-Not passing a style will result in Regular style.
diff --git a/packages/fontawesome5/README.md b/packages/fontawesome5/README.md
@@ -10,58 +10,47 @@
 Using the standard icons works just like the standard icons in this library.
 
 ```javascript
-import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
+import FontAwesome5 from '@react-native-vector-icons/fontawesome5';
 
-const icon = <FontAwesome5 name={'comments'} />;
+const icon = <FontAwesome5 name="comments" />;
 ```
 
 Something special about the FontAwesome5 class is that you can also pass props
 to change the style of the icon:
 
 ```javascript
-import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
+import FontAwesome5 from '@react-native-vector-icons/fontawesome5';
 
-const icon = <FontAwesome5 name={'comments'} solid />;
-const icon = <FontAwesome5 name={'git'} brand />;
+const icon = <FontAwesome5 name="comments" iconStyle="solid" />;
+const icon = <FontAwesome5 name="git" iconStyle="brand" />;
 ```
 
 **Valid types**
 
-| Type      | Description                                 |
-| --------- | ------------------------------------------- |
-| **brand** | Uses the Brands font                        |
-| **light** | Uses the Light font (pro) or Regular (Free) |
-| **solid** | Uses the Solid font                         |
+| Type        | Description            |
+| ----------- | --------------------- |
+| **regular** | Uses the Regular font |
+| **brand**   | Uses the Brands font  |
+| **solid**   | Uses the Solid font   |
 
 No specified type indicates Regular font.
 
 ## getImageSource
 
-`getImageSource` works a little different due to its native backend and how
-the font is separated into different files. Therefore, the enum FA5Style is
-defined to help setting the style of the font:
-
-```javascript
-const FA5Style = {
-  regular: 0,
-  light: 1,
-  solid: 2,
-  brand: 3,
-};
-```
+`getImageSource` works a little different due to its native backend and how the
+font is separated into different files. An extra argument to specify the font
+style is required.
 
 Use this to select which style the generated image should have:
 
 ```javascript
-import FontAwesome5, { FA5Style } from 'react-native-vector-icons/FontAwesome5';
+import FontAwesome5 from '@react-native-vector-icons/fontawesome5';
 
-FontAwesome5.getImageSource('comments', 30, '#000', FA5Style.solid).then(
+FontAwesome5.getImageSource('solid', 'comments', 30, '#000').then(
   (source) => this.setState({ image: source })
 );
 ```
 
-Not passing a style will result in Regular style.
-
 # Upgrading to Pro
 
 Use the `@react-native-vector-icons/fontawesome5-pro` package instead.
diff --git a/packages/fontawesome6-pro/README.md b/packages/fontawesome6-pro/README.md
@@ -31,8 +31,8 @@ to change the style of the icon:
 ```javascript
 import FontAwesome6Pro from '@react-native-vector-icons/fontawesome6-pro';
 
-const icon = <FontAwesome6Pro name="comments" solid />;
-const icon = <FontAwesome6Pro name="git" brand />;
+const icon = <FontAwesome6Pro name="comments" iconStyle="solid" />;
+const icon = <FontAwesome6Pro name="git" iconStyle="brand" />;
 ```
 
 **Valid types**
@@ -53,33 +53,14 @@ No specified type indicates Regular font.
 
 ### getImageSource
 
-`getImageSource` works a little different due to its native backend and how
-the font is separated into different files. Therefore, the enum FA6Style is
-defined to help setting the style of the font:
+`getImageSource` works a little different due to its native backend and how the
+font is separated into different files. An extra argument to specify the font
+style is required.
 
 ```javascript
-const FA6Style = {
-  regular: 'regular',
-  light: 'light',
-  solid: 'solid',
-  brand: 'brand',
-  sharp: 'sharp',
-  sharpThin: 'sharpThin',
-  sharpLight: 'sharpLight',
-  sharpSolif: 'sharpSolid',
-  duotone: 'duotone',
-  thin: 'thin',
-};
-```
-
-Use this to select which style the generated image should have:
-
-```javascript
-import FontAwesome6, { FA6Style } from 'react-native-vector-icons/FontAwesome6';
+import FontAwesome6Pro from '@react-native-vector-icons/fontawesome6-pro';
 
-FontAwesome6.getImageSource('comments', 30, '#000', FA6Style.solid).then(
+FontAwesome6Pro.getImageSource('solid', 'comments', 30, '#000').then(
   (source) => this.setState({ image: source })
 );
 ```
-
-Not passing a style will result in Regular style.