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

Comparing version 4.1.0 to 4.1.1

generate-icon.js

@@ -5,3 +5,5 @@ #!/usr/bin/env node
 var argv = require('yargs')
-  .usage('Usage: $0 [options] path/to/styles.css \nFor default template please provide --componentName and --fontFamily')
+  .usage(
+    'Usage: $0 [options] path/to/styles.css \nFor default template please provide --componentName and --fontFamily'
+  )
   .demand(1)
@@ -17,4 +19,3 @@ .default('p', '.icon-')
   .describe('g', 'Save glyphmap JSON to file')
-  .alias('g', 'glyphmap')
-  .argv;
+  .alias('g', 'glyphmap').argv;
 
@@ -26,15 +27,14 @@ var _ = require('lodash');
 var template;
-if(argv.template) {
+if (argv.template) {
   template = fs.readFileSync(argv.template, { encoding: 'utf8' });
 }
 
-var data = _.omit(argv, '_ $0 o output p prefix t template g glyphmap'.split(' '));
+var data = _.omit(
+  argv,
+  '_ $0 o output p prefix t template g glyphmap'.split(' ')
+);
 
-
 var content = generateIconSetFromCss(argv._, argv.prefix, template, data);
-if(argv.output) {
-  fs.writeFileSync(
-    argv.output,
-    content
-  );
+if (argv.output) {
+  fs.writeFileSync(argv.output, content);
 } else {
@@ -45,6 +45,3 @@ console.log(content);
 if (argv.glyphmap) {
-  fs.writeFileSync(
-    argv.glyphmap,
-    generateIconSetFromCss(argv._, argv.prefix)
-  );
+  fs.writeFileSync(argv.glyphmap, generateIconSetFromCss(argv._, argv.prefix));
 }

generate-material-icons.js

@@ -5,3 +5,5 @@ #!/usr/bin/env node
 var argv = require('yargs')
-  .usage('Usage: $0 [options] path/to/codepoints \nFor default template please provide --componentName and --fontFamily')
+  .usage(
+    'Usage: $0 [options] path/to/codepoints \nFor default template please provide --componentName and --fontFamily'
+  )
   .demand(1)
@@ -14,4 +16,3 @@ .default('t', __dirname + '/templates/bundled-icon-set.tpl')
   .describe('g', 'Save glyphmap JSON to file')
-  .alias('g', 'glyphmap')
-  .argv;
+  .alias('g', 'glyphmap').argv;
 
@@ -26,3 +27,3 @@ var _ = require('lodash');
     var parts = point.split(' ');
-    if(parts.length === 2) {
+    if (parts.length === 2) {
       glyphMap[parts[0].replace(/_/g, '-')] = parseInt(parts[1], 16);
@@ -36,3 +37,3 @@ }
 var template;
-if(argv.template) {
+if (argv.template) {
   template = fs.readFileSync(argv.template, { encoding: 'utf8' });
@@ -45,3 +46,3 @@ }
 var content = JSON.stringify(glyphMap, null, '  ');
-if(template) {
+if (template) {
   var compiled = _.template(template);
@@ -53,7 +54,4 @@ data = data || {};
 
-if(argv.output) {
-  fs.writeFileSync(
-    argv.output,
-    content
-  );
+if (argv.output) {
+  fs.writeFileSync(argv.output, content);
 } else {
@@ -64,6 +62,3 @@ console.log(content);
 if (argv.glyphmap) {
-  fs.writeFileSync(
-    argv.glyphmap,
-    JSON.stringify(glyphMap, null, '  ')
-  );
+  fs.writeFileSync(argv.glyphmap, JSON.stringify(glyphMap, null, '  '));
 }

index.js

 export { default as createIconSet } from './lib/create-icon-set';
-export { default as createIconSetFromFontello } from './lib/create-icon-set-from-fontello';
-export { default as createIconSetFromIcoMoon } from './lib/create-icon-set-from-icomoon';
+export {
+  default as createIconSetFromFontello,
+} from './lib/create-icon-set-from-fontello';
+export {
+  default as createIconSetFromIcoMoon,
+} from './lib/create-icon-set-from-icomoon';

lib/create-icon-set-from-fontello.js

 import createIconSet from './create-icon-set';
 
-export default function createIconSetFromFontello(config, fontFamilyArg, fontFile) {
+export default function createIconSetFromFontello(
+  config,
+  fontFamilyArg,
+  fontFile
+) {
   const glyphMap = {};
-  config.glyphs.forEach((glyph) => {
+  config.glyphs.forEach(glyph => {
     glyphMap[glyph.css] = glyph.code;
@@ -11,7 +15,3 @@ });
 
-  return createIconSet(
-    glyphMap,
-    fontFamily,
-    fontFile || `${fontFamily}.ttf`,
-  );
+  return createIconSet(glyphMap, fontFamily, fontFile || `${fontFamily}.ttf`);
 }

lib/create-icon-set-from-icomoon.js

 import createIconSet from './create-icon-set';
 
-export default function createIconSetFromIcoMoon(config, fontFamilyArg, fontFile) {
+export default function createIconSetFromIcoMoon(
+  config,
+  fontFamilyArg,
+  fontFile
+) {
   const glyphMap = {};
-  config.icons.forEach((icon) => {
+  config.icons.forEach(icon => {
     glyphMap[icon.properties.name] = icon.properties.code;
   });
 
-  const fontFamily = fontFamilyArg || config.preferences.fontPref.metadata.fontFamily;
+  const fontFamily =
+    fontFamilyArg || config.preferences.fontPref.metadata.fontFamily;
 
-  return createIconSet(
-    glyphMap,
-    fontFamily,
-    fontFile || `${fontFamily}.ttf`,
-  );
+  return createIconSet(glyphMap, fontFamily, fontFile || `${fontFamily}.ttf`);
 }

lib/create-icon-set.js

@@ -1,7 +0,3 @@
-import React, {
-  Component,
-} from 'react';
-
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-
 import {
@@ -19,3 +15,4 @@ NativeModules,
 
-const NativeIconAPI = (NativeModules.RNVectorIconsManager || NativeModules.RNVectorIconsModule);
+const NativeIconAPI =
+  NativeModules.RNVectorIconsManager || NativeModules.RNVectorIconsModule;
 
@@ -40,6 +37,7 @@ const DEFAULT_ICON_SIZE = 12;
     static propTypes = {
-      ...Text.propTypes,
       name: IconNamePropType.isRequired,
       size: PropTypes.number,
       color: PropTypes.string,
+      children: PropTypes.node,
+      style: PropTypes.any, // eslint-disable-line react/forbid-prop-types
     };
@@ -59,3 +57,3 @@
     root = null;
-    handleRef = (ref) => {
+    handleRef = ref => {
       this.root = ref;
@@ -86,3 +84,3 @@ };
 
-      return (<Text {...props}>{glyph}{this.props.children}</Text>);
+      return <Text {...props}>{glyph}{this.props.children}</Text>;
     }
@@ -93,8 +91,16 @@ }
 
-  function getImageSource(name, size = DEFAULT_ICON_SIZE, color = DEFAULT_ICON_COLOR) {
+  function getImageSource(
+    name,
+    size = DEFAULT_ICON_SIZE,
+    color = DEFAULT_ICON_COLOR
+  ) {
     if (!NativeIconAPI) {
       if (Platform.OS === 'android') {
-        throw new Error('RNVectorIconsModule not available, did you properly integrate the module?');
+        throw new Error(
+          'RNVectorIconsModule not available, did you properly integrate the module?'
+        );
       }
-      throw new Error('RNVectorIconsManager not available, did you add the library to your project and link with libRNVectorIcons.a?');
+      throw new Error(
+        'RNVectorIconsManager not available, did you add the library to your project and link with libRNVectorIcons.a?'
+      );
     }
@@ -120,11 +126,17 @@
       } else {
-        NativeIconAPI.getImageForFont(fontReference, glyph, size, processedColor, (err, image) => {
-          const error = (typeof err === 'string' ? new Error(err) : err);
-          imageSourceCache[cacheKey] = image || error || false;
-          if (!error && image) {
-            resolve({ uri: image, scale });
-          } else {
-            reject(error);
+        NativeIconAPI.getImageForFont(
+          fontReference,
+          glyph,
+          size,
+          processedColor,
+          (err, image) => {
+            const error = typeof err === 'string' ? new Error(err) : err;
+            imageSourceCache[cacheKey] = image || error || false;
+            if (!error && image) {
+              resolve({ uri: image, scale });
+            } else {
+              reject(error);
+            }
           }
-        });
+        );
       }
@@ -135,5 +147,11 @@ });
   Icon.Button = createIconButtonComponent(Icon);
-  Icon.TabBarItem = createTabBarItemIOSComponent(IconNamePropType, getImageSource);
+  Icon.TabBarItem = createTabBarItemIOSComponent(
+    IconNamePropType,
+    getImageSource
+  );
   Icon.TabBarItemIOS = Icon.TabBarItem;
-  Icon.ToolbarAndroid = createToolbarAndroidComponent(IconNamePropType, getImageSource);
+  Icon.ToolbarAndroid = createToolbarAndroidComponent(
+    IconNamePropType,
+    getImageSource
+  );
   Icon.getImageSource = getImageSource;
@@ -140,0 +158,0 @@

lib/generate-icon-set-from-css.js

@@ -5,3 +5,4 @@ const _ = require('lodash');
 function extractGlyphMapFromCss(files, selectorPattern) {
-  const styleRulePattern = '(\\.[A-Za-z0-9_.:, \\n\\t-]+)\\{[^}]*content: ?["\\\'](?:\\\\([A-Fa-f0-9]+)|([^"\\\']+))["\\\'][^}]*\\}';
+  const styleRulePattern =
+    '(\\.[A-Za-z0-9_.:, \\n\\t-]+)\\{[^}]*content: ?["\\\'](?:\\\\([A-Fa-f0-9]+)|([^"\\\']+))["\\\'][^}]*\\}';
   const allStyleRules = new RegExp(styleRulePattern, 'g');
@@ -12,3 +13,3 @@ const singleStyleRules = new RegExp(styleRulePattern);
 
-  const extractGlyphFromRule = (rule) => {
+  const extractGlyphFromRule = rule => {
     const ruleParts = rule.match(singleStyleRules);
@@ -26,3 +27,3 @@ if (ruleParts[2]) {
 
-  const extractSelectorsFromRule = (rule) => {
+  const extractSelectorsFromRule = rule => {
     const ruleParts = rule.match(singleStyleRules);
@@ -37,3 +38,3 @@ const selectors = ruleParts[1].match(allSelectors) || [];
     .reduce((acc, rules) => acc.concat(rules), [])
-    .map((rule) => {
+    .map(rule => {
       const glyph = extractGlyphFromRule(rule);
@@ -51,3 +52,6 @@ const selectors = extractSelectorsFromRule(rule);
 function generateIconSetFromCss(cssFiles, selectorPrefix, template, data = {}) {
-  const glyphMap = extractGlyphMapFromCss(cssFiles, `${escapeRegExp(selectorPrefix)}([A-Za-z0-9_-]+):before`);
+  const glyphMap = extractGlyphMapFromCss(
+    cssFiles,
+    `${escapeRegExp(selectorPrefix)}([A-Za-z0-9_-]+):before`
+  );
   const content = JSON.stringify(glyphMap, null, '  ');
@@ -54,0 +58,0 @@ if (template) {

lib/icon-button.js

 import isString from 'lodash/isString';
 import omit from 'lodash/omit';
 import pick from 'lodash/pick';
-
-import React, {
-  Component,
-} from 'react';
-
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import { StyleSheet, Text, TouchableHighlight, View } from './react-native';
 
-import {
-  StyleSheet,
-  Text,
-  TouchableHighlight,
-  View,
-} from './react-native';
-
 const styles = StyleSheet.create({
@@ -42,3 +32,2 @@ container: {
     static propTypes = {
-      ...View.propTypes,
       backgroundColor: PropTypes.string,
@@ -48,2 +37,5 @@ borderRadius: PropTypes.number,
       size: PropTypes.number,
+      iconStyle: PropTypes.any, // eslint-disable-line react/forbid-prop-types
+      style: PropTypes.any, // eslint-disable-line react/forbid-prop-types
+      children: PropTypes.node,
     };
@@ -61,4 +53,14 @@
 
-      const iconProps = pick(restProps, Object.keys(Text.propTypes), 'style', 'name', 'size', 'color');
-      const touchableProps = pick(restProps, Object.keys(TouchableHighlight.propTypes));
+      const iconProps = pick(
+        restProps,
+        Object.keys(Text.propTypes),
+        'style',
+        'name',
+        'size',
+        'color'
+      );
+      const touchableProps = pick(
+        restProps,
+        Object.keys(TouchableHighlight.propTypes)
+      );
       const props = omit(
@@ -70,5 +72,5 @@ restProps,
         'borderRadius',
-        'backgroundColor',
+        'backgroundColor'
       );
-      iconProps.style = (iconStyle ? [styles.icon, iconStyle] : styles.icon);
+      iconProps.style = iconStyle ? [styles.icon, iconStyle] : styles.icon;
 
@@ -79,12 +81,11 @@ const colorStyle = pick(this.props, 'color');
       return (
-        <TouchableHighlight style={[styles.touchable, blockStyle]} {...touchableProps}>
-          <View
-            style={[styles.container, blockStyle, style]}
-            {...props}
-          >
+        <TouchableHighlight
+          style={[styles.touchable, blockStyle]}
+          {...touchableProps}
+        >
+          <View style={[styles.container, blockStyle, style]} {...props}>
             <Icon {...iconProps} />
             {isString(children)
-              ? (<Text style={[styles.text, colorStyle]}>{children}</Text>)
-              : children
-            }
+              ? <Text style={[styles.text, colorStyle]}>{children}</Text>
+              : children}
           </View>
@@ -91,0 +92,0 @@ </TouchableHighlight>

lib/tab-bar-item-ios.js

 import isEqual from 'lodash/isEqual';
 import pick from 'lodash/pick';
-
-import React, {
-  Component,
-} from 'react';
-
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import { TabBarIOS } from './react-native';
 
-import {
-  TabBarIOS,
-} from './react-native';
-
-export default function createTabBarItemIOSComponent(IconNamePropType, getImageSource) {
+export default function createTabBarItemIOSComponent(
+  IconNamePropType,
+  getImageSource
+) {
   return class TabBarItemIOS extends Component {
@@ -30,4 +26,7 @@ static propTypes = {
       if (props.iconName) {
-        getImageSource(props.iconName, props.iconSize, props.iconColor)
-          .then(icon => this.setState({ icon }));
+        getImageSource(
+          props.iconName,
+          props.iconSize,
+          props.iconColor
+        ).then(icon => this.setState({ icon }));
       }
@@ -37,4 +36,7 @@ if (props.selectedIconName || props.selectedIconColor) {
         const selectedIconColor = props.selectedIconColor || props.iconColor;
-        getImageSource(selectedIconName, props.iconSize, selectedIconColor)
-          .then(selectedIcon => this.setState({ selectedIcon }));
+        getImageSource(
+          selectedIconName,
+          props.iconSize,
+          selectedIconColor
+        ).then(selectedIcon => this.setState({ selectedIcon }));
       }
@@ -55,5 +57,5 @@ }
     render() {
-      return (<TabBarIOS.Item {...this.props} {...this.state} />);
+      return <TabBarIOS.Item {...this.props} {...this.state} />;
     }
   };
 }

lib/toolbar-android.js

 import isEqual from 'lodash/isEqual';
 import pick from 'lodash/pick';
-
-import React, {
-  Component,
-} from 'react';
-
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import { ToolbarAndroid } from './react-native';
 
-import {
-  ToolbarAndroid,
-} from './react-native';
-
-export default function createToolbarAndroidComponent(IconNamePropType, getImageSource) {
+export default function createToolbarAndroidComponent(
+  IconNamePropType,
+  getImageSource
+) {
   return class IconToolbarAndroid extends Component {
@@ -20,10 +16,12 @@ static propTypes = {
       overflowIconName: IconNamePropType,
-      actions: PropTypes.arrayOf(PropTypes.shape({
-        title: PropTypes.string.isRequired,
-        iconName: IconNamePropType,
-        iconSize: PropTypes.number,
-        iconColor: PropTypes.string,
-        show: PropTypes.oneOf(['always', 'ifRoom', 'never']),
-        showWithText: PropTypes.bool,
-      })),
+      actions: PropTypes.arrayOf(
+        PropTypes.shape({
+          title: PropTypes.string.isRequired,
+          iconName: IconNamePropType,
+          iconSize: PropTypes.number,
+          iconColor: PropTypes.string,
+          show: PropTypes.oneOf(['always', 'ifRoom', 'never']),
+          showWithText: PropTypes.bool,
+        })
+      ),
       iconSize: PropTypes.number,
@@ -41,21 +39,29 @@ iconColor: PropTypes.string,
       if (props.logoName) {
-        getImageSource(props.logoName, size, color)
-          .then(logo => this.setState({ logo }));
+        getImageSource(props.logoName, size, color).then(logo =>
+          this.setState({ logo })
+        );
       }
       if (props.navIconName) {
-        getImageSource(props.navIconName, size, color)
-          .then(navIcon => this.setState({ navIcon }));
+        getImageSource(props.navIconName, size, color).then(navIcon =>
+          this.setState({ navIcon })
+        );
       }
       if (props.overflowIconName) {
-        getImageSource(props.overflowIconName, size, color)
-          .then(overflowIcon => this.setState({ overflowIcon }));
+        getImageSource(props.overflowIconName, size, color).then(overflowIcon =>
+          this.setState({ overflowIcon })
+        );
       }
 
-      Promise.all((props.actions || []).map((action) => {
-        if (action.iconName) {
-          return getImageSource(action.iconName, action.iconSize || size, action.iconColor || color)
-            .then(icon => ({ ...action, icon }));
-        }
-        return Promise.resolve(action);
-      })).then(actions => this.setState({ actions }));
+      Promise.all(
+        (props.actions || []).map(action => {
+          if (action.iconName) {
+            return getImageSource(
+              action.iconName,
+              action.iconSize || size,
+              action.iconColor || color
+            ).then(icon => ({ ...action, icon }));
+          }
+          return Promise.resolve(action);
+        })
+      ).then(actions => this.setState({ actions }));
     }
@@ -62,0 +68,0 @@

package.json

 {
   "name": "react-native-vector-icons",
-  "version": "4.1.0",
+  "version": "4.1.1",
   "description": "Customizable Icons for React Native with support for NavBar/TabBar/ToolbarAndroid, image source and full styling.",
@@ -22,3 +22,4 @@ "main": "index.js",
     "build-zocial": "node generate-icon bower_components/css-social-buttons/css/zocial.css --prefix=.zocial. --componentName=Zocial --fontFamily=zocial --template=templates/separated-icon-set.tpl --glyphmap=glyphmaps/Zocial.json > Zocial.js && cp bower_components/css-social-buttons/css/zocial.ttf Fonts/Zocial.ttf",
-    "build-simplelineicons": "node generate-icon bower_components/simple-line-icons/css/simple-line-icons.css --prefix=.icon- --componentName=SimpleLineIcons --fontFamily=simple-line-icons --template=templates/separated-icon-set.tpl --glyphmap=glyphmaps/SimpleLineIcons.json > SimpleLineIcons.js && cp bower_components/simple-line-icons/fonts/Simple-Line-Icons.ttf Fonts/SimpleLineIcons.ttf"
+    "build-simplelineicons": "node generate-icon bower_components/simple-line-icons/css/simple-line-icons.css --prefix=.icon- --componentName=SimpleLineIcons --fontFamily=simple-line-icons --template=templates/separated-icon-set.tpl --glyphmap=glyphmaps/SimpleLineIcons.json > SimpleLineIcons.js && cp bower_components/simple-line-icons/fonts/Simple-Line-Icons.ttf Fonts/SimpleLineIcons.ttf",
+    "format": "./node_modules/.bin/prettier --single-quote --trailing-comma es5 --write {lib/*,index,RNIMigration,generate-icon,generate-material-icons}.js"
   },
@@ -79,4 +80,5 @@ "keywords": [
     "mdi": "1.9.33",
-    "octicons": "^5.0.1"
+    "octicons": "^5.0.1",
+    "prettier": "^1.3.1"
   }
 }

RNIMigration.js

@@ -36,3 +36,3 @@ import React from 'react';
 
-  handleComponentRef = (ref) => {
+  handleComponentRef = ref => {
     this.iconRef = ref;
@@ -39,0 +39,0 @@ };

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

Lines of code

6553

increased by0.61%

Worsened metrics

Total package byte prevSize

1213697

decreased by-0.18%

Dev dependency count

14

increased by7.69%

No dependency changes