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"