diff --git a/FONTAWESOME5.md b/FONTAWESOME5.md
index 7caca15c7..cd87d68f0 100644
--- a/FONTAWESOME5.md
+++ b/FONTAWESOME5.md
@@ -77,9 +77,7 @@ No specified type indicates Regular font.
So just using icons works pretty much like normal. However, access to the
Button, TabBarItem etc. must be accessed in a certain way due to the split
-icon files and it **only works on Android for now** (iOS defaults to
-Regular font).
-The icon set must be specified:
+icon files. The icon set must be specified:
```javascript
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
@@ -95,7 +93,25 @@ account and then access the ```Services``` tab.
Run ```npm run fa5upgrade``` in the ```node_modules/react-native-vector-icons```
folder and enter the token when asked to in order to
-upgrade to the Pro version. Note that you need to rebuild the app after this.
+upgrade to the Pro version. Note that you need to link and rebuild the app
+after this.
+
+## Manually
+
+If the shell script does not work you can install the Pro version manually
+by replacing the font files in ```Fonts/```. First you need to download the
+Pro pack from the FontAwesome website (use the web version). Then rename
+the font files in the ```webfonts/``` folder like this:
+
+* fa-brands-400.ttf > FontAwesome5_Brands.ttf
+* fa-light-300.ttf > FontAwesome5_Light.ttf
+* fa-regular-400.ttf > FontAwesome5_Regular.ttf
+* fa-solid-900.ttf > FontAwesome5_Solid.ttf
+
+Place these in the ```Fonts/``` folder and replace the Free font files in the
+process.
+
+Link and rebuild the project.
## Using the Pro version
diff --git a/FontAwesome5.js b/FontAwesome5.js
index ac1f4690e..620e8a28a 100644
--- a/FontAwesome5.js
+++ b/FontAwesome5.js
@@ -35,27 +35,30 @@ export function FA5iconSet(pro_version = false) {
const BrandsSet = createIconSet(
glyphs,
'Font Awesome 5 Brands',
- 'FontAwesome5_Brands.otf'
+ 'FontAwesome5_Brands.ttf'
);
const RegularSet = createIconSet(
glyphs,
familyName,
- 'FontAwesome5_Regular.otf'
+ 'FontAwesome5_Regular.ttf',
+ {fontWeight: Platform.OS === 'ios' ? '400' : undefined}
);
const LightSet = pro_version
? createIconSet(
glyphs,
familyName,
- 'FontAwesome5_Light.otf'
+ 'FontAwesome5_Light.ttf',
+ {fontWeight: Platform.OS === 'ios' ? '100' : undefined}
)
: RegularSet;
const SolidSet = createIconSet(
glyphs,
familyName,
- 'FontAwesome5_Solid.otf'
+ 'FontAwesome5_Solid.ttf',
+ {fontWeight: Platform.OS === 'ios' ? '700' : undefined}
);
class FA5icon extends PureComponent {
@@ -87,7 +90,6 @@ export function FA5iconSet(pro_version = false) {
static Solid = SolidSet;
render() {
- var weight;
var IconSet;
var type = this.props.type;
@@ -105,27 +107,21 @@ export function FA5iconSet(pro_version = false) {
switch (type) {
case FA5Types.brand:
- weight = '500';
IconSet = BrandsSet;
break;
case FA5Types.light:
- weight = '200';
IconSet = LightSet;
break;
case FA5Types.solid:
- weight = '700';
IconSet = SolidSet;
break;
default:
- weight = '400';
IconSet = RegularSet;
break;
}
return (
-
+
);
}
}
diff --git a/lib/create-icon-set.js b/lib/create-icon-set.js
index 17b6ddd44..98882fae4 100644
--- a/lib/create-icon-set.js
+++ b/lib/create-icon-set.js
@@ -18,7 +18,12 @@ const NativeIconAPI =
export const DEFAULT_ICON_SIZE = 12;
export const DEFAULT_ICON_COLOR = 'black';
-export default function createIconSet(glyphMap, fontFamily, fontFile) {
+export default function createIconSet(
+ glyphMap,
+ fontFamily,
+ fontFile,
+ fontStyle
+) {
let fontReference = fontFamily;
// Android doesn't care about actual fontFamily name, it will only look in fonts folder.
if (Platform.OS === 'android' && fontFile) {
@@ -59,7 +64,7 @@ export default function createIconSet(glyphMap, fontFamily, fontFile) {
};
render() {
- const { name, size, color, style, extraStyle, ...props } = this.props;
+ const { name, size, color, style, ...props } = this.props;
let glyph = name ? glyphMap[name] || '?' : '';
if (typeof glyph === 'number') {
@@ -77,7 +82,7 @@ export default function createIconSet(glyphMap, fontFamily, fontFile) {
fontStyle: 'normal',
};
- props.style = [styleDefaults, style, styleOverrides, extraStyle];
+ props.style = [styleDefaults, style, styleOverrides, fontStyle || {}];
props.ref = this.handleRef;
return (
diff --git a/scripts/fa5upgrade.sh b/scripts/fa5upgrade.sh
index 6d516e0c2..e256599b9 100755
--- a/scripts/fa5upgrade.sh
+++ b/scripts/fa5upgrade.sh
@@ -13,18 +13,11 @@ echo "Installing FontAwesome5 Pro"
npm install @fortawesome/fontawesome-pro --no-shrinkwrap
-echo "Unlinking project"
-
-react-native unlink react-native-vector-icons
-
echo "Copying font files"
-cp ./node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.ttf Fonts/FontAwesome5_Brands.ttf
-cp ./node_modules/@fortawesome/fontawesome-free/webfonts/fa-regular-400.ttf Fonts/FontAwesome5_Regular.ttf
-cp ./node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.ttf Fonts/FontAwesome5_Solid.ttf
-
-echo "Linking project"
-
-react-native link react-native-vector-icons
+cp ./node_modules/@fortawesome/fontawesome-pro/webfonts/fa-brands-400.ttf Fonts/FontAwesome5_Brands.ttf
+cp ./node_modules/@fortawesome/fontawesome-pro/webfonts/fa-light-300.ttf Fonts/FontAwesome5_Light.ttf
+cp ./node_modules/@fortawesome/fontawesome-pro/webfonts/fa-regular-400.ttf Fonts/FontAwesome5_Regular.ttf
+cp ./node_modules/@fortawesome/fontawesome-pro/webfonts/fa-solid-900.ttf Fonts/FontAwesome5_Solid.ttf
echo "Done"