FontAwesome 5

Examples/IconExplorer/icon-sets.js

@@ -3,6 +3,7 @@ import Entypo from 'react-native-vector-icons/Entypo';
 import EvilIcons from 'react-native-vector-icons/EvilIcons';
 import Feather from 'react-native-vector-icons/Feather';
 import FontAwesome from 'react-native-vector-icons/FontAwesome';
+import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
 import Foundation from 'react-native-vector-icons/Foundation';
 import Ionicons from 'react-native-vector-icons/Ionicons';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
@@ -13,6 +14,7 @@ import EntypoGlyphs from 'react-native-vector-icons/glyphmaps/Entypo.json';
 import EvilIconsGlyphs from 'react-native-vector-icons/glyphmaps/EvilIcons.json';
 import FeatherGlyphs from 'react-native-vector-icons/glyphmaps/Feather.json';
 import FontAwesomeGlyphs from 'react-native-vector-icons/glyphmaps/FontAwesome.json';
+import FontAwesome5Glyphs from 'react-native-vector-icons/glyphmaps/FontAwesome5.json';
 import FoundationGlyphs from 'react-native-vector-icons/glyphmaps/Foundation.json';
 import IoniconsGlyphs from 'react-native-vector-icons/glyphmaps/Ionicons.json';
 import MaterialIconsGlyphs from 'react-native-vector-icons/glyphmaps/MaterialIcons.json';
@@ -25,6 +27,7 @@ const GLYPH_MAPS = {
   EvilIcons: EvilIconsGlyphs,
   Feather: FeatherGlyphs,
   FontAwesome: FontAwesomeGlyphs,
+  FontAwesome5: FontAwesome5Glyphs.free,
   Foundation: FoundationGlyphs,
   Ionicons: IoniconsGlyphs,
   MaterialIcons: MaterialIconsGlyphs,
@@ -38,6 +41,7 @@ const ICON_SETS = {
   EvilIcons,
   Feather,
   FontAwesome,
+  FontAwesome5,
   Foundation,
   Ionicons,
   MaterialIcons,

Examples/IconExplorer/ios/IconExplorer/Info.plist

@@ -36,6 +36,10 @@
 		<string>MaterialCommunityIcons.ttf</string>
 		<string>Octicons.ttf</string>
 		<string>Zocial.ttf</string>
+		<string>FontAwesome5_Brands.ttf</string>
+		<string>FontAwesome5_Regular.ttf</string>
+		<string>FontAwesome5_Solid.ttf</string>
+		<string>SimpleLineIcons.ttf</string>
 	</array>
 	<key>UILaunchStoryboardName</key>
 	<string>LaunchScreen</string>
@@ -52,9 +56,8 @@
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<false/>
 	<key>NSLocationWhenInUseUsageDescription</key>
-	<string></string>
+	<string/>
 	<key>NSAppTransportSecurity</key>
-	<!--See http://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/ -->
 	<dict>
 		<key>NSExceptionDomains</key>
 		<dict>

FONTAWESOME5.md

@@ -0,0 +1,99 @@
+# FontAwesome 5
+
+FontAwesome 5 is split into three different font files which makes it somewhat
+harder to use in some cases. The implemented solution should be fairly
+straightforward to use after it has been setup. 
+Android and iOS handles fonts differently which is why it could be
+easily implemented without any additional setup.
+
+### Table of Content
+
+* [`Usage`](#usage)
+* [`Upgrading to Pro`](#upgrading-to-pro)
+
+# Usage
+
+Using the standard icons works just like the standard icons in this library.
+
+```javascript
+import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
+
+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';
+
+const icon = (<FontAwesome5 name={'comments'} solid />);
+const icon = (<FontAwesome5 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.
+
+Button, TabBarItem etc. works the same way:
+
+```javascript
+import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
+
+const regular_icon_btn = (<FontAwesome5.Button name={'comments'} />);
+const solid_icon_btn = (<FontAwesome5.Button name={'comments'} solid />);
+```
+
+## 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.
+
+# Upgrading to Pro
+
+You need your FontAwesome npm token which can be obtained by logging into your
+account and then access the ```Services``` tab.
+
+Run ```./node_modules/.bin/fa5-upgrade``` and enter the token when asked to in order to
+upgrade to the Pro version.
+
+## 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 your project, there is
+instructions on how to do this in main README.md.
+
+## Using the Pro version
+
+Just as easy as using the Free icons, just include the icon set like this:
+```javascript
+import FontAwesome5Pro from 'react-native-vector-icons/FontAwesome5Pro';
+
+const icon = (<FontAwesome5Pro name={'comments'} light/>);
+```

FontAwesome5.js

@@ -0,0 +1,20 @@
+/**
+ * FontAwesome5 icon set component.
+ * Usage: <FontAwesome5 name="icon-name" size={20} color="#4F8EF7" />
+ */
+
+import { createFA5iconSet } from './lib/create-icon-set-from-fontawesome5';
+
+import glyphMap from './glyphmaps/FontAwesome5Free.json';
+
+export { FA5Style } from './lib/create-icon-set-from-fontawesome5';
+
+const iconSet = createFA5iconSet(glyphMap, false);
+
+export default iconSet;
+
+export const Button = iconSet.Button;
+export const TabBarItem = iconSet.TabBarItem;
+export const TabBarItemIOS = iconSet.TabBarItemIOS;
+export const ToolbarAndroid = iconSet.ToolbarAndroid;
+export const getImageSource = iconSet.getImageSource;

FontAwesome5Pro.js

@@ -0,0 +1,20 @@
+/**
+ * FontAwesome5Pro icon set component.
+ * Usage: <FontAwesome5Pro name="icon-name" size={20} color="#4F8EF7" />
+ */
+
+import { createFA5iconSet } from './lib/create-icon-set-from-fontawesome5';
+
+import glyphMap from './glyphmaps/FontAwesome5Pro.json';
+
+export { FA5Style } from './lib/create-icon-set-from-fontawesome5';
+
+const iconSet = createFA5iconSet(glyphMap, true);
+
+export default iconSet;
+
+export const Button = iconSet.Button;
+export const TabBarItem = iconSet.TabBarItem;
+export const TabBarItemIOS = iconSet.TabBarItemIOS;
+export const ToolbarAndroid = iconSet.ToolbarAndroid;
+export const getImageSource = iconSet.getImageSource;

README.md

@@ -11,7 +11,8 @@ Perfect for buttons, logos and nav/tab bars. Easy to extend, style and integrate
 * [`Entypo`](http://entypo.com) by Daniel Bruce (**411** icons) 
 * [`EvilIcons`](http://evil-icons.io) by Alexander Madyankin & Roman Shamin (v1.8.0, **70** icons) 
 * [`Feather`](http://feathericons.com) by Cole Bemis & Contributors (v4.7.0, **266** icons) 
-* [`FontAwesome`](http://fortawesome.github.io/Font-Awesome/icons/) by Dave Gandy (v4.7.0, **675** icons) 
+* [`FontAwesome`](http://fortawesome.github.io/Font-Awesome/icons/) by Dave Gandy (v4.7.0, **675** icons)
+* [`FontAwesome 5`](https://fontawesome.com) by Fonticons, Inc. (v5.1.1, 1265 (free) **2067** (pro) icons)
 * [`Foundation`](http://zurb.com/playground/foundation-icon-fonts-3) by ZURB, Inc. (v3.0, **283** icons)
 * [`Ionicons`](https://ionicons.com/) by Ben Sperry (v4.2.4, **696** icons)
 * [`MaterialIcons`](https://www.google.com/design/icons/) by Google, Inc. (v3.0.1, **932** icons)
@@ -24,6 +25,7 @@ Perfect for buttons, logos and nav/tab bars. Easy to extend, style and integrate
 
 1. Run: `$ npm install react-native-vector-icons --save`
 2. For each platform (iOS/Android/Windows) you plan to use, follow one of the options for the corresponding platform.
+3. If you intend to use FontAwesome 5, check out [`this guide`](FONTAWESOME5.md) to get you started.
 
 ### iOS 
 
@@ -493,4 +495,3 @@ Both npm and android file hierarchies tend to get very deep and even worse when
 This project is licenced under the [MIT License](http://opensource.org/licenses/mit-license.html).
 
 Any bundled fonts are copyright to their respective authors and mostly under MIT or [SIL OFL](http://scripts.sil.org/OFL).
-

RNVectorIconsManager/RNVectorIconsManager.h

@@ -19,4 +19,13 @@
 
 @interface RNVectorIconsManager : NSObject <RCTBridgeModule>
 
+- (NSString *)hexStringFromColor:(UIColor *)color;
+- (NSString *)generateFilePath:(NSString *)glyph withFontName:(NSString *)fontName
+                                                 withFontSize:(CGFloat)fontSize
+                                                 withColor:(UIColor *)color
+                                                 withExtraIdentifier:(NSString *)identifier;
+- (BOOL)createAndSaveGlyphImage:(NSString *)glyph withFont:(UIFont *)font
+                                                  withFilePath:(NSString *)filePath
+                                                  withColor:(UIColor *)color;
+
 @end

RNVectorIconsManager/RNVectorIconsManager.m

@@ -29,7 +29,8 @@ @implementation RNVectorIconsManager
 @synthesize bridge = _bridge;
 RCT_EXPORT_MODULE();
 
-- (NSString *)hexStringFromColor:(UIColor *)color {
+- (NSString *)hexStringFromColor:(UIColor *)color
+{
   const CGFloat *components = CGColorGetComponents(color.CGColor);
 
   CGFloat r = components[0];
@@ -42,19 +43,28 @@ - (NSString *)hexStringFromColor:(UIColor *)color {
           lroundf(b * 255)];
 }
 
-
-RCT_EXPORT_METHOD(getImageForFont:(NSString*)fontName withGlyph:(NSString*)glyph withFontSize:(CGFloat)fontSize withColor:(UIColor *)color callback:(RCTResponseSenderBlock)callback){
+- (NSString *)generateFilePath:(NSString *)glyph withFontName:(NSString *)fontName
+                                                 withFontSize:(CGFloat)fontSize
+                                                 withColor:(UIColor *)color
+                                                 withExtraIdentifier:(NSString *)identifier
+{
   CGFloat screenScale = RCTScreenScale();
-
   NSString *hexColor = [self hexStringFromColor:color];
+  NSString *fileName = [NSString stringWithFormat:@"tmp/RNVectorIcons_%@_%@_%hu_%.f%@@%.fx.png",
+                                                  identifier, fontName,
+                                                  [glyph characterAtIndex:0],
+                                                  fontSize, hexColor, screenScale];
+
+  return [NSHomeDirectory() stringByAppendingPathComponent:fileName];
+}
 
-  NSString *fileName = [NSString stringWithFormat:@"tmp/RNVectorIcons_%@_%hu_%.f%@@%.fx.png", fontName, [glyph characterAtIndex:0], fontSize, hexColor, screenScale];
-  NSString *filePath = [NSHomeDirectory() stringByAppendingPathComponent:fileName];
-
+- (BOOL)createAndSaveGlyphImage:(NSString *)glyph withFont:(UIFont *)font
+                                                  withFilePath:(NSString *)filePath
+                                                  withColor:(UIColor *)color
+{
   if(![[NSFileManager defaultManager] fileExistsAtPath:filePath]) {
     // No cached icon exists, we need to create it and persist to disk
 
-    UIFont *font = [UIFont fontWithName:fontName size:fontSize];
     NSAttributedString *attributedString = [[NSAttributedString alloc] initWithString:glyph attributes:@{NSFontAttributeName: font, NSForegroundColorAttributeName: color}];
 
     CGSize iconSize = [attributedString size];
@@ -65,11 +75,73 @@ - (NSString *)hexStringFromColor:(UIColor *)color {
     UIGraphicsEndImageContext();
 
     NSData *imageData = UIImagePNGRepresentation(iconImage);
-    BOOL success = [imageData writeToFile:filePath atomically:YES];
-    if(!success) {
-      return callback(@[@"Failed to write rendered icon image"]);
+    return [imageData writeToFile:filePath atomically:YES];
+  }
+
+  return YES;
+}
+
+RCT_EXPORT_METHOD(getImageForFont:(NSString *)fontName
+                  withGlyph:(NSString *)glyph
+                  withFontSize:(CGFloat)fontSize
+                  withColor:(UIColor *)color
+                  callback:(RCTResponseSenderBlock)callback)
+{
+  UIFont *font = [UIFont fontWithName:fontName size:fontSize];
+  NSString *filePath = [self generateFilePath:glyph withFontName:fontName
+                                                    withFontSize:fontSize
+                                                    withColor:color
+                                                    withExtraIdentifier:@""];
+
+  BOOL success = [self createAndSaveGlyphImage:glyph withFont:font
+                                                     withFilePath:filePath
+                                                     withColor:color];
+
+  if(!success) {
+    return callback(@[@"Failed to write rendered icon image"]);
+  }
+
+  callback(@[[NSNull null], filePath]);
+}
+
+RCT_EXPORT_METHOD(getImageForFontAwesome5:(NSString *)fontFamily
+                  withGlyph:(NSString *)glyph
+                  withFontSize:(CGFloat)fontSize
+                  withFontStyle:(NSInteger)style
+                  withColor:(UIColor *)color
+                  callback:(RCTResponseSenderBlock)callback)
+{
+  NSNumber *fontWeight = [NSNumber numberWithDouble:UIFontWeightRegular];
+  if (style == 1)
+    fontWeight = [NSNumber numberWithDouble:UIFontWeightUltraLight];
+  else if (style == 2)
+    fontWeight = [NSNumber numberWithDouble:UIFontWeightBold];
+
+  NSString *identifier = [NSString stringWithFormat:@"FA5.%ld", (long)style];
+  NSString *filePath = [self generateFilePath:glyph withFontName:fontFamily
+                                                    withFontSize:fontSize
+                                                    withColor:color
+                                                    withExtraIdentifier: identifier];
+
+  UIFont *font = [UIFont fontWithName:fontFamily size:fontSize];
+  for (NSString *fontString in [UIFont fontNamesForFamilyName:fontFamily]) {
+    UIFont *testFont = [UIFont fontWithName:fontString size:fontSize];
+    NSDictionary *traits = [testFont.fontDescriptor objectForKey:UIFontDescriptorTraitsAttribute];
+    NSNumber *testFontWeight = traits[UIFontWeightTrait];
+
+    if (testFontWeight.doubleValue == fontWeight.doubleValue) {
+      font = testFont;
+      break;
     }
   }
+
+  BOOL success = [self createAndSaveGlyphImage:glyph withFont:font
+                                                     withFilePath:filePath
+                                                     withColor:color];
+  if(!success) {
+    return callback(@[@"Failed to write rendered icon image"]);
+  }
+
   callback(@[[NSNull null], filePath]);
 }
 
@@ -105,4 +177,24 @@ - (NSString *)hexStringFromColor:(UIColor *)color {
   }
 }
 
+RCT_EXPORT_METHOD(setupFontAwesome5)
+{
+  for (NSString *family in [UIFont familyNames]) {
+    if ([family hasPrefix:@"Font Awesome 5"]) {
+      for (NSString *fontName in [UIFont fontNamesForFamilyName:family]) {
+        UIFont *font = [UIFont fontWithName:fontName size:12];
+        NSDictionary *traits = [font.fontDescriptor objectForKey:UIFontDescriptorTraitsAttribute];
+
+        if ([fontName hasSuffix:@"Light"]) {
+          [traits setValue:[NSNumber numberWithDouble:UIFontWeightUltraLight] forKey:UIFontWeightTrait];
+        } else if ([fontName hasSuffix:@"Regular"]) {
+          [traits setValue:[NSNumber numberWithDouble:UIFontWeightRegular] forKey:UIFontWeightTrait];
+        } else if ([fontName hasSuffix:@"Solid"]) {
+          [traits setValue:[NSNumber numberWithDouble:UIFontWeightBold] forKey:UIFontWeightTrait];
+        }
+      }
+    }
+  }
+}
+
 @end