react-native-vector-icons - npm Package Compare versions

Comparing version 0.7.2 to 0.8.0

EvilIcons.js

@@ -59,22 +59,23 @@ /**
   "sc-odnoklassniki": 61743,
-  "sc-skype": 61744,
-  "sc-soundcloud": 61745,
-  "sc-tumblr": 61746,
-  "sc-twitter": 61747,
-  "sc-vimeo": 61748,
-  "sc-vk": 61749,
-  "sc-youtube": 61750,
-  "search": 61751,
-  "share-apple": 61752,
-  "share-google": 61753,
-  "spinner": 61754,
-  "spinner-2": 61755,
-  "spinner-3": 61756,
-  "star": 61757,
-  "tag": 61758,
-  "trash": 61759,
-  "trophy": 61760,
-  "undo": 61761,
-  "unlock": 61762,
-  "user": 61763
+  "sc-pinterest": 61744,
+  "sc-skype": 61745,
+  "sc-soundcloud": 61746,
+  "sc-tumblr": 61747,
+  "sc-twitter": 61748,
+  "sc-vimeo": 61749,
+  "sc-vk": 61750,
+  "sc-youtube": 61751,
+  "search": 61752,
+  "share-apple": 61753,
+  "share-google": 61754,
+  "spinner": 61755,
+  "spinner-2": 61756,
+  "spinner-3": 61757,
+  "star": 61758,
+  "tag": 61759,
+  "trash": 61760,
+  "trophy": 61761,
+  "undo": 61762,
+  "unlock": 61763,
+  "user": 61764
 };
@@ -81,0 +82,0 @@

lib/create-icon-set.js

@@ -13,2 +13,3 @@ /**
   StyleSheet,
+  TouchableHighlight,
   TabBarIOS,
@@ -22,6 +23,2 @@ requireNativeComponent,
 var NativeIconAPI = NativeModules.RNVectorIconsManager || NativeModules.RNVectorIconsModule;
-var StyleSheetPropType = require('react-native/Libraries/StyleSheet/StyleSheetPropType');
-var flattenStyle = require('react-native/Libraries/StyleSheet/flattenStyle');
-var ViewStylePropTypes = require('react-native/Libraries/Components/View/ViewStylePropTypes');
-var TextStylePropTypes = require('react-native/Libraries/Text/TextStylePropTypes');
 
@@ -31,2 +28,7 @@ var DEFAULT_ICON_SIZE = 12;
 var DEFAULT_ICON_COLOR = 'black';
+var IOS7_BLUE = '#007AFF';
+var DEFAULT_BUTTON_ICON_SIZE = 20;
+var DEFAULT_BUTTON_ICON_COLOR = 'white';
+var DEFAULT_BUTTON_RADIUS = 5;
+var DEFAULT_BUTTON_BACKGROUND = IOS7_BLUE;
 
@@ -40,12 +42,2 @@ var TypefaceTextView;
 function createIconSet(glyphMap : Object, fontFamily : string, fontFile : string) : Function {
-  var styles = StyleSheet.create({
-    container: {
-      overflow:         'hidden',
-      backgroundColor:  'transparent',
-      flexDirection:    'row',
-      justifyContent:   'flex-start',
-      alignItems:       'center',
-    },
-  });
-
   var Icon = React.createClass({
@@ -56,3 +48,2 @@ propTypes: {
       color: React.PropTypes.string,
-      style: StyleSheetPropType(TextStylePropTypes)
     },
@@ -65,4 +56,4 @@
     render: function() {
+      var { name, size, color, style, ...props } = this.props;
 
-      var name = this.props.name;
       var glyph = glyphMap[name] || '?';
@@ -73,36 +64,94 @@ if(typeof glyph === 'number') {
 
-      var containerStyle = _.pick(flattenStyle([styles.container, this.props.style]), Object.keys(ViewStylePropTypes));
+      size = size || DEFAULT_ICON_SIZE;
+      color = color || DEFAULT_ICON_COLOR;
 
-      var textStyle = _.pick(
-        flattenStyle([this.props.style]),
-        Object.keys(TextStylePropTypes)
-      );
+      var styleDefaults = {
+        fontSize: size,
+        color,
+      };
 
-      var size = this.props.size || textStyle.fontSize || DEFAULT_ICON_SIZE;
-      var color = this.props.color || textStyle.color || DEFAULT_ICON_COLOR;
+      props.style = [styleDefaults, style];
+      props.ref = (component) => this._root = component;
 
-      textStyle.fontSize    = size;
-      textStyle.lineHeight  = size;
-      textStyle.height      = size;
-      textStyle.color       = color;
-
-      var icon;
       // For android we have to use our own subclass of the TextView since it
       // doesn't yet support custom fonts
       if(Platform.OS === 'android') {
-        if(!textStyle.width) {
-          // FIXME: Temporary workaround until I can figure out how to automatically size icons
-          textStyle.width = size;
-        }
-        icon = (<TypefaceTextView style={textStyle} fontFile={fontFile}>{glyph}</TypefaceTextView>);
-      } else {
-        textStyle.fontFamily = fontFamily;
-        icon = (<Text style={textStyle}>{glyph}</Text>);
+        // FIXME: Temporary workaround until I can figure out how to automatically size icons
+        styleDefaults.width = size;
+        styleDefaults.height = size;
+        styleDefaults.lineHeight = size;
+        return (<TypefaceTextView {...props} fontFile={fontFile}>{glyph}</TypefaceTextView>);
       }
 
+      styleDefaults.fontFamily = fontFamily;
+      return (<Text {...props}>{glyph}</Text>);
+    }
+  });
+
+  var styles = StyleSheet.create({
+    container: {
+      flexDirection: 'row',
+      justifyContent: 'flex-start',
+      alignItems: 'center',
+      padding: 8,
+    },
+    touchable: {
+      overflow: 'hidden',
+    },
+    icon: {
+      marginRight: 10,
+    },
+    text: {
+      fontWeight: '600',
+      backgroundColor: 'transparent',
+    },
+  });
+
+  var IconButton = React.createClass({
+    getDefaultProps: function() {
+      return {
+        size: DEFAULT_BUTTON_ICON_SIZE,
+        color: DEFAULT_BUTTON_ICON_COLOR,
+        backgroundColor: DEFAULT_BUTTON_BACKGROUND,
+        borderRadius: DEFAULT_BUTTON_RADIUS,
+      };
+    },
+
+    render: function() {
+      var {
+        style,
+        iconStyle,
+        children,
+        ...props
+      } = this.props;
+
+      var iconProps = _.pick(props, Object.keys(Text.propTypes), 'style', 'name', 'size', 'color');
+      var touchableProps = _.pick(props, Object.keys(TouchableHighlight.propTypes));
+      props = _.omit(
+        props,
+        Object.keys(iconProps),
+        Object.keys(touchableProps),
+        'iconStyle',
+        'borderRadius',
+        'backgroundColor'
+      );
+      iconProps.style = (this.props.iconStyle ? [styles.icon, this.props.iconStyle]: styles.icon);
+
+      var colorStyle = _.pick(this.props, 'color');
+      var blockStyle = _.pick(this.props, 'backgroundColor', 'borderRadius');
+
+      if(_.isString(children)) {
+        children = (<Text style={[styles.text, colorStyle]}>{children}</Text>);
+      }
+
       return (
-        <View ref={component => this._root = component} {...this.props} style={containerStyle}>
-          {icon}
-          {this.props.children}
-        </View>
+        <TouchableHighlight style={[styles.touchable, blockStyle]} {...touchableProps}>
+          <View
+            style={[styles.container, blockStyle, style]}
+            {...props}
+          >
+            <Icon {...iconProps} />
+            {children}
+          </View>
+        </TouchableHighlight>
       );
@@ -188,2 +237,3 @@ }
 
+  Icon.Button = IconButton;
   Icon.TabBarItem = TabBarItem;
@@ -190,0 +240,0 @@ Icon.getImageSource = getImageSource;

package.json

 {
   "name": "react-native-vector-icons",
-  "version": "0.7.2",
+  "version": "0.8.0",
   "description": "Customizable Icons for React Native with support for NavBar/TabBar, image source and full styling. Choose from 3000+ bundled icons or use your own.",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -11,3 +11,3 @@ # Vector Icons for React Native
 * You can use *native* `TabBarIOS`.
-* You can nest elements within the `Icon` component to create buttons. 
+* You can use icons inline with `Text` components as emojis or to create buttons. 
 * You can use the icon as an image if a native component requires it (such as `NavigatorIOS`). 
@@ -17,3 +17,15 @@ * Most common use cases is JavaScript only and thus enables wider possibilities of styling (and is easier to integrate with your project).
 * Presentational stuff like size and color can be defined in your stylesheet instead of via a property (if you want to).
+* Icons scale with accessibility settings (unless disabled).
 
+## Bundled Icon Sets
+
+* [`Entypo`](http://entypo.com) by Daniel Bruce (**411** icons) 
+* [`EvilIcons`](http://evil-icons.io) by Alexander Madyankin & Roman Shamin (v1.7.8, **70** icons) 
+* [`FontAwesome`](http://fortawesome.github.io/Font-Awesome/icons/) by Dave Gandy (v4.4, **585** icons) 
+* [`Foundation`](http://zurb.com/playground/foundation-icon-fonts-3) by ZURB, Inc. (v3.0, **283** icons)
+* [`Ionicons`](http://ionicons.com/) by Ben Sperry (v2.0.1, **733** icons)
+* [`MaterialIcons`](https://www.google.com/design/icons/) by Google, Inc. (v2.0, **796** icons)
+* [`Octicons`](http://octicons.github.com) by Github, Inc. (v2.4.1, **178** icons)
+* [`Zocial`](http://zocial.smcllns.com/) by Sam Collins (v1.0, **100** icons)
+
 ## Installation
@@ -60,21 +72,3 @@
   android {
-    compileSdkVersion 23
-    buildToolsVersion "23.0.1"
-
-    defaultConfig {
-      applicationId "com.myapp"
-      minSdkVersion 16
-      targetSdkVersion 22
-      versionCode 1
-      versionName "1.0"
-      ndk {
-        abiFilters "armeabi-v7a", "x86"
-      }
-    }
-    buildTypes {
-      release {
-        minifyEnabled false
-        proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
-      }
-    }
+    ...
   }
@@ -134,29 +128,28 @@
 
-## Usage
-You can either use one of the bundled icons or roll your own custom font. Currently available options for bundled icon sets are:
+### Known issues on android
 
-* [`Entypo`](http://entypo.com) by Daniel Bruce (**411** icons) 
-* [`EvilIcons`](http://evil-icons.io) by Alexander Madyankin & Roman Shamin (v1.7.6, **68** icons) 
-* [`FontAwesome`](http://fortawesome.github.io/Font-Awesome/icons/) by Dave Gandy (v4.4, **585** icons) 
-* [`Foundation`](http://zurb.com/playground/foundation-icon-fonts-3) by ZURB, Inc. (v3.0, **283** icons)
-* [`Ionicons`](http://ionicons.com/) by Ben Sperry (v2.0.1, **733** icons)
-* [`MaterialIcons`](https://www.google.com/design/icons/) by Google, Inc. (v2.0, **796** icons)
-* [`Octicons`](http://octicons.github.com) by Github, Inc. (v2.4.1, **178** icons)
-* [`Zocial`](http://zocial.smcllns.com/) by Sam Collins (v1.0, **100** icons)
+* Size can only be passed as a property, not with a stylesheet
+* Icons have a fixed width causing some icons to be clipped or have whitespace. Adjust with `style={{width: xx}}` for now. 
+* Icons cannot be nested within a `Text` component.
 
+## `Icon` Component
+You can either use one of the bundled icons above or roll your own custom font. 
+
 ```js
 var Icon = require('react-native-vector-icons/FontAwesome');
-var myIcon = (<Icon name="rocket" size={30} color="#900" style={styles.icon} />)
+var myIcon = (<Icon name="rocket" size={30} color="#900" />)
 ```
 
-### Sizing
+### Properties
+Any [Text property](http://facebook.github.io/react-native/docs/text.html) and the following: 
 
-Either use the `size` attribute or a style with `fontSize`, defaults to 12. Sets the height of the icon, width depends on the icon aspect ratio, but will most likely be the same. 
+| Prop | Description | Default |
+|---|---|---|
+|**`size`**|Size of the icon, can also be passed as `fontSize` in the style object. |`12`|
+|**`name`**|What icon to show, see Icon Explorer app or one of the links above. |*None*|
+|**`color`**|Color of the icon. |`black`|
 
-### Color
-Either use the `color` attribute or a style with `color`, defaults to black. 
+### Styling
+Since `Icon` builds on top of the `Text` component, most [style properties](http://facebook.github.io/react-native/docs/style.html) will work as expected, you might find it useful to play around with these:
 
-### Style
-Most [style properties](http://facebook.github.io/react-native/docs/style.html) will work as expected, you might find it useful to play around with these:
-
 * `backgroundColor`
@@ -170,5 +163,2 @@ * `borderWidth`
 * `fontSize`
-* `flexDirection`
-* `justifyContent`
-* `alignItems`
 
@@ -180,7 +170,36 @@ By combining some of these you can create for example:
 
-### Nesting
-It's possible to nest the icons, any child content will appear after the icon, see the button example below. 
+## `Icon.Button` Component
+A convenience component for creating buttons with an icon on the left side. 
 
-### Usage as PNG image/source object
+```js
+var Icon = require('react-native-vector-icons/FontAwesome')
+var myButton = (
+  <Icon.Button name="facebook" backgroundColor="#3b5998" onPress={this.loginWithFacebook}>
+    Login with Facebook
+  </Icon.Button>
+);
 
+var customTextButton = (
+  <Icon.Button name="facebook" backgroundColor="#3b5998">
+    <Text style={{fontFamily: 'Arial', fontSize: 15}}Login with Facebook</Text>
+  </Icon.Button>
+);
+```
+
+![buttons](https://cloud.githubusercontent.com/assets/378279/7667568/2e9021b2-fc0d-11e4-8e68-cf91c329a6f4.png)
+
+### Properties
+Any [`Text`](http://facebook.github.io/react-native/docs/text.html), [`TouchableHighlight`](http://facebook.github.io/react-native/docs/touchablehighlight.html) or [`TouchableWithoutFeedback`](http://facebook.github.io/react-native/docs/touchablewithoutfeedback.html) property in addition to these:
+
+| Prop | Description | Default |
+|---|---|---|
+|**`color`**|Text and icon color, use `iconStyle` or nest a `Text` component if you need different colors.|`white`|
+|**`size`**|Icon size.|`20`|
+|**`iconStyle`**|Styles applied to the icon only, good for setting margins or a different color.|`{marginRight: 10}`|
+|**`backgroundColor`**|Background color of the button.|`#007AFF`|
+|**`borderRadius`**|Border radius of the button, set to `0` to disable. |`5`|
+|**`onPress`**|A function called when the button is pressed. |*None*|
+
+## Usage as PNG image/source object
+
 Convenient way to plug this in into other components that rely on bitmap images rather than scalable vector icons. Takes the arguments `name`, `size` and `color` as described above.
@@ -194,13 +213,15 @@
 
-### Usage with [TabBarIOS](http://facebook.github.io/react-native/docs/tabbarios.html)
+## Usage with [TabBarIOS](http://facebook.github.io/react-native/docs/tabbarios.html)
 
 Simply use `Icon.TabBarItem` instead of `TabBarIOS.Item`. This is an extended component that works exactly the same but with three additional properties: 
 
-* `iconName` name of the default icon (similar to `TabBarIOS.Item` `icon`).
-* `selectedIconName` name of the default icon (similar to `TabBarIOS.Item` `selectedIcon`). Optional.
-* `iconSize` size of the icon, defaults to 30. Optional.
+| Prop | Description | Default |
+|---|---|---|
+|**`iconName`**|Name of the default icon (similar to `TabBarIOS.Item` `icon`)|*None*|
+|**`selectedIconName`**|Name of the selected icon (similar to `TabBarIOS.Item` `selectedIcon`). |*`iconName`*|
+|**`iconSize`**|Size of the icon. |`30`|
 
 For example usage see `Examples/TabBarExample` or the examples section below. Don't forget to import and link to this project as described above if you are going to use the TabBar integration. 
 
-### Usage with [NavigatorIOS](http://facebook.github.io/react-native/docs/navigatorios.html)
+## Usage with [NavigatorIOS](http://facebook.github.io/react-native/docs/navigatorios.html)
 
@@ -225,5 +246,5 @@ Use `Icon.getImageSource` to get an image source object and pass it as you would with `backButtonIcon`, `leftButtonIcon` or `rightButtonIcon`.
 
-### Custom Fonts
+## Custom Fonts
 
-#### `createIconSet(glyphMap, fontFamily[, fontFile])`
+### `createIconSet(glyphMap, fontFamily[, fontFile])`
 Returns your own custom font based on the `glyphMap` where the key is the icon name and the value is either a UTF-8 character or it's character code. `fontFamily` is the name of the font **NOT** the filename. Open the font in Font Book.app or similar to learn the name. Optionally pass the third `fontFile` argument for android support, it should be a path to the font file in you asset folder. 
@@ -237,3 +258,3 @@
 
-#### `createIconSetFromFontello(config[, fontFamily[, fontFile]])`
+### `createIconSetFromFontello(config[, fontFamily[, fontFile]])`
 Convenience method to create a custom font based on a [fontello](http://fontello.com) config file. Don't forget to import the font as described above and drop the `config.json` somewhere convenient in your project. 
@@ -296,30 +317,12 @@
 
-### Button
-By nesting a `<Text>` element and assigning padding and background color you can achieve a button like appearance. To register taps, just wrap it with a [`Touchable*`](http://facebook.github.io/react-native/docs/touchableopacity.html) component. 
-
-![buttons](https://cloud.githubusercontent.com/assets/378279/7667568/2e9021b2-fc0d-11e4-8e68-cf91c329a6f4.png)
-
+### Inline Icons
 ```js
-var Icon = require('react-native-vector-icons/FontAwesome')
+var React = require('react-native');
+var Icon = require('react-native-vector-icons/Ionicons');
 
-var styles = StyleSheet.create({
-  icon: {
-    fontSize: 20,
-    color: 'white',
-    paddingVertical: 5,
-    paddingHorizontal: 8,
-    borderRadius: 4,
-    backgroundColor: '#3b5998',
-  },
-  text: {
-    marginLeft: 10,
-    color: 'white',
-    fontWeight: '600',
-  },
-});
-var button = (
-  <Icon name="facebook" style={styles.icon}>
-    <Text style={styles.text}>Login with Facebook</Text>
-  </Icon>
-);
+var ExampleView = React.createClass({
+  render: function() {
+    return (<Text>Lorem <Icon name="ios-book" color="#4F8EF7" /> Ipsum</Text>);
+  }
+};
 ```
@@ -330,2 +333,3 @@
 * [react-native-dribbble-app](https://github.com/catalinmiron/react-native-dribbble-app)
+* [voximplant react-native-demo](https://github.com/voximplant/react-native-demo)
 
@@ -332,0 +336,0 @@ ## Generating your own icon set from a CSS file

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

787384

increased by0.25%

Lines of code

3720

increased by1.25%

Number of lines in readme file

355

increased by1.14%

No dependency changes