diff --git a/packages/fontawesome-common/README.md b/packages/fontawesome-common/README.md index 57ac53fa0..28b6696a9 100644 --- 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 = ; -``` - -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 = ; -const icon = ; -``` - -**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 index 966b2c70e..c62746712 100644 --- 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 index 8043dcc86..a1c3b3b68 100644 --- 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 = ; -const icon = ; +const icon = ; +const icon = ; ``` **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-pro/src/index.tsx b/packages/fontawesome5-pro/src/index.tsx index 3b452813a..b2d07dc0a 100644 --- a/packages/fontawesome5-pro/src/index.tsx +++ b/packages/fontawesome5-pro/src/index.tsx @@ -148,46 +148,41 @@ const Icon = (props: Props) => { type GetImageSourceFunc = { ( - name: keyof typeof brandGM, - size: number, - color: TextStyle['color'], iconStyle: 'brand', + name: keyof typeof brandGM, + size?: number, + color?: TextStyle['color'], ): ReturnType<(typeof Icons.brand)['getImageSource']>; ( - name: keyof typeof duotoneGM, - size: number, - color: TextStyle['color'], iconStyle: 'duotone', + name: keyof typeof duotoneGM, + size?: number, + color?: TextStyle['color'], ): ReturnType<(typeof Icons.duotone)['getImageSource']>; ( - name: keyof typeof lightGM, - size: number, - color: TextStyle['color'], iconStyle: 'light', + name: keyof typeof lightGM, + size?: number, + color?: TextStyle['color'], ): ReturnType<(typeof Icons.light)['getImageSource']>; ( - name: keyof typeof regularGM, - size: number, - color: TextStyle['color'], iconStyle: 'regular', + name: keyof typeof regularGM, + size?: number, + color?: TextStyle['color'], ): ReturnType<(typeof Icons.regular)['getImageSource']>; ( - name: keyof typeof solidGM, - size: number, - color: TextStyle['color'], iconStyle: 'solid', + name: keyof typeof solidGM, + size?: number, + color?: TextStyle['color'], ): ReturnType<(typeof Icons.solid)['getImageSource']>; - ( - name: keyof typeof regularGM, - size: number, - color: TextStyle['color'], - ): ReturnType<(typeof Icons.regular)['getImageSource']>; }; const getImageSource: GetImageSourceFunc = ( + iconStyle, name, size = DEFAULT_ICON_SIZE, color = DEFAULT_ICON_COLOR, - iconStyle = 'regular', ) => { switch (iconStyle) { case 'brand': @@ -209,46 +204,41 @@ Icon.getImageSource = getImageSource; type GetImageSourceSyncFunc = { ( - name: keyof typeof brandGM, - size: number, - color: TextStyle['color'], iconStyle: 'brand', + name: keyof typeof brandGM, + size?: number, + color?: TextStyle['color'], ): ReturnType<(typeof Icons.brand)['getImageSourceSync']>; ( - name: keyof typeof duotoneGM, - size: number, - color: TextStyle['color'], iconStyle: 'duotone', + name: keyof typeof duotoneGM, + size?: number, + color?: TextStyle['color'], ): ReturnType<(typeof Icons.duotone)['getImageSourceSync']>; ( - name: keyof typeof lightGM, - size: number, - color: TextStyle['color'], iconStyle: 'light', + name: keyof typeof lightGM, + size?: number, + color?: TextStyle['color'], ): ReturnType<(typeof Icons.light)['getImageSourceSync']>; ( - name: keyof typeof regularGM, - size: number, - color: TextStyle['color'], iconStyle: 'regular', + name: keyof typeof regularGM, + size?: number, + color?: TextStyle['color'], ): ReturnType<(typeof Icons.regular)['getImageSourceSync']>; ( - name: keyof typeof solidGM, - size: number, - color: TextStyle['color'], iconStyle: 'solid', + name: keyof typeof solidGM, + size?: number, + color?: TextStyle['color'], ): ReturnType<(typeof Icons.solid)['getImageSourceSync']>; - ( - name: keyof typeof regularGM, - size: number, - color: TextStyle['color'], - ): ReturnType<(typeof Icons.regular)['getImageSourceSync']>; }; const getImageSourceSync: GetImageSourceSyncFunc = ( + iconStyle, name, size = DEFAULT_ICON_SIZE, color = DEFAULT_ICON_COLOR, - iconStyle = 'regular', ) => { switch (iconStyle) { case 'brand': diff --git a/packages/fontawesome5/README.md b/packages/fontawesome5/README.md index 6b82f6d84..9c2c98b0f 100644 --- 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 = ; +const icon = ; ``` 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 = ; -const icon = ; +const icon = ; +const icon = ; ``` **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/fontawesome5/src/index.tsx b/packages/fontawesome5/src/index.tsx index 4537c1fc7..b2f075d38 100644 --- a/packages/fontawesome5/src/index.tsx +++ b/packages/fontawesome5/src/index.tsx @@ -116,34 +116,29 @@ const Icon = (props: Props) => { type GetImageSourceFunc = { ( - name: keyof typeof brandGM, - size: number, - color: TextStyle['color'], iconStyle: 'brand', + name: keyof typeof brandGM, + size?: number, + color?: TextStyle['color'], ): ReturnType<(typeof Icons.brand)['getImageSource']>; ( - name: keyof typeof regularGM, - size: number, - color: TextStyle['color'], iconStyle: 'regular', + name: keyof typeof regularGM, + size?: number, + color?: TextStyle['color'], ): ReturnType<(typeof Icons.regular)['getImageSource']>; ( - name: keyof typeof solidGM, - size: number, - color: TextStyle['color'], iconStyle: 'solid', + name: keyof typeof solidGM, + size?: number, + color?: TextStyle['color'], ): ReturnType<(typeof Icons.solid)['getImageSource']>; - ( - name: keyof typeof regularGM, - size: number, - color: TextStyle['color'], - ): ReturnType<(typeof Icons.regular)['getImageSource']>; }; const getImageSource: GetImageSourceFunc = ( + iconStyle, name, size = DEFAULT_ICON_SIZE, color = DEFAULT_ICON_COLOR, - iconStyle = 'regular', ) => { switch (iconStyle) { case 'brand': @@ -161,34 +156,29 @@ Icon.getImageSource = getImageSource; type GetImageSourceSyncFunc = { ( - name: keyof typeof brandGM, - size: number, - color: TextStyle['color'], iconStyle: 'brand', + name: keyof typeof brandGM, + size?: number, + color?: TextStyle['color'], ): ReturnType<(typeof Icons.brand)['getImageSourceSync']>; ( - name: keyof typeof regularGM, - size: number, - color: TextStyle['color'], iconStyle: 'regular', + name: keyof typeof regularGM, + size?: number, + color?: TextStyle['color'], ): ReturnType<(typeof Icons.regular)['getImageSourceSync']>; ( - name: keyof typeof solidGM, - size: number, - color: TextStyle['color'], iconStyle: 'solid', + name: keyof typeof solidGM, + size?: number, + color?: TextStyle['color'], ): ReturnType<(typeof Icons.solid)['getImageSourceSync']>; - ( - name: keyof typeof regularGM, - size: number, - color: TextStyle['color'], - ): ReturnType<(typeof Icons.regular)['getImageSourceSync']>; }; const getImageSourceSync: GetImageSourceSyncFunc = ( + iconStyle, name, size = DEFAULT_ICON_SIZE, color = DEFAULT_ICON_COLOR, - iconStyle = 'regular', ) => { switch (iconStyle) { case 'brand': diff --git a/packages/fontawesome6-pro/README.md b/packages/fontawesome6-pro/README.md index 792a9f299..f8e971d24 100644 --- 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 = ; -const icon = ; +const icon = ; +const icon = ; ``` **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. diff --git a/packages/fontawesome6-pro/src/index.tsx b/packages/fontawesome6-pro/src/index.tsx index 6200ff7e1..a6643aeda 100644 --- a/packages/fontawesome6-pro/src/index.tsx +++ b/packages/fontawesome6-pro/src/index.tsx @@ -228,76 +228,71 @@ const Icon = (props: Props) => { type GetImageSourceFunc = { ( - name: keyof typeof brandGM, - size: number, - color: TextStyle['color'], iconStyle: 'brand', + name: keyof typeof brandGM, + size?: number, + color?: TextStyle['color'], ): ReturnType<(typeof Icons.brand)['getImageSource']>; ( - name: keyof typeof duotoneGM, - size: number, - color: TextStyle['color'], iconStyle: 'duotone', + name: keyof typeof duotoneGM, + size?: number, + color?: TextStyle['color'], ): ReturnType<(typeof Icons.duotone)['getImageSource']>; ( - name: keyof typeof lightGM, - size: number, - color: TextStyle['color'], iconStyle: 'light', + name: keyof typeof lightGM, + size?: number, + color?: TextStyle['color'], ): ReturnType<(typeof Icons.light)['getImageSource']>; ( - name: keyof typeof regularGM, - size: number, - color: TextStyle['color'], iconStyle: 'regular', + name: keyof typeof regularGM, + size?: number, + color?: TextStyle['color'], ): ReturnType<(typeof Icons.regular)['getImageSource']>; ( - name: keyof typeof sharpGM, - size: number, - color: TextStyle['color'], iconStyle: 'sharp', + name: keyof typeof sharpGM, + size?: number, + color?: TextStyle['color'], ): ReturnType<(typeof Icons.sharp)['getImageSource']>; ( - name: keyof typeof sharpLightGM, - size: number, - color: TextStyle['color'], iconStyle: 'sharpLight', + name: keyof typeof sharpLightGM, + size?: number, + color?: TextStyle['color'], ): ReturnType<(typeof Icons.sharpLight)['getImageSource']>; ( - name: keyof typeof sharpSolidGM, - size: number, - color: TextStyle['color'], iconStyle: 'sharpSolid', + name: keyof typeof sharpSolidGM, + size?: number, + color?: TextStyle['color'], ): ReturnType<(typeof Icons.sharpSolid)['getImageSource']>; ( - name: keyof typeof sharpThinGM, - size: number, - color: TextStyle['color'], iconStyle: 'sharpThin', + name: keyof typeof sharpThinGM, + size?: number, + color?: TextStyle['color'], ): ReturnType<(typeof Icons.sharpThin)['getImageSource']>; ( - name: keyof typeof solidGM, - size: number, - color: TextStyle['color'], iconStyle: 'solid', + name: keyof typeof solidGM, + size?: number, + color?: TextStyle['color'], ): ReturnType<(typeof Icons.solid)['getImageSource']>; ( - name: keyof typeof thinGM, - size: number, - color: TextStyle['color'], iconStyle: 'thin', + name: keyof typeof thinGM, + size?: number, + color?: TextStyle['color'], ): ReturnType<(typeof Icons.thin)['getImageSource']>; - ( - name: keyof typeof regularGM, - size: number, - color: TextStyle['color'], - ): ReturnType<(typeof Icons.regular)['getImageSource']>; }; const getImageSource: GetImageSourceFunc = ( + iconStyle, name, size = DEFAULT_ICON_SIZE, color = DEFAULT_ICON_COLOR, - iconStyle = 'regular', ) => { switch (iconStyle) { case 'brand': @@ -329,76 +324,71 @@ Icon.getImageSource = getImageSource; type GetImageSourceSyncFunc = { ( - name: keyof typeof brandGM, - size: number, - color: TextStyle['color'], iconStyle: 'brand', + name: keyof typeof brandGM, + size?: number, + color?: TextStyle['color'], ): ReturnType<(typeof Icons.brand)['getImageSourceSync']>; ( - name: keyof typeof duotoneGM, - size: number, - color: TextStyle['color'], iconStyle: 'duotone', + name: keyof typeof duotoneGM, + size?: number, + color?: TextStyle['color'], ): ReturnType<(typeof Icons.duotone)['getImageSourceSync']>; ( - name: keyof typeof lightGM, - size: number, - color: TextStyle['color'], iconStyle: 'light', + name: keyof typeof lightGM, + size?: number, + color?: TextStyle['color'], ): ReturnType<(typeof Icons.light)['getImageSourceSync']>; ( - name: keyof typeof regularGM, - size: number, - color: TextStyle['color'], iconStyle: 'regular', + name: keyof typeof regularGM, + size?: number, + color?: TextStyle['color'], ): ReturnType<(typeof Icons.regular)['getImageSourceSync']>; ( - name: keyof typeof sharpGM, - size: number, - color: TextStyle['color'], iconStyle: 'sharp', + name: keyof typeof sharpGM, + size?: number, + color?: TextStyle['color'], ): ReturnType<(typeof Icons.sharp)['getImageSourceSync']>; ( - name: keyof typeof sharpLightGM, - size: number, - color: TextStyle['color'], iconStyle: 'sharpLight', + name: keyof typeof sharpLightGM, + size?: number, + color?: TextStyle['color'], ): ReturnType<(typeof Icons.sharpLight)['getImageSourceSync']>; ( - name: keyof typeof sharpSolidGM, - size: number, - color: TextStyle['color'], iconStyle: 'sharpSolid', + name: keyof typeof sharpSolidGM, + size?: number, + color?: TextStyle['color'], ): ReturnType<(typeof Icons.sharpSolid)['getImageSourceSync']>; ( - name: keyof typeof sharpThinGM, - size: number, - color: TextStyle['color'], iconStyle: 'sharpThin', + name: keyof typeof sharpThinGM, + size?: number, + color?: TextStyle['color'], ): ReturnType<(typeof Icons.sharpThin)['getImageSourceSync']>; ( - name: keyof typeof solidGM, - size: number, - color: TextStyle['color'], iconStyle: 'solid', + name: keyof typeof solidGM, + size?: number, + color?: TextStyle['color'], ): ReturnType<(typeof Icons.solid)['getImageSourceSync']>; ( - name: keyof typeof thinGM, - size: number, - color: TextStyle['color'], iconStyle: 'thin', + name: keyof typeof thinGM, + size?: number, + color?: TextStyle['color'], ): ReturnType<(typeof Icons.thin)['getImageSourceSync']>; - ( - name: keyof typeof regularGM, - size: number, - color: TextStyle['color'], - ): ReturnType<(typeof Icons.regular)['getImageSourceSync']>; }; const getImageSourceSync: GetImageSourceSyncFunc = ( + iconStyle, name, size = DEFAULT_ICON_SIZE, color = DEFAULT_ICON_COLOR, - iconStyle = 'regular', ) => { switch (iconStyle) { case 'brand': diff --git a/packages/fontawesome6/README.md b/packages/fontawesome6/README.md index 28f8cb79c..8b51325b4 100644 --- a/packages/fontawesome6/README.md +++ b/packages/fontawesome6/README.md @@ -10,70 +10,47 @@ Using the standard icons works just like the standard icons in this library. ```javascript -import FontAwesome6 from 'react-native-vector-icons/FontAwesome6'; +import FontAwesome6 from '@react-native-vector-icons/fontawesome6'; -const icon = ; +const icon = ; ``` Something special about the FontAwesome6 class is that you can also pass props to change the style of the icon: ```javascript -import FontAwesome6 from 'react-native-vector-icons/FontAwesome6'; +import FontAwesome6 from '@react-native-vector-icons/fontawesome6'; -const icon = ; -const icon = ; +const icon = ; +const icon = ; ``` **Valid types** -| Type | Description | -| -------------- | ------------------------------------------------- | -| **brand** | Uses the Brands font | -| **solid** | Uses the Solid font | -| **light** | Uses the Light font (pro) or Regular (Free) | -| **thin** | Uses the Thin font (pro) or Regular (Free) | -| **duotone** | Uses the Duotone font (pro) or Regular (Free) | -| **sharpSolid** | Uses the Sharp Solid font (pro) or Regular (Free) | -| **sharpThin** | Uses the Sharp Thin font (pro) or Regular (Free) | -| **sharpLight** | Uses the Sharp Light font (pro) or Regular (Free) | -| **sharp** | Uses the Sharp font (pro) or Regular (Free) | +| 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 FA6Style is -defined to help setting the style of the font: - -```javascript -const FA6Style = { - regular: 'regular', - light: 'light', - solid: 'solid', - brand: 'brand', - sharp: 'sharp', - sharpThin: 'sharpThin', - sharpLight: 'sharpLight', - sharpSolif: 'sharpSolid', - duotone: 'duotone', - thin: 'thin', -}; -``` +`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 FontAwesome6, { FA6Style } from 'react-native-vector-icons/FontAwesome6'; +import FontAwesome6 from '@react-native-vector-icons/fontawesome6'; -FontAwesome6.getImageSource('comments', 30, '#000', FA6Style.solid).then( +FontAwesome6.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/fontawesome6-pro` package instead. diff --git a/packages/fontawesome6/src/index.tsx b/packages/fontawesome6/src/index.tsx index 7f4f1e7f1..4c1b2cf8a 100644 --- a/packages/fontawesome6/src/index.tsx +++ b/packages/fontawesome6/src/index.tsx @@ -116,34 +116,29 @@ const Icon = (props: Props) => { type GetImageSourceFunc = { ( - name: keyof typeof brandGM, - size: number, - color: TextStyle['color'], iconStyle: 'brand', + name: keyof typeof brandGM, + size?: number, + color?: TextStyle['color'], ): ReturnType<(typeof Icons.brand)['getImageSource']>; ( - name: keyof typeof regularGM, - size: number, - color: TextStyle['color'], iconStyle: 'regular', + name: keyof typeof regularGM, + size?: number, + color?: TextStyle['color'], ): ReturnType<(typeof Icons.regular)['getImageSource']>; ( - name: keyof typeof solidGM, - size: number, - color: TextStyle['color'], iconStyle: 'solid', + name: keyof typeof solidGM, + size?: number, + color?: TextStyle['color'], ): ReturnType<(typeof Icons.solid)['getImageSource']>; - ( - name: keyof typeof regularGM, - size: number, - color: TextStyle['color'], - ): ReturnType<(typeof Icons.regular)['getImageSource']>; }; const getImageSource: GetImageSourceFunc = ( + iconStyle, name, size = DEFAULT_ICON_SIZE, color = DEFAULT_ICON_COLOR, - iconStyle = 'regular', ) => { switch (iconStyle) { case 'brand': @@ -161,34 +156,29 @@ Icon.getImageSource = getImageSource; type GetImageSourceSyncFunc = { ( - name: keyof typeof brandGM, - size: number, - color: TextStyle['color'], iconStyle: 'brand', + name: keyof typeof brandGM, + size?: number, + color?: TextStyle['color'], ): ReturnType<(typeof Icons.brand)['getImageSourceSync']>; ( - name: keyof typeof regularGM, - size: number, - color: TextStyle['color'], iconStyle: 'regular', + name: keyof typeof regularGM, + size?: number, + color?: TextStyle['color'], ): ReturnType<(typeof Icons.regular)['getImageSourceSync']>; ( - name: keyof typeof solidGM, - size: number, - color: TextStyle['color'], iconStyle: 'solid', + name: keyof typeof solidGM, + size?: number, + color?: TextStyle['color'], ): ReturnType<(typeof Icons.solid)['getImageSourceSync']>; - ( - name: keyof typeof regularGM, - size: number, - color: TextStyle['color'], - ): ReturnType<(typeof Icons.regular)['getImageSourceSync']>; }; const getImageSourceSync: GetImageSourceSyncFunc = ( + iconStyle, name, size = DEFAULT_ICON_SIZE, color = DEFAULT_ICON_COLOR, - iconStyle = 'regular', ) => { switch (iconStyle) { case 'brand': diff --git a/scripts/build.sh b/scripts/build.sh index 0ebd3eb44..dea8a30b2 100755 --- a/scripts/build.sh +++ b/scripts/build.sh @@ -4,7 +4,9 @@ set -e cd packages -for package in *; do +PACKAGES=${@:-$(ls -d */)} + +for package in $PACKAGES; do if [ ! -f "$package/.yo-rc.json" ]; then continue fi