@expo/vector-icons - npm Package Compare versions

Comparing version 6.1.0 to 6.2.0

createIconSet.js

@@ -8,7 +8,4 @@ import React from 'react';
 export default function(glyphMap, fontName, expoAssetId) {
-  const expoFontName = Font.style(fontName, {
-    ignoreWarning: true,
-  }).fontFamily;
   const font = { [fontName]: expoAssetId };
-  const RNVIconComponent = createIconSet(glyphMap, expoFontName);
+  const RNVIconComponent = createIconSet(glyphMap, fontName);
 
@@ -15,0 +12,0 @@ class Icon extends React.Component {

createIconSetFromFontello.js

 import { Font } from 'expo';
-import createIconSetFromFontello
-  from './vendor/react-native-vector-icons/lib/create-icon-set-from-fontello';
+import createIconSetFromFontello from './vendor/react-native-vector-icons/lib/create-icon-set-from-fontello';
 
 export default function(config, expoFontName, expoAssetId) {
-  return createIconSetFromFontello(
-    config,
-    Font.style(expoFontName).fontFamily,
-    expoAssetId
-  );
+  return createIconSetFromFontello(config, Font.style(expoFontName).fontFamily, expoAssetId);
 }

createIconSetFromIcoMoon.js

 import { Font } from 'expo';
-import createIconSetFromIcoMoon
-  from './vendor/react-native-vector-icons/lib/create-icon-set-from-icomoon';
+import createIconSetFromIcoMoon from './vendor/react-native-vector-icons/lib/create-icon-set-from-icomoon';
 
 export default function(config, expoFontName, expoAssetId) {
-  return createIconSetFromIcoMoon(
-    config,
-    Font.style(expoFontName).fontFamily,
-    expoAssetId
-  );
+  return createIconSetFromIcoMoon(config, Font.style(expoFontName).fontFamily, expoAssetId);
 }

EvilIcons.js

@@ -1,9 +0,4 @@
-import glyphMap
-  from './vendor/react-native-vector-icons/glyphmaps/EvilIcons.json';
+import glyphMap from './vendor/react-native-vector-icons/glyphmaps/EvilIcons.json';
 import createIconSet from './createIconSet';
 
-export default createIconSet(
-  glyphMap,
-  'evilicons',
-  require('./fonts/EvilIcons.ttf')
-);
+export default createIconSet(glyphMap, 'evilicons', require('./fonts/EvilIcons.ttf'));

Feather.js

 import glyphMap from './vendor/react-native-vector-icons/glyphmaps/Feather.json';
 import createIconSet from './createIconSet';
 
-export default createIconSet(
-  glyphMap,
-  'feather',
-  require('./fonts/Feather.ttf')
-);
+export default createIconSet(glyphMap, 'feather', require('./fonts/Feather.ttf'));

FontAwesome.js

@@ -1,9 +0,4 @@
-import glyphMap
-  from './vendor/react-native-vector-icons/glyphmaps/FontAwesome.json';
+import glyphMap from './vendor/react-native-vector-icons/glyphmaps/FontAwesome.json';
 import createIconSet from './createIconSet';
 
-export default createIconSet(
-  glyphMap,
-  'awesome',
-  require('./fonts/FontAwesome.ttf')
-);
+export default createIconSet(glyphMap, 'awesome', require('./fonts/FontAwesome.ttf'));

Foundation.js

@@ -1,9 +0,4 @@
-import glyphMap
-  from './vendor/react-native-vector-icons/glyphmaps/Foundation.json';
+import glyphMap from './vendor/react-native-vector-icons/glyphmaps/Foundation.json';
 import createIconSet from './createIconSet';
 
-export default createIconSet(
-  glyphMap,
-  'foundation',
-  require('./fonts/Foundation.ttf')
-);
+export default createIconSet(glyphMap, 'foundation', require('./fonts/Foundation.ttf'));

Ionicons.js

@@ -1,9 +0,4 @@
-import glyphMap
-  from './vendor/react-native-vector-icons/glyphmaps/Ionicons.json';
+import glyphMap from './vendor/react-native-vector-icons/glyphmaps/Ionicons.json';
 import createIconSet from './createIconSet';
 
-export default createIconSet(
-  glyphMap,
-  'ionicons',
-  require('./fonts/Ionicons.ttf')
-);
+export default createIconSet(glyphMap, 'ionicons', require('./fonts/Ionicons.ttf'));

MaterialCommunityIcons.js

@@ -1,3 +0,2 @@
-import glyphMap
-  from './vendor/react-native-vector-icons/glyphmaps/MaterialCommunityIcons.json';
+import glyphMap from './vendor/react-native-vector-icons/glyphmaps/MaterialCommunityIcons.json';
 import createIconSet from './createIconSet';
@@ -4,0 +3,0 @@

MaterialIcons.js

@@ -1,9 +0,4 @@
-import glyphMap
-  from './vendor/react-native-vector-icons/glyphmaps/MaterialIcons.json';
+import glyphMap from './vendor/react-native-vector-icons/glyphmaps/MaterialIcons.json';
 import createIconSet from './createIconSet';
 
-export default createIconSet(
-  glyphMap,
-  'material',
-  require('./fonts/MaterialIcons.ttf')
-);
+export default createIconSet(glyphMap, 'material', require('./fonts/MaterialIcons.ttf'));

Octicons.js

@@ -1,9 +0,4 @@
-import glyphMap
-  from './vendor/react-native-vector-icons/glyphmaps/Octicons.json';
+import glyphMap from './vendor/react-native-vector-icons/glyphmaps/Octicons.json';
 import createIconSet from './createIconSet';
 
-export default createIconSet(
-  glyphMap,
-  'octicons',
-  require('./fonts/Octicons.ttf')
-);
+export default createIconSet(glyphMap, 'octicons', require('./fonts/Octicons.ttf'));

package.json

 {
   "name": "@expo/vector-icons",
-  "version": "6.1.0",
+  "version": "6.2.0",
   "description": "Built-in support for 10 popular icon fonts and the tooling to create your own Icon components from your font and glyph map. This is a wrapper around react-native-vector-icons to make it compatible with Expo.",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -7,3 +7,3 @@ # @expo/vector-icons
 without Expo, you have no need for this library -- carry on! (or
-maybe [check out Expo](https://expo.io/).
+maybe [check out Expo](https://expo.io/)).
 
@@ -10,0 +10,0 @@ ## Resources

SimpleLineIcons.js

@@ -1,9 +0,4 @@
-import glyphMap
-  from './vendor/react-native-vector-icons/glyphmaps/SimpleLineIcons.json';
+import glyphMap from './vendor/react-native-vector-icons/glyphmaps/SimpleLineIcons.json';
 import createIconSet from './createIconSet';
 
-export default createIconSet(
-  glyphMap,
-  'simple-line-icons',
-  require('./fonts/SimpleLineIcons.ttf')
-);
+export default createIconSet(glyphMap, 'simple-line-icons', require('./fonts/SimpleLineIcons.ttf'));

website/package.json

@@ -14,3 +14,4 @@ {
     "react-dom": "^15.3.2",
-    "react-native-vector-icons": "^4.0.0"
+    "react-native-vector-icons": "^4.0.0",
+    "react-virtualized": "^9.12.0"
   },
@@ -17,0 +18,0 @@ "scripts": {

website/src/App.js

@@ -5,26 +5,6 @@ import React, { Component } from 'react';
 
-const IconFamilies = {
-  Entypo: require('react-native-vector-icons/glyphmaps/Entypo.json'),
-  EvilIcons: require('react-native-vector-icons/glyphmaps/EvilIcons.json'),
-  Feather: require('react-native-vector-icons/glyphmaps/Feather.json'),
-  FontAwesome: require('react-native-vector-icons/glyphmaps/FontAwesome.json'),
-  Foundation: require('react-native-vector-icons/glyphmaps/Foundation.json'),
-  Ionicons: require('react-native-vector-icons/glyphmaps/Ionicons.json'),
-  MaterialIcons: require('react-native-vector-icons/glyphmaps/MaterialIcons.json'),
-  MaterialCommunityIcons: require('react-native-vector-icons/glyphmaps/MaterialCommunityIcons.json'),
-  SimpleLineIcons: require('react-native-vector-icons/glyphmaps/SimpleLineIcons.json'),
-  Octicons: require('react-native-vector-icons/glyphmaps/Octicons.json'),
-  Zocial: require('react-native-vector-icons/glyphmaps/Zocial.json'),
-};
+import { IconsArray } from './IconConstants';
+import Icon from './Icon';
+import IconList from './IconList';
 
-class Icon extends Component {
-  render() {
-    return (
-      <span style={{ fontFamily: this.props.family }} {...this.props}>
-        {String.fromCharCode(IconFamilies[this.props.family][this.props.name])}
-      </span>
-    );
-  }
-}
-
 const HeaderBar = props => {
@@ -49,2 +29,4 @@ return (
               ref={input => (this._input = input)}
+              autoFocus
+              onChange={this._onChange}
               placeholder="Search for an icon"
@@ -60,6 +42,10 @@ type="text"
 
-  _onSubmit(e) {
+  _onChange = e => {
+    this.props.onSubmit(e.target.value);
+  };
+
+  _onSubmit = e => {
     e.preventDefault();
     this.props.onSubmit(this._input.value);
-  }
+  };
 }
@@ -72,11 +58,12 @@
     this.state = {
-      matches: [],
+      searchText: '',
     };
   }
 
-  componentDidMount() {
-    this._onSubmit('');
-  }
+  render() {
+    const { searchText } = this.state;
+    const data = IconsArray.filter(icon => {
+      return icon.name.includes(searchText) || icon.family.toLowerCase().includes(searchText);
+    });
 
-  render() {
     return (
@@ -87,3 +74,3 @@ <div className="App">
         <div className="Container">
-          {this.state.matches.map(this._renderMatch.bind(this))}
+          <IconList data={data} />
         </div>
@@ -93,61 +80,8 @@ </div>
   }
-  // {Object.keys(IconFamilies).map(familyName => this._renderFamily(familyName))}
 
-  _renderFamily(familyName) {
-    return (
-      <div>
-        {Object.keys(IconFamilies[familyName]).map(iconName =>
-          <Icon
-            key={iconName + familyName}
-            family={familyName}
-            name={iconName}
-          />
-        )}
-      </div>
-    );
-  }
-
   _onSubmit(text) {
-    const lcText = text.toLowerCase();
-    let matches = [];
-    _.forEach(IconFamilies, (icons, family) => {
-      let names = Object.keys(icons);
-      let results = names.filter(
-        name => name.toLowerCase().indexOf(lcText) >= 0
-      );
-      if (results.length) {
-        matches = [...matches, { family, names: results }];
-      }
-    });
-
-    this.setState({ matches });
+    this.setState({ searchText: text.toLowerCase() });
   }
-
-  _renderMatch(match) {
-    let { family, names } = match;
-    return (
-      <div className="Result-Row" key={family}>
-        <h2 className="Result-Title">
-          {family}
-        </h2>
-
-        <div className="Result-List">
-          {names.map(name => this._renderIcon(family, name))}
-        </div>
-      </div>
-    );
-  }
-
-  _renderIcon(family, name) {
-    return (
-      <div className="Result-Icon-Container" key={name}>
-        <Icon family={family} name={name} className="Result-Icon" />
-        <h4 className="Result-Icon-Name">
-          {name}
-        </h4>
-      </div>
-    );
-  }
 }
 
 export default App;

No alert changes

Improved metrics

Number of package files

124

increased by1.64%

Worsened metrics

Total package byte prevSize

4057637

decreased by-0.02%

Lines of code

7426

decreased by-0.05%

No dependency changes