From 956232a15fdeed2b68c3257f66e632a9751723f5 Mon Sep 17 00:00:00 2001 From: Joel Arvidsson Date: Mon, 27 Jul 2015 12:13:22 +0200 Subject: [PATCH] Updated README and added Octicons to IconExplorer. --- .../IconExplorer.xcodeproj/project.pbxproj | 4 ++++ Examples/IconExplorer/IconSetList.js | 2 ++ Examples/IconExplorer/iOS/Info.plist | 1 + README.md | 18 ++++++++++++------ 4 files changed, 19 insertions(+), 6 deletions(-) diff --git a/Examples/IconExplorer/IconExplorer.xcodeproj/project.pbxproj b/Examples/IconExplorer/IconExplorer.xcodeproj/project.pbxproj index c97859f30..c957e8661 100644 --- a/Examples/IconExplorer/IconExplorer.xcodeproj/project.pbxproj +++ b/Examples/IconExplorer/IconExplorer.xcodeproj/project.pbxproj @@ -23,6 +23,7 @@ 13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; }; 13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; }; 146834051AC3E58100842450 /* libReact.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 146834041AC3E56700842450 /* libReact.a */; }; + 5D629AF21B65AE2000E6A8C2 /* Octicons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 5D629AE61B65AE1200E6A8C2 /* Octicons.ttf */; }; 5D8123AC1B1C609700DF5088 /* MaterialIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 5DBEB1BF1B19B9B100B34395 /* MaterialIcons.ttf */; }; 5DAFCED51B0815FB00012939 /* Entypo.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 5DAFCECE1B0815FB00012939 /* Entypo.ttf */; }; 5DAFCED61B0815FB00012939 /* EvilIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 5DAFCECF1B0815FB00012939 /* EvilIcons.ttf */; }; @@ -141,6 +142,7 @@ 13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = iOS/Info.plist; sourceTree = ""; }; 13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = iOS/main.m; sourceTree = ""; }; 146833FF1AC3E56700842450 /* React.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = React.xcodeproj; path = "node_modules/react-native/React/React.xcodeproj"; sourceTree = ""; }; + 5D629AE61B65AE1200E6A8C2 /* Octicons.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; path = Octicons.ttf; sourceTree = ""; }; 5DAFCECE1B0815FB00012939 /* Entypo.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; path = Entypo.ttf; sourceTree = ""; }; 5DAFCECF1B0815FB00012939 /* EvilIcons.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; path = EvilIcons.ttf; sourceTree = ""; }; 5DAFCED01B0815FB00012939 /* FontAwesome.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; path = FontAwesome.ttf; sourceTree = ""; }; @@ -293,6 +295,7 @@ 5DAFCED11B0815FB00012939 /* Foundation.ttf */, 5DAFCED21B0815FB00012939 /* Ionicons.ttf */, 5DBEB1BF1B19B9B100B34395 /* MaterialIcons.ttf */, + 5D629AE61B65AE1200E6A8C2 /* Octicons.ttf */, 5DAFCED41B0815FB00012939 /* Zocial.ttf */, ); name = Fonts; @@ -565,6 +568,7 @@ isa = PBXResourcesBuildPhase; buildActionMask = 2147483647; files = ( + 5D629AF21B65AE2000E6A8C2 /* Octicons.ttf in Resources */, 5D8123AC1B1C609700DF5088 /* MaterialIcons.ttf in Resources */, 008F07F31AC5B25A0029DE68 /* main.jsbundle in Resources */, 5DAFCED81B0815FB00012939 /* Foundation.ttf in Resources */, diff --git a/Examples/IconExplorer/IconSetList.js b/Examples/IconExplorer/IconSetList.js index dca0a36d4..880116e06 100755 --- a/Examples/IconExplorer/IconSetList.js +++ b/Examples/IconExplorer/IconSetList.js @@ -19,6 +19,7 @@ var FontAwesome = require('react-native-vector-icons/FontAwesome'); var Foundation = require('react-native-vector-icons/Foundation'); var Ionicons = require('react-native-vector-icons/Ionicons'); var MaterialIcons = require('react-native-vector-icons/MaterialIcons'); +var Octicons = require('react-native-vector-icons/Octicons'); var Zocial = require('react-native-vector-icons/Zocial'); var ICON_SETS = _.map({ @@ -28,6 +29,7 @@ var ICON_SETS = _.map({ Foundation, Ionicons, MaterialIcons, + Octicons, Zocial, }, function(component, name) { return { diff --git a/Examples/IconExplorer/iOS/Info.plist b/Examples/IconExplorer/iOS/Info.plist index 23d994360..837107b9b 100644 --- a/Examples/IconExplorer/iOS/Info.plist +++ b/Examples/IconExplorer/iOS/Info.plist @@ -10,6 +10,7 @@ Foundation.ttf Ionicons.ttf MaterialIcons.ttf + Octicons.ttf Zocial.ttf CFBundleDevelopmentRegion diff --git a/README.md b/README.md index 29ff7fd72..44da38d40 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Vector Icons for React Native -**Choose from 2800 icons or use your own.** +**Choose from 3000+ icons or use your own.** Perfect for buttons, logos and nav/tab bars. Easy to extend, style and integrate into your project. @@ -10,8 +10,8 @@ Perfect for buttons, logos and nav/tab bars. Easy to extend, style and integrate If you want to use any of the bundled icons, you need to add the icon fonts to your XCode project. Just follow these steps: -* Right click on you project in XCode and select **Add files to xxx**. -* Browse to `node_modules/react-native-vector-icons` and select the folder `Fonts` (or just the ones you want). +* Right click on you project in XCode and select **Add files to "_NameOfYourProject_"**. +* Browse to `node_modules/react-native-vector-icons` and select the folder `Fonts` (or just the ones you want). **Make sure your app is checked under "Add to targets"**. * Edit `Info.plist` and add a property called **Fonts provided by application** (if you haven't added one already) and type in the files you just added. It will look something like this: ![XCode screenshot](https://cloud.githubusercontent.com/assets/378279/7667535/0e1fd13a-fc0c-11e4-9220-18d5c095a7be.png) @@ -29,6 +29,7 @@ You can either use one of the bundled icons or roll your own custom font. Curren * [`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) ```js @@ -86,11 +87,16 @@ Simply use `Icon.TabBarItem` instead of `TabBarIOS.Item`. This is an extended co 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 [NavBarIOS](http://facebook.github.io/react-native/docs/navigatorios.html) +### Usage with [NavigatorIOS](http://facebook.github.io/react-native/docs/navigatorios.html) Use `Icon.getImageSource` to get an image source object and pass it as you would with `backButtonIcon`, `leftButtonIcon` or `rightButtonIcon`. -Note: Since [`NavBarIOS` doesn't rerender with new state](https://github.com/facebook/react-native/issues/1403) and the async nature of `getImageSource` it's not possible to use it in `initialRoute`, but any view added by `push` should be fine. +Note: Since [`NavigatorIOS` doesn't rerender with new state](https://github.com/facebook/react-native/issues/1403) and the async nature of `getImageSource` it's not possible to use it in `initialRoute`, but any view added by `push` should be fine. + +[Facebook writes](http://facebook.github.io/react-native/docs/navigator-comparison.html#navigatorios): +> Development belongs to open-source community - not used by the React Native team on their apps. A result of this is that there is currently a backlog of unresolved bugs, nobody who uses this has stepped up to take ownership for it yet. + +You are probably better off with [`Navigator.NavigationBar`](http://facebook.github.io/react-native/docs/navigator.html) or [`react-native-navbar`](https://github.com/Kureev/react-native-navbar). ### Custom Fonts @@ -117,7 +123,7 @@ var Icon = createIconSetFromFontello(fontelloConfig); ### IconExplorer Try the `IconExplorer` project in `Examples/IconExplorer` folder, there you can also search for any icon. -![Screenshot of IconExplorer](https://cloud.githubusercontent.com/assets/378279/8094980/d4b969ce-0fca-11e5-9b0b-520e7ed1740b.png) +![Screenshot of IconExplorer](https://cloud.githubusercontent.com/assets/378279/8903470/a9fe6b46-3458-11e5-901f-98b7b676d0d3.png) ### Basic Example