zoriya/expo-vector-icons
1
0
Fork 0
mirror of https://github.com/zoriya/expo-vector-icons.git synced 2025-12-06 06:36:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update vendored files

Browse Source
This commit is contained in:
Brent Vatne
2020-05-06 14:03:57 -07:00
parent 1d77f2b586
commit a10d5ad4c7
130 changed files with 2897 additions and 2123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
build/vendor/.DS_Store vendored
View File

Binary file not shown.

BIN
build/vendor/react-native-vector-icons/.DS_Store vendored
View File

Binary file not shown.

15
build/vendor/react-native-vector-icons/AntDesign.js vendored
View File

@@ -9,10 +9,11 @@ import glyphMap from './glyphmaps/AntDesign.json';
const iconSet = createIconSet(glyphMap, 'anticon', 'AntDesign.ttf');
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;
export const {
Button,
TabBarItem,
TabBarItemIOS,
ToolbarAndroid,
getImageSource,
getImageSourceSync,
} = iconSet;

21
build/vendor/react-native-vector-icons/BUILDING_FEATHER.md vendored
View File

@@ -1,9 +1,16 @@
# Generating Feather icon set
1. Go to [Icomoon Library](https://icomoon.io/app/#/select/library) and press _+ Add_ on the Feather icon set
2. Press _Select all_ in the hamburger menu next to the icon set
3. Press _Generate Font_ in the bottom menu
4. Press _Preferences_ and enter `Feather` as _Font Name_ in the dialog
5. Press _Download_
6. Unzip the file and move the folder to the `react-native-vector-icons` folder
7. Generate the icon set with `yarn build-feather`
### To build the Feather icon Set you will need:
- [Inkscape](https://inkscape.org/)
- [GNU Parallel](https://www.gnu.org/software/parallel/)
- [Font Custom](https://github.com/FontCustom/fontcustom)
- [Xvfb](https://www.x.org/releases/X11R7.6/doc/man/man1/Xvfb.1.xhtml) - Optional, but highly recommended
1. Go to [Font Custom](https://github.com/FontCustom/fontcustom) and follow the installation instructions
2. Generate the icon set with `yarn build-feather`
Before we can build the icon set, you'll need to pre-process the icons. You can do this using Inkscape with help of Parallel.
If you have Xvfb installed, you will see a progress bar in the console; if not, each icon will launch one Inkscape window to adjust the SVG.
The building stage will create a folder called `Feather`. This will be removed at the end of the build.

14
build/vendor/react-native-vector-icons/CONTRIBUTING.md vendored
View File

@@ -8,7 +8,7 @@ If this is your first open source contribution, please take a look at [this](htt
## Reporting Bugs & Feature Requests
If you would like to submit a feature request or report a bug, we encourage you to first look through the [issues](https://github.com/react-native-vector-icons/loki/issues) and [pull requests](https://github.com/oblador/react-native-vector-icons/pulls) before filing a new issue.
If you would like to submit a feature request or report a bug, we encourage you to first look through the [issues](https://github.com/oblador/react-native-vector-icons/issues) and [pull requests](https://github.com/oblador/react-native-vector-icons/pulls) before filing a new issue.
## Submitting a Pull Request
@@ -16,11 +16,11 @@ If you wish to submit a pull request for a new feature or issue, you should star
### Setup
* Install [Node.js](https://nodejs.org/) if you have not already. (*We suggest you to use node v6.x.x*)
* Fork the repo
* ```git clone https://github.com/*yourusername*/react-native-vector-icons.git && cd react-native-vector-icons```
* ```yarn install``` OR ```npm install```
* ```npm test```
* Optionally ```brew install fontcustom && npm run build``` if you've updated any icon sets.
- Install [Node.js](https://nodejs.org/) if you have not already. (_We suggest you to use node v6.x.x_)
- Fork the repo
- `git clone https://github.com/*yourusername*/react-native-vector-icons.git && cd react-native-vector-icons`
- `yarn install` OR `npm install`
- `npm test`
- Optionally `brew install fontcustom && npm run build` if you've updated any icon sets.
One you have done this, create a new branch with a name that loosely describes the issue on which you will be working. Once you think you have the addressed the issue in question, submit a pull request to the `master` branch.

15
build/vendor/react-native-vector-icons/Entypo.js vendored
View File

@@ -9,10 +9,11 @@ import glyphMap from './glyphmaps/Entypo.json';
const iconSet = createIconSet(glyphMap, 'Entypo', 'Entypo.ttf');
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;
export const {
Button,
TabBarItem,
TabBarItemIOS,
ToolbarAndroid,
getImageSource,
getImageSourceSync,
} = iconSet;

15
build/vendor/react-native-vector-icons/EvilIcons.js vendored
View File

@@ -9,10 +9,11 @@ import glyphMap from './glyphmaps/EvilIcons.json';
const iconSet = createIconSet(glyphMap, 'EvilIcons', 'EvilIcons.ttf');
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;
export const {
Button,
TabBarItem,
TabBarItemIOS,
ToolbarAndroid,
getImageSource,
getImageSourceSync,
} = iconSet;

44
build/vendor/react-native-vector-icons/FONTAWESOME5.md vendored
View File

@@ -2,14 +2,14 @@
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.
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`](#usage)
- [`Upgrading to Pro`](#upgrading-to-pro)
# Usage
@@ -18,7 +18,7 @@ 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'} />);
const icon = <FontAwesome5 name={'comments'} />;
```
Something special about the FontAwesome5 class is that you can also pass props
@@ -27,17 +27,17 @@ 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 />);
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 |
| 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.
@@ -46,13 +46,13 @@ 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 />);
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
`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:
@@ -70,7 +70,12 @@ 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 }));
FontAwesome5.getImageSource(
'comments',
30,
'#000',
FA5Style.solid
).then(source => this.setState({ image: source }));
```
Not passing a style will result in Regular style.
@@ -78,22 +83,23 @@ 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.
account and then access the `Services` tab.
Run ```./node_modules/.bin/fa5-upgrade``` and enter the token when asked to in order to
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.
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/>);
const icon = <FontAwesome5Pro name={'comments'} light />;
```

15
build/vendor/react-native-vector-icons/Feather.js vendored
View File

@@ -9,10 +9,11 @@ import glyphMap from './glyphmaps/Feather.json';
const iconSet = createIconSet(glyphMap, 'Feather', 'Feather.ttf');
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;
export const {
Button,
TabBarItem,
TabBarItemIOS,
ToolbarAndroid,
getImageSource,
getImageSourceSync,
} = iconSet;

15
build/vendor/react-native-vector-icons/FontAwesome.js vendored
View File

@@ -9,10 +9,11 @@ import glyphMap from './glyphmaps/FontAwesome.json';
const iconSet = createIconSet(glyphMap, 'FontAwesome', 'FontAwesome.ttf');
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;
export const {
Button,
TabBarItem,
TabBarItemIOS,
ToolbarAndroid,
getImageSource,
getImageSourceSync,
} = iconSet;

14
build/vendor/react-native-vector-icons/FontAwesome5.js vendored
View File

@@ -13,9 +13,11 @@ export { FA5Style } from './lib/create-icon-set-from-fontawesome5';
const iconSet = createFA5iconSet(glyphMap, metadata, 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;
export const {
Button,
TabBarItem,
TabBarItemIOS,
ToolbarAndroid,
getImageSource,
getImageSourceSync,
} = iconSet;

14
build/vendor/react-native-vector-icons/FontAwesome5Pro.js vendored
View File

@@ -13,9 +13,11 @@ export { FA5Style } from './lib/create-icon-set-from-fontawesome5';
const iconSet = createFA5iconSet(glyphMap, metadata, 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;
export const {
Button,
TabBarItem,
TabBarItemIOS,
ToolbarAndroid,
getImageSource,
getImageSourceSync,
} = iconSet;

17
build/vendor/react-native-vector-icons/Fontisto.js vendored
View File

@@ -1,11 +1,13 @@
/**
* Feather icon set component.
* Usage: <Feather name="icon-name" size={20} color="#4F8EF7" />
* Fontisto icon set component.
* Usage: <Fontisto name="icon-name" size={20} color="#4F8EF7" />
*/
import createIconSet from "./createIconSet";
import font from "./vendor/react-native-vector-icons/Fonts/Fontisto.ttf";
import glyphMap from "./vendor/react-native-vector-icons/glyphmaps/Fontisto.json";
const iconSet = createIconSet(glyphMap, "Fontisto", font);
import createIconSet from './lib/create-icon-set';
import glyphMap from './glyphmaps/Fontisto.json';
const iconSet = createIconSet(glyphMap, 'Fontisto', 'Fontisto.ttf');
export default iconSet;
export const {
Button,
@@ -13,6 +15,5 @@ export const {
TabBarItemIOS,
ToolbarAndroid,
getImageSource,
getImageSourceSync
getImageSourceSync,
} = iconSet;
//# sourceMappingURL=Fontisto.js.map

0
build/vendor/react-native-vector-icons/Fonts/AntDesign.ttf vendored Executable file → Normal file
View File

0
build/vendor/react-native-vector-icons/Fonts/Entypo.ttf vendored Executable file → Normal file
View File

0
build/vendor/react-native-vector-icons/Fonts/EvilIcons.ttf vendored Executable file → Normal file
View File

BIN
build/vendor/react-native-vector-icons/Fonts/Feather.ttf vendored Executable file → Normal file
View File

Binary file not shown.

0
build/vendor/react-native-vector-icons/Fonts/FontAwesome.ttf vendored Executable file → Normal file
View File

BIN
build/vendor/react-native-vector-icons/Fonts/FontAwesome5_Brands.ttf vendored Executable file → Normal file
View File

Binary file not shown.

BIN
build/vendor/react-native-vector-icons/Fonts/FontAwesome5_Regular.ttf vendored Executable file → Normal file
View File

Binary file not shown.

BIN
build/vendor/react-native-vector-icons/Fonts/FontAwesome5_Solid.ttf vendored Executable file → Normal file
View File

Binary file not shown.

0
build/vendor/react-native-vector-icons/Fonts/Fontisto.ttf vendored Normal file → Executable file
View File

0
build/vendor/react-native-vector-icons/Fonts/Foundation.ttf vendored Executable file → Normal file
View File

0
build/vendor/react-native-vector-icons/Fonts/Ionicons.ttf vendored Executable file → Normal file
View File

BIN
build/vendor/react-native-vector-icons/Fonts/MaterialCommunityIcons.ttf vendored Executable file → Normal file
View File

Binary file not shown.

0
build/vendor/react-native-vector-icons/Fonts/MaterialIcons.ttf vendored Executable file → Normal file
View File

0
build/vendor/react-native-vector-icons/Fonts/Octicons.ttf vendored Executable file → Normal file
View File

0
build/vendor/react-native-vector-icons/Fonts/SimpleLineIcons.ttf vendored Executable file → Normal file
View File

0
build/vendor/react-native-vector-icons/Fonts/Zocial.ttf vendored Executable file → Normal file
View File

15
build/vendor/react-native-vector-icons/Foundation.js vendored
View File

@@ -9,10 +9,11 @@ import glyphMap from './glyphmaps/Foundation.json';
const iconSet = createIconSet(glyphMap, 'fontcustom', 'Foundation.ttf');
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;
export const {
Button,
TabBarItem,
TabBarItemIOS,
ToolbarAndroid,
getImageSource,
getImageSourceSync,
} = iconSet;

15
build/vendor/react-native-vector-icons/Ionicons.js vendored
View File

@@ -9,10 +9,11 @@ import glyphMap from './glyphmaps/Ionicons.json';
const iconSet = createIconSet(glyphMap, 'Ionicons', 'Ionicons.ttf');
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;
export const {
Button,
TabBarItem,
TabBarItemIOS,
ToolbarAndroid,
getImageSource,
getImageSourceSync,
} = iconSet;

15
build/vendor/react-native-vector-icons/MaterialCommunityIcons.js vendored
View File

@@ -9,10 +9,11 @@ import glyphMap from './glyphmaps/MaterialCommunityIcons.json';
const iconSet = createIconSet(glyphMap, 'Material Design Icons', 'MaterialCommunityIcons.ttf');
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;
export const {
Button,
TabBarItem,
TabBarItemIOS,
ToolbarAndroid,
getImageSource,
getImageSourceSync,
} = iconSet;

15
build/vendor/react-native-vector-icons/MaterialIcons.js vendored
View File

@@ -9,10 +9,11 @@ import glyphMap from './glyphmaps/MaterialIcons.json';
const iconSet = createIconSet(glyphMap, 'Material Icons', 'MaterialIcons.ttf');
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;
export const {
Button,
TabBarItem,
TabBarItemIOS,
ToolbarAndroid,
getImageSource,
getImageSourceSync,
} = iconSet;

15
build/vendor/react-native-vector-icons/Octicons.js vendored
View File

@@ -9,10 +9,11 @@ import glyphMap from './glyphmaps/Octicons.json';
const iconSet = createIconSet(glyphMap, 'Octicons', 'Octicons.ttf');
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;
export const {
Button,
TabBarItem,
TabBarItemIOS,
ToolbarAndroid,
getImageSource,
getImageSourceSync,
} = iconSet;

539
build/vendor/react-native-vector-icons/README.md vendored
View File

@@ -1,539 +0,0 @@
![Vector Icons for React Native](https://cloud.githubusercontent.com/assets/378279/12009887/33f4ae1c-ac8d-11e5-8666-7a87458753ee.png)
[![Travis](https://img.shields.io/travis/oblador/react-native-vector-icons.svg)](https://travis-ci.org/oblador/react-native-vector-icons) [![npm](https://img.shields.io/npm/v/react-native-vector-icons.svg)](https://npmjs.com/package/react-native-vector-icons) [![npm](https://img.shields.io/npm/dm/react-native-vector-icons.svg)](https://npmjs.com/package/react-native-vector-icons) [![Issue Stats](https://img.shields.io/issuestats/i/github/oblador/react-native-vector-icons.svg)](http://github.com/oblador/react-native-vector-icons/issues)
Perfect for buttons, logos and nav/tab bars. Easy to extend, style and integrate into your project.
## Table of Contents
- [Bundeled Icon Sets](#bundled-icon-sets)
- [Installation](#installation)
- [iOS](#ios)
- [Android](#android)
- [OSX](#osx-via-react-native-desktop)
- [Windows](#windows-via-react-native-windows)
- [Web](#web-with-webpack)
- [Upgrading](#upgrading)
- [Icon Component](#icon-component)
- [Icon.Button Component](#iconbutton-component)
- [Usage as PNG image/source object](#usage-as-png-imagesource-object)
- [Usage with TabBarIOS](#usage-with-tabbarios)
- [Usage with NavigatorIOS](#usage-with-navigatorios)
- [Usage with ToolbarAndroid](#usage-with-toolbarandroid)
- [Custom Fonts](#custom-fonts)
- [Animation](#animation)
- [Examples](#examples)
- [Generating your own icon set from a CSS file](#generating-your-own-icon-set-from-a-css-file)
- [Changelog](#changelog)
- [Troubleshooting](#troubleshooting)
- [License](#license)
## Bundled Icon Sets
[Browse all](https://oblador.github.io/react-native-vector-icons/).
* [`AntDesign`](https://ant.design/) by AntFinance (**297** icons)
* [`Entypo`](http://entypo.com) by Daniel Bruce (**411** icons)
* [`EvilIcons`](http://evil-icons.io) by Alexander Madyankin & Roman Shamin (v1.10.1, **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 5`](https://fontawesome.com) by Fonticons, Inc. (v5.3.1, 1341 (free) **3978** (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)
* [`MaterialCommunityIcons`](https://materialdesignicons.com/) by MaterialDesignIcons.com (v2.8.94, **2894** icons)
* [`Octicons`](http://octicons.github.com) by Github, Inc. (v8.0.0, **177** icons)
* [`Zocial`](http://zocial.smcllns.com/) by Sam Collins (v1.0, **100** icons)
* [`SimpleLineIcons`](http://simplelineicons.com/) by Sabbir & Contributors (v2.4.1, **189** icons)
## Installation
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
#### Option: Manually
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:
* Browse to `node_modules/react-native-vector-icons` and drag the folder `Fonts` (or just the ones you want) to your project in Xcode. **Make sure your app is checked under "Add to targets" and that "Create groups" is checked if you add the whole folder**.
* Edit `Info.plist` and add a property called **Fonts provided by application** (or `UIAppFonts` if Xcode won't autocomplete/not using Xcode) and type in the files you just added. It will look something like this:
![XCode screenshot](https://cloud.githubusercontent.com/assets/378279/12421498/2db1f93a-be88-11e5-89c8-2e563ba6251a.png)
*Note: you need to recompile your project after adding new fonts, also ensure that they also appear under __Copy Bundle Resources__ in __Build Phases__.*
If you want to use the TabBar/NavigatorIOS integration or use `getImageSource`, then you need to add `RNVectorIcons.xcodeproj` to **Libraries** and add `libRNVectorIcons.a` to **Link Binary With Libraries** under **Build Phases**. [More info and screenshots about how to do this is available in the React Native documentation](http://facebook.github.io/react-native/docs/linking-libraries-ios.html#content).
#### Option: With `react-native link`
`$ react-native link react-native-vector-icons`
*Note: Some users are having trouble using this method, try one of the others if you are too.*
#### Option: With [CocoaPods](https://cocoapods.org/)
Add the following to your `Podfile` and run `pod update`:
```
pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'
```
Edit `Info.plist` as described above.
If you are using `use_frameworks!` in your `Podfile` you instead need to dynamically load the icon font by doing `Icon.loadFont()` when boostrapping your application.
*Note: You must be consuming React itself via CocoaPods for this to work, see [React Native documentation](https://facebook.github.io/react-native/docs/integration-with-existing-apps) on how to set that up.*
### Android
#### Option: With Gradle (recommended)
This method has the advantage of fonts being copied from this module at build time so that the fonts and JS are always in sync, making upgrades painless.
Edit `android/app/build.gradle` ( NOT `android/build.gradle` ) and add the following:
```gradle
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
```
To customize the files being copied, add the following instead:
```gradle
project.ext.vectoricons = [
iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf' ] // Name of the font files you want to copy
]
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
```
#### Option: Manually
* Copy the contents in the `Fonts` folder to `android/app/src/main/assets/fonts` (*note lowercase font folder*).
##### Integrating library for `getImageSource` and `ToolbarAndroid` support
These steps are optional and only needed if you want to use the `Icon.getImageSource` function or using custom icons in the `Icon.ToolbarAndroid` component.
* Edit `android/settings.gradle` to look like this (without the +):
```diff
rootProject.name = 'MyApp'
include ':app'
+ include ':react-native-vector-icons'
+ project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
```
* Edit `android/app/build.gradle` (note: **app** folder) to look like this:
```diff
apply plugin: 'com.android.application'
android {
...
}
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
compile "com.android.support:appcompat-v7:23.0.1"
compile "com.facebook.react:react-native:+" // From node_modules
+ compile project(':react-native-vector-icons')
}
```
* Edit your `MainApplication.java` (deep in `android/app/src/main/java/...`) to look like this (note **two** places to edit):
```diff
package com.myapp;
+ import com.oblador.vectoricons.VectorIconsPackage;
....
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage()
+ , new VectorIconsPackage()
);
}
}
```
*Note: If you're using React Native (Android) <= 0.17, [follow this instructions](https://github.com/oblador/react-native-vector-icons/blob/2fe5b97afa849652215e3258189e8ca3ea775c53/README.md#integrating-library-for-getimagesource-support)*
#### Option: With `rnpm`
`$ react-native link`
*Note: Some users are having trouble using this method, try one of the others if you are too.*
### OSX via [`react-native-desktop`](https://github.com/ptmt/react-native-desktop)
* Browse to `node_modules/react-native-vector-icons` and drag the folder `Fonts` to your project in Xcode. **Make sure your app is checked under "Add to targets" and that "Create folder references" is checked**.
* Edit `Info.plist` and add a property called **Application fonts resource path** (or `ATSApplicationFontsPath` if Xcode won't autocomplete/not using Xcode) and type `Fonts` as the value.
*Note: you need to recompile your project after adding new fonts, also ensure that the `Fonts` folder also appear under __Copy Bundle Resources__ in __Build Phases__.*
### Windows via [`react-native-windows`](https://github.com/ReactWindows/react-native-windows)
* Open your solution in Visual Studio, right click the Assets folder in your solution, click **Add Existing**.
* Browse to the `node_modules\react-native-vector-icons\Fonts` folder, select the required font files
* Click the **Add** drop-down and select **Add as Link**.
* Set **Copy To Output Directory** property of each font file to **Copy if newer**
*Note: you need to recompile your project after adding new fonts.*
### Web (with [webpack](https://webpack.js.org/))
In your webpack configuration file, add a section to handle ttf files using url-loader (or file-loader)
```js
{
test: /\.ttf$/,
loader: "url-loader", // or directly file-loader
include: path.resolve(__dirname, "node_modules/react-native-vector-icons"),
},
```
Then consume those files in your JavaScript entry point to get the bundled url and inject a style tag in your page:
```js
// Use prebuilt version of RNVI in dist folder
import Icon from 'react-native-vector-icons/dist/FontAwesome';
// Generate required css
import iconFont from 'react-native-vector-icons/Fonts/FontAwesome.ttf';
const iconFontStyles = `@font-face {
src: url(${iconFont});
font-family: FontAwesome;
}`;
// Create stylesheet
const style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet) {
style.styleSheet.cssText = iconFontStyles;
} else {
style.appendChild(document.createTextNode(iconFontStyles));
}
// Inject stylesheet
document.head.appendChild(style);
```
## Upgrading
Upgrading this package often requires the font files linked to your projects to be updated as well. If the automatic linking works for you, running this again should update the fonts. Otherwise you need to follow the steps outlined in the [installation](#installation) section.
## `Icon` Component
You can either use one of the bundled icons above or roll your own custom font.
```js
import Icon from 'react-native-vector-icons/FontAwesome';
const myIcon = (<Icon name="rocket" size={30} color="#900" />)
```
### Properties
Any [Text property](http://facebook.github.io/react-native/docs/text.html) and the following:
| 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. |*Inherited*|
### Static Methods
| Prop | Description |
|---|---|
|**`getFontFamily`**|Returns the font family that is currently used to retrieve icons as text. Usage: `const fontFamily = Icon.getFontFamily()`|
|**`getImageSource`**|Returns a promise that resolving to the source of a bitmap version of the icon for use with `Image` component et al. Usage: `const source = await Icon.getImageSource(name, size, color)`|
|**`getRawGlyphMap`**|Returns the raw glyph map of the icon set. Usage: `const glyphMap = Icon.getRawGlyphMap()` |
|**`hasIcon`**|Checks if the name is valid in current icon set. Usage: `const isNameValid = Icon.hasIcon(name)`|
### 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:
* `backgroundColor`
* `borderWidth`
* `borderColor`
* `borderRadius`
* `padding`
* `margin`
* `color`
* `fontSize`
NOTE: On android `Text` doesn't currently support `border*` styles, to circumvent this simply wrap your `Icon` with a `View`.
By combining some of these you can create for example :
![type](https://cloud.githubusercontent.com/assets/378279/7667570/33817554-fc0d-11e4-9ad7-4eb60139cfb7.png)
![star](https://cloud.githubusercontent.com/assets/378279/7667569/3010dd7e-fc0d-11e4-9696-cb721fe8e98d.png)
## `Icon.Button` Component
A convenience component for creating buttons with an icon on the left side.
```js
import Icon from 'react-native-vector-icons/FontAwesome';
const myButton = (
<Icon.Button name="facebook" backgroundColor="#3b5998" onPress={this.loginWithFacebook}>
Login with Facebook
</Icon.Button>
);
const 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. *Note: use `iconStyle` for margins or expect unstable behaviour.*|`{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.
```
Icon.getImageSource('user', 20, 'red').then((source) => this.setState({ userIcon: source }));
```
For a complete example check out the `TabBarExample` project.
## Usage with [TabBarIOS](http://facebook.github.io/react-native/docs/tabbarios.html)
Simply use `Icon.TabBarItemIOS` instead of `TabBarIOS.Item`. This is an extended component that works exactly the same but with three additional properties:
| 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`|
|**`iconColor`**|Color of the icon. |*None*|
|**`selectedIconColor`**|Color of the selected icon. |*`iconColor`*|
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.
**Note:** using `iconColor` and `selectedIconColor` requires the attribute [renderAsOriginal](https://facebook.github.io/react-native/docs/tabbarios-item.html#renderasoriginal) to be set to `true` on `Icon.TabBarItemIOS`.
## 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 [`NavigatorIOS` doesn't rerender with new state](https://github.com/facebook/react-native/issues/1403) and the async nature of `getImageSource` you must not use it with `initialRoute` until the icon is rendered, but any view added by `push` should be fine. Easiest way is to simple add an `if` statment at the beginning of you render method like this:
```
render() {
if (!this.state.myIcon) {
return false;
}
return (<NavigatorIOS ... />);
}
```
[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).
## Usage with [ToolbarAndroid](http://facebook.github.io/react-native/docs/toolbarandroid.html)
Simply use `Icon.ToolbarAndroid` instead of `React.ToolbarAndroid`, this is composition of the underlying `ToolbarAndroid` component that works the same but any `*icon` property also takes `*iconName`:
| Prop | Description | Default |
|---|---|---|
|**`logoName`**|Name of the navigation logo icon (similar to `ToolbarAndroid` `logo`)|*None*|
|**`navIconName`**|Name of the navigation icon (similar to `ToolbarAndroid` `navIcon`)|*None*|
|**`overflowIconName`**|Name of the overflow icon (similar to `ToolbarAndroid` `overflowIcon`). |*none*|
|**`actions`**|Possible actions on the toolbar as part of the action menu, takes the additional arguments `iconName`, `iconColor` and `iconSize`. |*none*|
|**`iconSize`**|Size of the icons. |`24`|
|**`iconColor`**|Color of the icons. |`black`|
For example usage see `Examples/IconExplorer/index.android.js`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 ToolbarAndroid integration.
## Custom Fonts
### `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 the custom font file name.
```js
import { createIconSet } from 'react-native-vector-icons';
const glyphMap = { 'icon-name': 1234, test: '∆' };
const Icon = createIconSet(glyphMap, 'FontName', 'font-name.ttf');
```
### `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.
```js
import { createIconSetFromFontello } from 'react-native-vector-icons';
import fontelloConfig from './config.json';
const Icon = createIconSetFromFontello(fontelloConfig);
```
### `createIconSetFromIcoMoon(config[, fontFamily[, fontFile]])`
```js
import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
import icoMoonConfig from './selection.json';
const Icon = createIconSetFromIcoMoon(icoMoonConfig, 'LineAwesome', 'line-awesome.ttf');
```
Make sure you're using the _Download_ option in [IcoMoon](https://icomoon.io/app), and use the `.json` file that's included in the `.zip` you've downloaded. You'll also need to import the `.ttf` font file into your project, following the instructions above.
#### iOS
You have to manually make a reference of your `.ttf` on your xcodeproj `Resources` folder.
## Animation
React Native comes with an amazing animation library called [`Animated`](http://facebook.github.io/react-native/docs/animated.html). To use it with an icon, simply create an animated component with this line: `const AnimatedIcon = Animated.createAnimatedComponent(Icon)`. You can also use the higher level animation library [react-native-animatable](https://github.com/oblador/react-native-animatable).
## Examples
### 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/8903470/a9fe6b46-3458-11e5-901f-98b7b676d0d3.png)
### Basic Example
```js
import Icon from 'react-native-vector-icons/Ionicons';
function ExampleView(props) {
return (<Icon name="ios-person" size={30} color="#4F8EF7" />);
}
```
### TabBarIOS
Full example in `TabBarExample` project in `Examples/TabBarExample` folder.
```js
import { View, Text, TabBarIOS } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
function TabBarView(props) {
return (
<TabBarIOS>
<Icon.TabBarItem
title="Home"
iconName="ios-home-outline"
selectedIconName="ios-home"
>
<View style={styles.tabContent}><Text>Home Tab</Text></View>
</Icon.TabBarItem>
</TabBarIOS>
);
}
```
### ToolbarAndroid
```js
import Icon from 'react-native-vector-icons/Ionicons';
function ToolbarView(props) {
return (
<Icon.ToolbarAndroid
title="Home"
titleColor="white"
navIconName="md-arrow-back"
onIconClicked={props.navigator.pop}
actions={[
{ title: 'Settings', iconName: 'md-settings', iconSize: 30, show: 'always' },
{ title: 'Follow me on Twitter', iconName: 'logo-twitter', iconColor: "#4099FF", show: 'ifRoom' },
]}
overflowIconName="md-more"
/>
);
}
```
### Inline Icons
```js
import { Text } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
function ExampleView(props) {
return (<Text>Lorem <Icon name="ios-book" color="#4F8EF7" /> Ipsum</Text>);
}
```
### Community examples
* [react-native-dribbble-app](https://github.com/catalinmiron/react-native-dribbble-app)
* [product-kitty](https://github.com/rkho/product-kitty) ([blog post](http://richardkho.com/persisting-tabbars-in-react-native/))
* [react-native-netflix](https://github.com/mariodev12/react-native-netflix)
## Generating your own icon set from a CSS file
If you already have a icon font with associated CSS file then you can easily generate a icon set with the `generate-icon` script.
### Example usage:
```
./node_modules/.bin/generate-icon path/to/styles.css --componentName=MyIcon --fontFamily=myicon > Components/MyIcon.js
```
### Options
Any flags not listed below, like `--componentName` and `--fontFamily`, will be passed on to the template.
#### `-p`, `--prefix`
CSS selector prefix [default: ".icon-"]
#### `-t`, `--template`
Template in lodash format [default: "./template/iconSet.tpl"]
For default template please provide `--componentName` and `--fontFamily`.
#### `-o`, `--output`
Save output to file, defaults to STDOUT
## [Changelog](https://github.com/oblador/react-native-vector-icons/releases)
## Troubleshooting
#### The icons show up as a crossed out box on Android
* Make sure you've copied the font to `android/app/src/main/assets/fonts`.
* Delete the build folder with `rm -rf android/app/build`.
* Recompile the project.
#### Red screen with "Unrecognized font family" error on iOS
* Make sure you've added manually the reference of your `.ttf` on your xcodeproj `Resources` folder.
* Check that the font you are trying to use appears in `Info.plist`, if you've added the whole folder and it's blue in color, then you need to add it to the path.
* Check that the font is copied in the *Copy Bundle Resources* in *Build Phases*.
* Delete the build folder with `rm -rf ios/build`
* Recompile the project.
#### Android build fails on Windows for no good reason
Both npm and android file hierarchies tend to get very deep and even worse when you combine them. Since Windows file system has a max length, long file name addresses will result in numerous errors including `Execution failed for task ':react-native-vector-icons:processReleaseResources'`. So try to keep the path to your project folder as short as possible.
#### Wrong icons are shown after upgrading this package
You probably didn't update the font files linked to your native project after upgrading. However, this only applies to Android targets since iOS bundles the fonts when building the app (try to clean your build from Xcode if the problem exists). On android you can relink the project or you manually update the fonts. To have them automatically synced use the [gradle approach](https://github.com/oblador/react-native-vector-icons#option-with-gradle-recommended).
#### Some icons are missing after upgrading this package
Sometimes vendors decides to remove some icons from newer releases, this has nothing to do with this package. If you depend on an older version of a font you can add it as a [custom font](#custom-fonts).
## License
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).

15
build/vendor/react-native-vector-icons/SimpleLineIcons.js vendored
View File

@@ -9,10 +9,11 @@ import glyphMap from './glyphmaps/SimpleLineIcons.json';
const iconSet = createIconSet(glyphMap, 'simple-line-icons', 'SimpleLineIcons.ttf');
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;
export const {
Button,
TabBarItem,
TabBarItemIOS,
ToolbarAndroid,
getImageSource,
getImageSourceSync,
} = iconSet;

15
build/vendor/react-native-vector-icons/Zocial.js vendored
View File

@@ -9,10 +9,11 @@ import glyphMap from './glyphmaps/Zocial.json';
const iconSet = createIconSet(glyphMap, 'zocial', 'Zocial.ttf');
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;
export const {
Button,
TabBarItem,
TabBarItemIOS,
ToolbarAndroid,
getImageSource,
getImageSourceSync,
} = iconSet;

161
build/vendor/react-native-vector-icons/bin/fa5-upgrade.sh vendored
View File

@@ -1,45 +1,136 @@
#!/bin/sh
echo "Setting up npm config"
TEMP_DIR_PATH=""
FONTAWESOME_PRO_DIR_NAME=""
DEST_DIR_PATH="assets/fonts"
PROJECT_NAME="react-native-vector-icons"
FONT_NAME="Font Awesome Pro"
if [ $(npm config get @fortawesome:registry) = "undefined" ]
then
npm config set "@fortawesome:registry" https://npm.fontawesome.com/
setup_npm_config()
{
# always returns successfull zero code
if [ "$(npm config get @fortawesome:registry)" = "undefined" ]; then
npm config set "@fortawesome:registry" https://npm.fontawesome.com/
fi
local npm_token=""
echo "Please enter your $FONT_NAME npm token:";
read npm_token
npm config set "//npm.fontawesome.com/:_authToken" "${npm_token}"
}
create_tmp_directory()
{
local tmp_dir="$(mktemp -d -t 'rnvi.XXXXXX')"
retval=$?
if [ "$retval" != 0 ]; then
echo "[FAIL] Can't create temporary directory";
return 1;
fi
if [ -z "$tmp_dir" ]; then
echo "[FAIL] Generated temporary directory name is empty";
return 1;
fi
TEMP_DIR_PATH="$tmp_dir"
}
download_and_unpack_fontawesome_pro()
{
local archive_file_name="$(npm pack @fortawesome/fontawesome-pro --silent)"
retval=$?
if [ "$retval" != 0 ]; then
echo "[FAIL] Can't download [$archive_file_name] archive";
return 1;
fi
tar -xzf "$archive_file_name"
retval=$?
if [ "$retval" != 0 ]; then
echo "[FAIL] Can't unpack [$archive_file_name] archive";
return 1;
fi
local font_dir_name="package"
if [ ! -d "$font_dir_name" ]; then
echo "[FAIL] Archive doesn't contain [$font_dir_name] required directory";
return 1;
fi
FONTAWESOME_PRO_DIR_NAME="$font_dir_name"
}
copy_ttf_fonts_to_dest_dir()
{
mkdir -p "$DEST_DIR_PATH"
retval=$?
if [ "$retval" != 0 ]; then
echo "[FAIL] Can't create [$DEST_DIR_PATH] directory";
return 1;
fi
local font_dir_path="$TEMP_DIR_PATH/$FONTAWESOME_PRO_DIR_NAME/webfonts"
cp "$font_dir_path/fa-brands-400.ttf" "$DEST_DIR_PATH/FontAwesome5_Pro_Brands.ttf" &&
cp "$font_dir_path/fa-light-300.ttf" "$DEST_DIR_PATH/FontAwesome5_Pro_Light.ttf" &&
cp "$font_dir_path/fa-regular-400.ttf" "$DEST_DIR_PATH/FontAwesome5_Pro_Regular.ttf" &&
cp "$font_dir_path/fa-solid-900.ttf" "$DEST_DIR_PATH/FontAwesome5_Pro_Solid.ttf"
retval=$?
if [ "$retval" != 0 ]; then
echo "[FAIL] Can't copy ttf fonts to [$DEST_DIR_PATH] directory";
return 1;
fi
}
modify_package_json()
{
/usr/bin/env node "./node_modules/$PROJECT_NAME/bin/add-font-assets.js"
}
react_native_link_project()
{
react-native link "$PROJECT_NAME"
}
if setup_npm_config; then
echo "[SUCCESS] Set up npm config";
else
exit 1;
fi
echo "Please enter your FontAwesome5 npm token:"
read fa5_token
npm config set "//npm.fontawesome.com/:_authToken" ${fa5_token}
if create_tmp_directory; then
echo "[SUCCESS] Temporary directory [$TEMP_DIR_PATH] was created";
else
exit 1;
fi
echo "Creating temporary folder"
cd "$TEMP_DIR_PATH"
if download_and_unpack_fontawesome_pro; then
echo "[SUCCESS] $FONT_NAME was unpacked to [$TEMP_DIR_PATH/$FONTAWESOME_PRO_DIR_NAME] directory";
else
exit 1;
fi
cd - > /dev/null
TEMP_DIR=$(mktemp -d -t rnvi)
echo "Created folder $TEMP_DIR"
pushd ${TEMP_DIR}
if copy_ttf_fonts_to_dest_dir; then
echo "[SUCCESS] Copied $FONT_NAME to [$DEST_DIR_PATH] directory";
else
exit 1;
fi
echo "Downloading FontAwesome5 Pro"
if modify_package_json; then
echo "[SUCCESS] Modified package.json file";
else
exit 1;
fi
ARCHIVE=$(npm pack @fortawesome/fontawesome-pro --silent)
tar -xzf ${ARCHIVE}
mv package pro
if react_native_link_project; then
echo "[SUCCESS] Linked $PROJECT_NAME to React Native";
else
exit 1;
fi
popd
echo "Copying font files"
mkdir -p assets/fonts
cp ${TEMP_DIR}/pro/webfonts/fa-brands-400.ttf assets/fonts/FontAwesome5_Pro_Brands.ttf
cp ${TEMP_DIR}/pro/webfonts/fa-light-300.ttf assets/fonts/FontAwesome5_Pro_Light.ttf
cp ${TEMP_DIR}/pro/webfonts/fa-regular-400.ttf assets/fonts/FontAwesome5_Pro_Regular.ttf
cp ${TEMP_DIR}/pro/webfonts/fa-solid-900.ttf assets/fonts/FontAwesome5_Pro_Solid.ttf
echo "Modifying package.json"
/usr/bin/env node ./node_modules/react-native-vector-icons/bin/add-font-assets.js
echo "Linking project"
react-native link react-native-vector-icons
echo "Done"
echo "[SUCCESS] $FONT_NAME was successfully upgraded"
echo "Note: [$TEMP_DIR_PATH] was created. Delete it manually or it will be deleted automatically on next reboot"

33
build/vendor/react-native-vector-icons/bin/generate-flow.js vendored Executable file
View File

@@ -0,0 +1,33 @@
#!/usr/bin/env node
/* eslint-disable no-console */
const fs = require('fs');
const yargs = require('yargs');
const { argv } = yargs.usage('Usage: $0 [icons...]').help();
const icons = argv._;
for (let i = 0; i < icons.length; i += 1) {
const icon = icons[i];
let mapFile = icon;
if (mapFile === 'FontAwesome5') {
mapFile = 'FontAwesome5Free';
}
const glyphmap = JSON.parse(
fs.readFileSync(`glyphmaps/${mapFile}.json`, { encoding: 'utf8' })
);
const names = Object.keys(glyphmap).join("' | '");
const iconClass = `/**
* @flow strict
*/
import type { Icon } from './index';
export type ${icon}Glyphs = '${names}';
declare export default Class<Icon<${icon}Glyphs>>;
`;
fs.writeFileSync(`${icon}.js.flow`, iconClass);
}

72
build/vendor/react-native-vector-icons/fonts.gradle vendored
View File

@@ -8,48 +8,50 @@ def iconFontsDir = config.iconFontsDir ?: "../../node_modules/react-native-vecto
def iconFontNames = config.iconFontNames ?: [ "*.ttf" ];
gradle.projectsEvaluated {
// Grab all build types and product flavors
def buildTypes = android.buildTypes.collect { type -> type.name }
def productFlavors = android.productFlavors.collect { flavor -> flavor.name }
android.applicationVariants.all { def variant ->
def targetName = variant.name.capitalize()
def targetPath = variant.dirName
// When no product flavors defined, use empty
if (!productFlavors) productFlavors.add("")
// Create task for copying fonts
def currentFontTask = tasks.create(
name: "copy${targetName}IconFonts",
type: Copy) {
into("${buildDir}/intermediates")
productFlavors.each { productFlavorName ->
buildTypes.each { buildTypeName ->
// Create variant and target names
def flavorNameCapitalized = "${productFlavorName.capitalize()}"
def buildNameCapitalized = "${buildTypeName.capitalize()}"
def targetName = "${flavorNameCapitalized}${buildNameCapitalized}"
def targetPath = productFlavorName ?
"${productFlavorName}/${buildTypeName}" :
"${buildTypeName}"
iconFontNames.each { fontName ->
// Create task for copying fonts
def currentFontTask = tasks.create(
name: "copy${targetName}IconFonts",
type: Copy) {
iconFontNames.each { name ->
from(iconFontsDir)
include(name)
into("${buildDir}/intermediates/assets/${targetPath}/fonts/")
}
from(iconFontsDir) {
include(fontName)
into("assets/${targetPath}/fonts/")
}
// Workaround for Android Gradle Plugin 3.2+ new asset directory
from(iconFontsDir) {
include(fontName)
into("merged_assets/${variant.name}/merge${targetName}Assets/out/fonts/")
}
// Workaround for Android Gradle Plugin 3.4+ new asset directory
from(iconFontsDir) {
include(fontName)
into("merged_assets/${variant.name}/out/fonts/")
}
}
}
currentFontTask.dependsOn("merge${targetName}Resources")
currentFontTask.dependsOn("merge${targetName}Assets")
currentFontTask.dependsOn("merge${targetName}Resources")
currentFontTask.dependsOn("merge${targetName}Assets")
[
"process${flavorNameCapitalized}Armeabi-v7a${buildNameCapitalized}Resources",
"process${flavorNameCapitalized}X86${buildNameCapitalized}Resources",
"processUniversal${targetName}Resources",
"process${targetName}Resources"
].each { name ->
Task dependentTask = tasks.findByPath(name);
[
"processArmeabi-v7a${targetName}Resources",
"processX86${targetName}Resources",
"processUniversal${targetName}Resources",
"process${targetName}Resources"
].each { name ->
Task dependentTask = tasks.findByPath(name);
if (dependentTask != null) {
dependentTask.dependsOn(currentFontTask)
}
if (dependentTask != null) {
dependentTask.dependsOn(currentFontTask)
}
}
}

0
build/vendor/react-native-vector-icons/glyphmaps/AntDesign.json vendored Executable file → Normal file
View File

0
build/vendor/react-native-vector-icons/glyphmaps/Entypo.json vendored Executable file → Normal file
View File

0
build/vendor/react-native-vector-icons/glyphmaps/EvilIcons.json vendored Executable file → Normal file
View File

545
build/vendor/react-native-vector-icons/glyphmaps/Feather.json vendored Executable file → Normal file
View File

@@ -1,268 +1,281 @@
{
"activity": 59648,
"airplay": 59649,
"alert-circle": 59650,
"alert-octagon": 59651,
"alert-triangle": 59652,
"align-center": 59653,
"align-justify": 59654,
"align-left": 59655,
"align-right": 59656,
"anchor": 59657,
"aperture": 59658,
"archive": 59659,
"arrow-down": 59660,
"arrow-down-circle": 59661,
"arrow-down-left": 59662,
"arrow-down-right": 59663,
"arrow-left": 59664,
"arrow-left-circle": 59665,
"arrow-right": 59666,
"arrow-right-circle": 59667,
"arrow-up": 59668,
"arrow-up-circle": 59669,
"arrow-up-left": 59670,
"arrow-up-right": 59671,
"at-sign": 59672,
"award": 59673,
"bar-chart": 59674,
"bar-chart-2": 59675,
"battery": 59676,
"battery-charging": 59677,
"bell": 59678,
"bell-off": 59679,
"bluetooth": 59680,
"bold": 59681,
"book": 59682,
"book-open": 59683,
"bookmark": 59684,
"box": 59685,
"briefcase": 59686,
"calendar": 59687,
"camera": 59688,
"camera-off": 59689,
"cast": 59690,
"check": 59691,
"check-circle": 59692,
"check-square": 59693,
"chevron-down": 59694,
"chevron-left": 59695,
"chevron-right": 59696,
"chevron-up": 59697,
"chevrons-down": 59698,
"chevrons-left": 59699,
"chevrons-right": 59700,
"chevrons-up": 59701,
"chrome": 59702,
"circle": 59703,
"clipboard": 59704,
"clock": 59705,
"cloud": 59706,
"cloud-drizzle": 59707,
"cloud-lightning": 59708,
"cloud-off": 59709,
"cloud-rain": 59710,
"cloud-snow": 59711,
"code": 59712,
"codepen": 59713,
"command": 59714,
"compass": 59715,
"copy": 59716,
"corner-down-left": 59717,
"corner-down-right": 59718,
"corner-left-down": 59719,
"corner-left-up": 59720,
"corner-right-down": 59721,
"corner-right-up": 59722,
"corner-up-left": 59723,
"corner-up-right": 59724,
"cpu": 59725,
"credit-card": 59726,
"crop": 59727,
"crosshair": 59728,
"database": 59729,
"delete": 59730,
"disc": 59731,
"dollar-sign": 59732,
"download": 59733,
"download-cloud": 59734,
"droplet": 59735,
"edit": 59736,
"edit-2": 59737,
"edit-3": 59738,
"external-link": 59739,
"eye": 59740,
"eye-off": 59741,
"facebook": 59742,
"fast-forward": 59743,
"feather": 59744,
"file": 59745,
"file-minus": 59746,
"file-plus": 59747,
"file-text": 59748,
"film": 59749,
"filter": 59750,
"flag": 59751,
"folder": 59752,
"folder-minus": 59753,
"folder-plus": 59754,
"gift": 59755,
"git-branch": 59756,
"git-commit": 59757,
"git-merge": 59758,
"git-pull-request": 59759,
"github": 59760,
"gitlab": 59761,
"globe": 59762,
"grid": 59763,
"hard-drive": 59764,
"hash": 59765,
"headphones": 59766,
"heart": 59767,
"help-circle": 59768,
"home": 59769,
"image": 59770,
"inbox": 59771,
"info": 59772,
"instagram": 59773,
"italic": 59774,
"layers": 59775,
"layout": 59776,
"life-buoy": 59777,
"link": 59778,
"link-2": 59779,
"linkedin": 59780,
"list": 59781,
"loader": 59782,
"lock": 59783,
"log-in": 59784,
"log-out": 59785,
"mail": 59786,
"map": 59787,
"map-pin": 59788,
"maximize": 59789,
"maximize-2": 59790,
"menu": 59791,
"message-circle": 59792,
"message-square": 59793,
"mic": 59794,
"mic-off": 59795,
"minimize": 59796,
"minimize-2": 59797,
"minus": 59798,
"minus-circle": 59799,
"minus-square": 59800,
"monitor": 59801,
"moon": 59802,
"more-horizontal": 59803,
"more-vertical": 59804,
"move": 59805,
"music": 59806,
"navigation": 59807,
"navigation-2": 59808,
"octagon": 59809,
"package": 59810,
"paperclip": 59811,
"pause": 59812,
"pause-circle": 59813,
"percent": 59814,
"phone": 59815,
"phone-call": 59816,
"phone-forwarded": 59817,
"phone-incoming": 59818,
"phone-missed": 59819,
"phone-off": 59820,
"phone-outgoing": 59821,
"pie-chart": 59822,
"play": 59823,
"play-circle": 59824,
"plus": 59825,
"plus-circle": 59826,
"plus-square": 59827,
"pocket": 59828,
"power": 59829,
"printer": 59830,
"radio": 59831,
"refresh-ccw": 59832,
"refresh-cw": 59833,
"repeat": 59834,
"rewind": 59835,
"rotate-ccw": 59836,
"rotate-cw": 59837,
"rss": 59838,
"save": 59839,
"scissors": 59840,
"search": 59841,
"send": 59842,
"server": 59843,
"settings": 59844,
"share": 59845,
"share-2": 59846,
"shield": 59847,
"shield-off": 59848,
"shopping-bag": 59849,
"shopping-cart": 59850,
"shuffle": 59851,
"sidebar": 59852,
"skip-back": 59853,
"skip-forward": 59854,
"slack": 59855,
"slash": 59856,
"sliders": 59857,
"smartphone": 59858,
"speaker": 59859,
"square": 59860,
"star": 59861,
"stop-circle": 59862,
"sun": 59863,
"sunrise": 59864,
"sunset": 59865,
"tablet": 59866,
"tag": 59867,
"target": 59868,
"terminal": 59869,
"thermometer": 59870,
"thumbs-down": 59871,
"thumbs-up": 59872,
"toggle-left": 59873,
"toggle-right": 59874,
"trash": 59875,
"trash-2": 59876,
"trending-down": 59877,
"trending-up": 59878,
"triangle": 59879,
"truck": 59880,
"tv": 59881,
"twitter": 59882,
"type": 59883,
"umbrella": 59884,
"underline": 59885,
"unlock": 59886,
"upload": 59887,
"upload-cloud": 59888,
"user": 59889,
"user-check": 59890,
"user-minus": 59891,
"user-plus": 59892,
"user-x": 59893,
"users": 59894,
"video": 59895,
"video-off": 59896,
"voicemail": 59897,
"volume": 59898,
"volume-1": 59899,
"volume-2": 59900,
"volume-x": 59901,
"watch": 59902,
"wifi": 59903,
"wifi-off": 59904,
"wind": 59905,
"x": 59906,
"x-circle": 59907,
"x-square": 59908,
"youtube": 59909,
"zap": 59910,
"zap-off": 59911,
"zoom-in": 59912,
"zoom-out": 59913
"activity": 61696,
"airplay": 61697,
"alert-circle": 61698,
"alert-octagon": 61699,
"alert-triangle": 61700,
"align-center": 61701,
"align-justify": 61702,
"align-left": 61703,
"align-right": 61704,
"anchor": 61705,
"aperture": 61706,
"archive": 61707,
"arrow-down": 61708,
"arrow-down-circle": 61709,
"arrow-down-left": 61710,
"arrow-down-right": 61711,
"arrow-left": 61712,
"arrow-left-circle": 61713,
"arrow-right": 61714,
"arrow-right-circle": 61715,
"arrow-up": 61716,
"arrow-up-circle": 61717,
"arrow-up-left": 61718,
"arrow-up-right": 61719,
"at-sign": 61720,
"award": 61721,
"bar-chart": 61722,
"bar-chart-2": 61723,
"battery": 61724,
"battery-charging": 61725,
"bell": 61726,
"bell-off": 61727,
"bluetooth": 61728,
"bold": 61729,
"book": 61730,
"book-open": 61731,
"bookmark": 61732,
"box": 61733,
"briefcase": 61734,
"calendar": 61735,
"camera": 61736,
"camera-off": 61737,
"cast": 61738,
"check": 61739,
"check-circle": 61740,
"check-square": 61741,
"chevron-down": 61742,
"chevron-left": 61743,
"chevron-right": 61744,
"chevron-up": 61745,
"chevrons-down": 61746,
"chevrons-left": 61747,
"chevrons-right": 61748,
"chevrons-up": 61749,
"chrome": 61750,
"circle": 61751,
"clipboard": 61752,
"clock": 61753,
"cloud": 61754,
"cloud-drizzle": 61755,
"cloud-lightning": 61756,
"cloud-off": 61757,
"cloud-rain": 61758,
"cloud-snow": 61759,
"code": 61760,
"codepen": 61761,
"codesandbox": 61972,
"coffee": 61762,
"columns": 61973,
"command": 61763,
"compass": 61764,
"copy": 61765,
"corner-down-left": 61766,
"corner-down-right": 61767,
"corner-left-down": 61768,
"corner-left-up": 61769,
"corner-right-down": 61770,
"corner-right-up": 61771,
"corner-up-left": 61772,
"corner-up-right": 61773,
"cpu": 61774,
"credit-card": 61775,
"crop": 61776,
"crosshair": 61777,
"database": 61778,
"delete": 61779,
"disc": 61780,
"dollar-sign": 61781,
"download": 61782,
"download-cloud": 61783,
"droplet": 61784,
"edit": 61785,
"edit-2": 61786,
"edit-3": 61787,
"external-link": 61788,
"eye": 61789,
"eye-off": 61790,
"facebook": 61791,
"fast-forward": 61792,
"feather": 61793,
"figma": 61970,
"file": 61794,
"file-minus": 61795,
"file-plus": 61796,
"file-text": 61797,
"film": 61798,
"filter": 61799,
"flag": 61800,
"folder": 61801,
"folder-minus": 61802,
"folder-plus": 61803,
"frown": 61804,
"gift": 61805,
"git-branch": 61806,
"git-commit": 61807,
"git-merge": 61808,
"git-pull-request": 61809,
"github": 61810,
"gitlab": 61811,
"globe": 61812,
"grid": 61813,
"hard-drive": 61814,
"hash": 61815,
"headphones": 61816,
"heart": 61817,
"help-circle": 61818,
"hexagon": 61974,
"home": 61819,
"image": 61820,
"inbox": 61821,
"info": 61822,
"instagram": 61823,
"italic": 61824,
"key": 61967,
"layers": 61825,
"layout": 61826,
"life-buoy": 61827,
"link": 61828,
"link-2": 61829,
"linkedin": 61830,
"list": 61831,
"loader": 61832,
"lock": 61833,
"log-in": 61834,
"log-out": 61835,
"mail": 61836,
"map": 61837,
"map-pin": 61838,
"maximize": 61839,
"maximize-2": 61840,
"meh": 61841,
"menu": 61842,
"message-circle": 61843,
"message-square": 61844,
"mic": 61845,
"mic-off": 61846,
"minimize": 61847,
"minimize-2": 61848,
"minus": 61849,
"minus-circle": 61850,
"minus-square": 61851,
"monitor": 61852,
"moon": 61853,
"more-horizontal": 61854,
"more-vertical": 61855,
"mouse-pointer": 61968,
"move": 61856,
"music": 61857,
"navigation": 61858,
"navigation-2": 61859,
"octagon": 61860,
"package": 61861,
"paperclip": 61862,
"pause": 61863,
"pause-circle": 61864,
"pen-tool": 61969,
"percent": 61865,
"phone": 61866,
"phone-call": 61867,
"phone-forwarded": 61868,
"phone-incoming": 61869,
"phone-missed": 61870,
"phone-off": 61871,
"phone-outgoing": 61872,
"pie-chart": 61873,
"play": 61874,
"play-circle": 61875,
"plus": 61876,
"plus-circle": 61877,
"plus-square": 61878,
"pocket": 61879,
"power": 61880,
"printer": 61881,
"radio": 61882,
"refresh-ccw": 61883,
"refresh-cw": 61884,
"repeat": 61885,
"rewind": 61886,
"rotate-ccw": 61887,
"rotate-cw": 61888,
"rss": 61889,
"save": 61890,
"scissors": 61891,
"search": 61892,
"send": 61893,
"server": 61894,
"settings": 61895,
"share": 61896,
"share-2": 61897,
"shield": 61898,
"shield-off": 61899,
"shopping-bag": 61900,
"shopping-cart": 61901,
"shuffle": 61902,
"sidebar": 61903,
"skip-back": 61904,
"skip-forward": 61905,
"slack": 61906,
"slash": 61907,
"sliders": 61908,
"smartphone": 61909,
"smile": 61910,
"speaker": 61911,
"square": 61912,
"star": 61913,
"stop-circle": 61914,
"sun": 61915,
"sunrise": 61916,
"sunset": 61917,
"tablet": 61975,
"tag": 61919,
"target": 61920,
"terminal": 61921,
"thermometer": 61922,
"thumbs-down": 61923,
"thumbs-up": 61924,
"toggle-left": 61925,
"toggle-right": 61926,
"trash": 61927,
"trash-2": 61928,
"trello": 61929,
"trending-down": 61930,
"trending-up": 61931,
"triangle": 61932,
"truck": 61933,
"tv": 61934,
"twitter": 61935,
"type": 61936,
"umbrella": 61937,
"underline": 61938,
"unlock": 61939,
"upload": 61940,
"upload-cloud": 61941,
"user": 61942,
"user-check": 61943,
"user-minus": 61944,
"user-plus": 61945,
"user-x": 61946,
"users": 61947,
"video": 61948,
"video-off": 61949,
"voicemail": 61950,
"volume": 61951,
"volume-1": 61952,
"volume-2": 61953,
"volume-x": 61954,
"watch": 61955,
"wifi": 61956,
"wifi-off": 61957,
"wind": 61958,
"x": 61959,
"x-circle": 61960,
"x-octagon": 61971,
"x-square": 61961,
"youtube": 61962,
"zap": 61963,
"zap-off": 61964,
"zoom-in": 61965,
"zoom-out": 61966
}

0
build/vendor/react-native-vector-icons/glyphmaps/FontAwesome.json vendored Executable file → Normal file
View File

0
build/vendor/react-native-vector-icons/glyphmaps/FontAwesome5Free.json vendored Executable file → Normal file
View File

0
build/vendor/react-native-vector-icons/glyphmaps/FontAwesome5Free_meta.json vendored Executable file → Normal file
View File

0
build/vendor/react-native-vector-icons/glyphmaps/FontAwesome5Pro.json vendored Executable file → Normal file
View File

0
build/vendor/react-native-vector-icons/glyphmaps/FontAwesome5Pro_meta.json vendored Executable file → Normal file
View File

2
build/vendor/react-native-vector-icons/glyphmaps/Fontisto.json vendored
View File

@@ -616,4 +616,4 @@
"ellipse": 59916,
"rectangle": 59917,
"shield": 59914
}
}

0
build/vendor/react-native-vector-icons/glyphmaps/Foundation.json vendored Executable file → Normal file
View File

0
build/vendor/react-native-vector-icons/glyphmaps/Ionicons.json vendored Executable file → Normal file
View File

657
build/vendor/react-native-vector-icons/glyphmaps/MaterialCommunityIcons.json vendored Executable file → Normal file
View File

File diff suppressed because it is too large Load Diff

0
build/vendor/react-native-vector-icons/glyphmaps/MaterialIcons.json vendored Executable file → Normal file
View File

0
build/vendor/react-native-vector-icons/glyphmaps/Octicons.json vendored Executable file → Normal file
View File

0
build/vendor/react-native-vector-icons/glyphmaps/SimpleLineIcons.json vendored Executable file → Normal file
View File

0
build/vendor/react-native-vector-icons/glyphmaps/Zocial.json vendored Executable file → Normal file
View File

12
build/vendor/react-native-vector-icons/index.js vendored
View File

@@ -1,10 +1,4 @@
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 createMultiStyleIconSet,
} from './lib/create-multi-style-icon-set';
export { default as createMultiStyleIconSet } from './lib/create-multi-style-icon-set';
export { default as createIconSetFromFontello } from './lib/create-icon-set-from-fontello';
export { default as createIconSetFromIcoMoon } from './lib/create-icon-set-from-icomoon';

121
build/vendor/react-native-vector-icons/index.js.flow vendored Normal file
View File

@@ -0,0 +1,121 @@
/**
* @flow strict
*/
import { PureComponent } from 'react';
export type Color = number | string;
export type IconButtonProps<Glyphs: string> = {
backgroundColor?: Color,
borderRadius?: number,
color?: Color,
name: Glyphs,
size?: number,
};
declare class IconButton<Glyphs: string> extends PureComponent<
IconButtonProps<Glyphs>
> {}
export type IconToolbarAndroidActions<Glyphs: string> = {
iconColor?: Color,
iconName?: Glyphs,
iconSize?: number,
show?: 'always' | 'ifRoom' | 'never',
showWithText?: boolean,
title: string,
};
export type IconToolbarAndroidProps<Glyphs: string> = {
actions: IconToolbarAndroidActions<Glyphs>[],
iconColor?: Color,
iconSize?: number,
logoName?: Glyphs,
navIconName?: Glyphs,
overflowIconName?: Glyphs,
titleColor?: Color,
};
declare class IconToolbarAndroid<Glyphs: string> extends PureComponent<
IconToolbarAndroidProps<Glyphs>
> {}
export type TabBarItemIOSProps<Glyphs: string> = {
iconColor?: Color,
iconName: Glyphs,
iconSize?: number,
selectedIconColor?: Color,
selectedIconName?: Glyphs,
};
declare class TabBarItemIOS<Glyphs: string> extends PureComponent<
TabBarItemIOSProps<Glyphs>
> {}
export type IconProps<Glyphs: string> = {
allowFontScaling?: boolean,
color?: Color,
name: Glyphs,
size?: number,
};
export type ImageSource = {|
uri: string,
scale: number,
|};
declare class Icon<Glyphs: string> extends PureComponent<IconProps<Glyphs>> {
static Button: Class<IconButton<Glyphs>>;
static TabBarItem: Class<TabBarItemIOS<Glyphs>>;
static TabBarItemIOS: Class<TabBarItemIOS<Glyphs>>;
static ToolbarAndroid: Class<IconToolbarAndroid<Glyphs>>;
static getFontFamily(): string;
static getImageSource(
name: Glyphs,
size?: number,
color?: Color
): Promise<ImageSource>;
static getImageSourceSync(
name: Glyphs,
size?: number,
color?: Color
): ImageSource;
static getRawGlyphMap(): { [name: Glyphs]: number };
static hasIcon(name: string): boolean;
static loadFont(file?: string): Promise<void>;
}
export type { Icon };
declare export function createIconSet<GlyphMap: { [key: string]: number }>(
glyphMap: GlyphMap,
fontFamily: string,
fontFile?: string
): Class<Icon<$Keys<GlyphMap>>>;
export type FontelloConfig = {
glyphs: Array<{
css: string,
code: number,
}>,
};
declare export function createIconSetFromFontello(
config: FontelloConfig,
fontFamily?: string,
fontFile?: string
): Class<Icon<string>>;
export type IcoMoonConfig = {
icons: Array<{
properties: { name: string, code: number },
}>,
};
declare export function createIconSetFromIcoMoon(
config: IcoMoonConfig,
fontFamily?: string,
fontFile?: string
): Class<Icon<string>>;

27
build/vendor/react-native-vector-icons/lib/create-icon-source-cache.js vendored Normal file
View File

@@ -0,0 +1,27 @@
const TYPE_VALUE = 'value';
const TYPE_ERROR = 'error';
export default function createIconSourceCache() {
const cache = new Map();
const setValue = (key, value) =>
cache.set(key, { type: TYPE_VALUE, data: value });
const setError = (key, error) =>
cache.set(key, { type: TYPE_ERROR, data: error });
const has = key => cache.has(key);
const get = key => {
if (!cache.has(key)) {
return undefined;
}
const { type, data } = cache.get(key);
if (type === TYPE_ERROR) {
throw data;
}
return data;
};
return { setValue, setError, has, get };
}

1
build/vendor/react-native-vector-icons/lib/react-native.js vendored Normal file
View File

@@ -0,0 +1 @@
export * from 'react-native';

3
build/vendor/react-native-vector-icons/lib/react-native.web.js vendored Normal file
View File

@@ -0,0 +1,3 @@
/* eslint-disable import/no-unresolved */
export * from 'react-native-web';

14
build/vendor/react-native-vector-icons/templates/bundled-icon-set.tpl vendored
View File

@@ -9,9 +9,11 @@ const glyphMap = ${glyphMap};
const iconSet = createIconSet(glyphMap, '${fontFamily}', '${componentName}.ttf');
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;
export const {
Button,
TabBarItem,
TabBarItemIOS,
ToolbarAndroid,
getImageSource,
getImageSourceSync,
} = iconSet;

14
build/vendor/react-native-vector-icons/templates/separated-icon-set.tpl vendored
View File

@@ -9,9 +9,11 @@ import glyphMap from './glyphmaps/${componentName}.json';
const iconSet = createIconSet(glyphMap, '${fontFamily}', '${componentName}.ttf');
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;
export const {
Button,
TabBarItem,
TabBarItemIOS,
ToolbarAndroid,
getImageSource,
getImageSourceSync,
} = iconSet;

2
package.json
View File

@@ -1,7 +1,7 @@
{
"name": "@expo/vector-icons",
"sideEffects": false,
"version": "10.1.0",
"version": "10.1.1-alpha.1",
"description": "Built-in support for 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.",
"main": "build/IconsLazy.js",
"module": "build/Icons.js",

BIN
src/vendor/react-native-vector-icons/.DS_Store vendored
View File

Binary file not shown.

15
src/vendor/react-native-vector-icons/AntDesign.js vendored
View File

@@ -9,10 +9,11 @@ import glyphMap from './glyphmaps/AntDesign.json';
const iconSet = createIconSet(glyphMap, 'anticon', 'AntDesign.ttf');
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;
export const {
Button,
TabBarItem,
TabBarItemIOS,
ToolbarAndroid,
getImageSource,
getImageSourceSync,
} = iconSet;

21
src/vendor/react-native-vector-icons/BUILDING_FEATHER.md vendored
View File

@@ -1,9 +1,16 @@
# Generating Feather icon set
1. Go to [Icomoon Library](https://icomoon.io/app/#/select/library) and press _+ Add_ on the Feather icon set
2. Press _Select all_ in the hamburger menu next to the icon set
3. Press _Generate Font_ in the bottom menu
4. Press _Preferences_ and enter `Feather` as _Font Name_ in the dialog
5. Press _Download_
6. Unzip the file and move the folder to the `react-native-vector-icons` folder
7. Generate the icon set with `yarn build-feather`
### To build the Feather icon Set you will need:
- [Inkscape](https://inkscape.org/)
- [GNU Parallel](https://www.gnu.org/software/parallel/)
- [Font Custom](https://github.com/FontCustom/fontcustom)
- [Xvfb](https://www.x.org/releases/X11R7.6/doc/man/man1/Xvfb.1.xhtml) - Optional, but highly recommended
1. Go to [Font Custom](https://github.com/FontCustom/fontcustom) and follow the installation instructions
2. Generate the icon set with `yarn build-feather`
Before we can build the icon set, you'll need to pre-process the icons. You can do this using Inkscape with help of Parallel.
If you have Xvfb installed, you will see a progress bar in the console; if not, each icon will launch one Inkscape window to adjust the SVG.
The building stage will create a folder called `Feather`. This will be removed at the end of the build.

14
src/vendor/react-native-vector-icons/CONTRIBUTING.md vendored
View File

@@ -8,7 +8,7 @@ If this is your first open source contribution, please take a look at [this](htt
## Reporting Bugs & Feature Requests
If you would like to submit a feature request or report a bug, we encourage you to first look through the [issues](https://github.com/react-native-vector-icons/loki/issues) and [pull requests](https://github.com/oblador/react-native-vector-icons/pulls) before filing a new issue.
If you would like to submit a feature request or report a bug, we encourage you to first look through the [issues](https://github.com/oblador/react-native-vector-icons/issues) and [pull requests](https://github.com/oblador/react-native-vector-icons/pulls) before filing a new issue.
## Submitting a Pull Request
@@ -16,11 +16,11 @@ If you wish to submit a pull request for a new feature or issue, you should star
### Setup
* Install [Node.js](https://nodejs.org/) if you have not already. (*We suggest you to use node v6.x.x*)
* Fork the repo
* ```git clone https://github.com/*yourusername*/react-native-vector-icons.git && cd react-native-vector-icons```
* ```yarn install``` OR ```npm install```
* ```npm test```
* Optionally ```brew install fontcustom && npm run build``` if you've updated any icon sets.
- Install [Node.js](https://nodejs.org/) if you have not already. (_We suggest you to use node v6.x.x_)
- Fork the repo
- `git clone https://github.com/*yourusername*/react-native-vector-icons.git && cd react-native-vector-icons`
- `yarn install` OR `npm install`
- `npm test`
- Optionally `brew install fontcustom && npm run build` if you've updated any icon sets.
One you have done this, create a new branch with a name that loosely describes the issue on which you will be working. Once you think you have the addressed the issue in question, submit a pull request to the `master` branch.

15
src/vendor/react-native-vector-icons/Entypo.js vendored
View File

@@ -9,10 +9,11 @@ import glyphMap from './glyphmaps/Entypo.json';
const iconSet = createIconSet(glyphMap, 'Entypo', 'Entypo.ttf');
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;
export const {
Button,
TabBarItem,
TabBarItemIOS,
ToolbarAndroid,
getImageSource,
getImageSourceSync,
} = iconSet;

15
src/vendor/react-native-vector-icons/EvilIcons.js vendored
View File

@@ -9,10 +9,11 @@ import glyphMap from './glyphmaps/EvilIcons.json';
const iconSet = createIconSet(glyphMap, 'EvilIcons', 'EvilIcons.ttf');
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;
export const {
Button,
TabBarItem,
TabBarItemIOS,
ToolbarAndroid,
getImageSource,
getImageSourceSync,
} = iconSet;

44
src/vendor/react-native-vector-icons/FONTAWESOME5.md vendored
View File

@@ -2,14 +2,14 @@
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.
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`](#usage)
- [`Upgrading to Pro`](#upgrading-to-pro)
# Usage
@@ -18,7 +18,7 @@ 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'} />);
const icon = <FontAwesome5 name={'comments'} />;
```
Something special about the FontAwesome5 class is that you can also pass props
@@ -27,17 +27,17 @@ 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 />);
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 |
| 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.
@@ -46,13 +46,13 @@ 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 />);
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
`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:
@@ -70,7 +70,12 @@ 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 }));
FontAwesome5.getImageSource(
'comments',
30,
'#000',
FA5Style.solid
).then(source => this.setState({ image: source }));
```
Not passing a style will result in Regular style.
@@ -78,22 +83,23 @@ 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.
account and then access the `Services` tab.
Run ```./node_modules/.bin/fa5-upgrade``` and enter the token when asked to in order to
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.
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/>);
const icon = <FontAwesome5Pro name={'comments'} light />;
```

15
src/vendor/react-native-vector-icons/Feather.js vendored
View File

@@ -9,10 +9,11 @@ import glyphMap from './glyphmaps/Feather.json';
const iconSet = createIconSet(glyphMap, 'Feather', 'Feather.ttf');
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;
export const {
Button,
TabBarItem,
TabBarItemIOS,
ToolbarAndroid,
getImageSource,
getImageSourceSync,
} = iconSet;

15
src/vendor/react-native-vector-icons/FontAwesome.js vendored
View File

@@ -9,10 +9,11 @@ import glyphMap from './glyphmaps/FontAwesome.json';
const iconSet = createIconSet(glyphMap, 'FontAwesome', 'FontAwesome.ttf');
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;
export const {
Button,
TabBarItem,
TabBarItemIOS,
ToolbarAndroid,
getImageSource,
getImageSourceSync,
} = iconSet;

14
src/vendor/react-native-vector-icons/FontAwesome5.js vendored
View File

@@ -13,9 +13,11 @@ export { FA5Style } from './lib/create-icon-set-from-fontawesome5';
const iconSet = createFA5iconSet(glyphMap, metadata, 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;
export const {
Button,
TabBarItem,
TabBarItemIOS,
ToolbarAndroid,
getImageSource,
getImageSourceSync,
} = iconSet;

14
src/vendor/react-native-vector-icons/FontAwesome5Pro.js vendored
View File

@@ -13,9 +13,11 @@ export { FA5Style } from './lib/create-icon-set-from-fontawesome5';
const iconSet = createFA5iconSet(glyphMap, metadata, 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;
export const {
Button,
TabBarItem,
TabBarItemIOS,
ToolbarAndroid,
getImageSource,
getImageSourceSync,
} = iconSet;

17
src/vendor/react-native-vector-icons/Fontisto.js vendored
View File

@@ -1,11 +1,13 @@
/**
* Feather icon set component.
* Usage: <Feather name="icon-name" size={20} color="#4F8EF7" />
* Fontisto icon set component.
* Usage: <Fontisto name="icon-name" size={20} color="#4F8EF7" />
*/
import createIconSet from "./createIconSet";
import font from "./vendor/react-native-vector-icons/Fonts/Fontisto.ttf";
import glyphMap from "./vendor/react-native-vector-icons/glyphmaps/Fontisto.json";
const iconSet = createIconSet(glyphMap, "Fontisto", font);
import createIconSet from './lib/create-icon-set';
import glyphMap from './glyphmaps/Fontisto.json';
const iconSet = createIconSet(glyphMap, 'Fontisto', 'Fontisto.ttf');
export default iconSet;
export const {
Button,
@@ -13,6 +15,5 @@ export const {
TabBarItemIOS,
ToolbarAndroid,
getImageSource,
getImageSourceSync
getImageSourceSync,
} = iconSet;
//# sourceMappingURL=Fontisto.js.map

0
src/vendor/react-native-vector-icons/Fonts/AntDesign.ttf vendored Executable file → Normal file
View File

0
src/vendor/react-native-vector-icons/Fonts/Entypo.ttf vendored Executable file → Normal file
View File

0
src/vendor/react-native-vector-icons/Fonts/EvilIcons.ttf vendored Executable file → Normal file
View File

BIN
src/vendor/react-native-vector-icons/Fonts/Feather.ttf vendored Executable file → Normal file
View File

Binary file not shown.

0
src/vendor/react-native-vector-icons/Fonts/FontAwesome.ttf vendored Executable file → Normal file
View File

BIN
src/vendor/react-native-vector-icons/Fonts/FontAwesome5_Brands.ttf vendored Executable file → Normal file
View File

Binary file not shown.

BIN
src/vendor/react-native-vector-icons/Fonts/FontAwesome5_Regular.ttf vendored Executable file → Normal file
View File

Binary file not shown.

BIN
src/vendor/react-native-vector-icons/Fonts/FontAwesome5_Solid.ttf vendored Executable file → Normal file
View File

Binary file not shown.

0
src/vendor/react-native-vector-icons/Fonts/Fontisto.ttf vendored Normal file → Executable file
View File

0
src/vendor/react-native-vector-icons/Fonts/Foundation.ttf vendored Executable file → Normal file
View File

0
src/vendor/react-native-vector-icons/Fonts/Ionicons.ttf vendored Executable file → Normal file
View File

BIN
src/vendor/react-native-vector-icons/Fonts/MaterialCommunityIcons.ttf vendored Executable file → Normal file
View File

Binary file not shown.

0
src/vendor/react-native-vector-icons/Fonts/MaterialIcons.ttf vendored Executable file → Normal file
View File

0
src/vendor/react-native-vector-icons/Fonts/Octicons.ttf vendored Executable file → Normal file
View File

0
src/vendor/react-native-vector-icons/Fonts/SimpleLineIcons.ttf vendored Executable file → Normal file
View File

0
src/vendor/react-native-vector-icons/Fonts/Zocial.ttf vendored Executable file → Normal file
View File

15
src/vendor/react-native-vector-icons/Foundation.js vendored
View File

@@ -9,10 +9,11 @@ import glyphMap from './glyphmaps/Foundation.json';
const iconSet = createIconSet(glyphMap, 'fontcustom', 'Foundation.ttf');
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;
export const {
Button,
TabBarItem,
TabBarItemIOS,
ToolbarAndroid,
getImageSource,
getImageSourceSync,
} = iconSet;

15
src/vendor/react-native-vector-icons/Ionicons.js vendored
View File

@@ -9,10 +9,11 @@ import glyphMap from './glyphmaps/Ionicons.json';
const iconSet = createIconSet(glyphMap, 'Ionicons', 'Ionicons.ttf');
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;
export const {
Button,
TabBarItem,
TabBarItemIOS,
ToolbarAndroid,
getImageSource,
getImageSourceSync,
} = iconSet;

15
src/vendor/react-native-vector-icons/MaterialCommunityIcons.js vendored
View File

@@ -9,10 +9,11 @@ import glyphMap from './glyphmaps/MaterialCommunityIcons.json';
const iconSet = createIconSet(glyphMap, 'Material Design Icons', 'MaterialCommunityIcons.ttf');
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;
export const {
Button,
TabBarItem,
TabBarItemIOS,
ToolbarAndroid,
getImageSource,
getImageSourceSync,
} = iconSet;

15
src/vendor/react-native-vector-icons/MaterialIcons.js vendored
View File

@@ -9,10 +9,11 @@ import glyphMap from './glyphmaps/MaterialIcons.json';
const iconSet = createIconSet(glyphMap, 'Material Icons', 'MaterialIcons.ttf');
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;
export const {
Button,
TabBarItem,
TabBarItemIOS,
ToolbarAndroid,
getImageSource,
getImageSourceSync,
} = iconSet;

15
src/vendor/react-native-vector-icons/Octicons.js vendored
View File

@@ -9,10 +9,11 @@ import glyphMap from './glyphmaps/Octicons.json';
const iconSet = createIconSet(glyphMap, 'Octicons', 'Octicons.ttf');
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;
export const {
Button,
TabBarItem,
TabBarItemIOS,
ToolbarAndroid,
getImageSource,
getImageSourceSync,
} = iconSet;

539
src/vendor/react-native-vector-icons/README.md vendored
View File

@@ -1,539 +0,0 @@
![Vector Icons for React Native](https://cloud.githubusercontent.com/assets/378279/12009887/33f4ae1c-ac8d-11e5-8666-7a87458753ee.png)
[![Travis](https://img.shields.io/travis/oblador/react-native-vector-icons.svg)](https://travis-ci.org/oblador/react-native-vector-icons) [![npm](https://img.shields.io/npm/v/react-native-vector-icons.svg)](https://npmjs.com/package/react-native-vector-icons) [![npm](https://img.shields.io/npm/dm/react-native-vector-icons.svg)](https://npmjs.com/package/react-native-vector-icons) [![Issue Stats](https://img.shields.io/issuestats/i/github/oblador/react-native-vector-icons.svg)](http://github.com/oblador/react-native-vector-icons/issues)
Perfect for buttons, logos and nav/tab bars. Easy to extend, style and integrate into your project.
## Table of Contents
- [Bundeled Icon Sets](#bundled-icon-sets)
- [Installation](#installation)
- [iOS](#ios)
- [Android](#android)
- [OSX](#osx-via-react-native-desktop)
- [Windows](#windows-via-react-native-windows)
- [Web](#web-with-webpack)
- [Upgrading](#upgrading)
- [Icon Component](#icon-component)
- [Icon.Button Component](#iconbutton-component)
- [Usage as PNG image/source object](#usage-as-png-imagesource-object)
- [Usage with TabBarIOS](#usage-with-tabbarios)
- [Usage with NavigatorIOS](#usage-with-navigatorios)
- [Usage with ToolbarAndroid](#usage-with-toolbarandroid)
- [Custom Fonts](#custom-fonts)
- [Animation](#animation)
- [Examples](#examples)
- [Generating your own icon set from a CSS file](#generating-your-own-icon-set-from-a-css-file)
- [Changelog](#changelog)
- [Troubleshooting](#troubleshooting)
- [License](#license)
## Bundled Icon Sets
[Browse all](https://oblador.github.io/react-native-vector-icons/).
* [`AntDesign`](https://ant.design/) by AntFinance (**297** icons)
* [`Entypo`](http://entypo.com) by Daniel Bruce (**411** icons)
* [`EvilIcons`](http://evil-icons.io) by Alexander Madyankin & Roman Shamin (v1.10.1, **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 5`](https://fontawesome.com) by Fonticons, Inc. (v5.3.1, 1341 (free) **3978** (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)
* [`MaterialCommunityIcons`](https://materialdesignicons.com/) by MaterialDesignIcons.com (v2.8.94, **2894** icons)
* [`Octicons`](http://octicons.github.com) by Github, Inc. (v8.0.0, **177** icons)
* [`Zocial`](http://zocial.smcllns.com/) by Sam Collins (v1.0, **100** icons)
* [`SimpleLineIcons`](http://simplelineicons.com/) by Sabbir & Contributors (v2.4.1, **189** icons)
## Installation
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
#### Option: Manually
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:
* Browse to `node_modules/react-native-vector-icons` and drag the folder `Fonts` (or just the ones you want) to your project in Xcode. **Make sure your app is checked under "Add to targets" and that "Create groups" is checked if you add the whole folder**.
* Edit `Info.plist` and add a property called **Fonts provided by application** (or `UIAppFonts` if Xcode won't autocomplete/not using Xcode) and type in the files you just added. It will look something like this:
![XCode screenshot](https://cloud.githubusercontent.com/assets/378279/12421498/2db1f93a-be88-11e5-89c8-2e563ba6251a.png)
*Note: you need to recompile your project after adding new fonts, also ensure that they also appear under __Copy Bundle Resources__ in __Build Phases__.*
If you want to use the TabBar/NavigatorIOS integration or use `getImageSource`, then you need to add `RNVectorIcons.xcodeproj` to **Libraries** and add `libRNVectorIcons.a` to **Link Binary With Libraries** under **Build Phases**. [More info and screenshots about how to do this is available in the React Native documentation](http://facebook.github.io/react-native/docs/linking-libraries-ios.html#content).
#### Option: With `react-native link`
`$ react-native link react-native-vector-icons`
*Note: Some users are having trouble using this method, try one of the others if you are too.*
#### Option: With [CocoaPods](https://cocoapods.org/)
Add the following to your `Podfile` and run `pod update`:
```
pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'
```
Edit `Info.plist` as described above.
If you are using `use_frameworks!` in your `Podfile` you instead need to dynamically load the icon font by doing `Icon.loadFont()` when boostrapping your application.
*Note: You must be consuming React itself via CocoaPods for this to work, see [React Native documentation](https://facebook.github.io/react-native/docs/integration-with-existing-apps) on how to set that up.*
### Android
#### Option: With Gradle (recommended)
This method has the advantage of fonts being copied from this module at build time so that the fonts and JS are always in sync, making upgrades painless.
Edit `android/app/build.gradle` ( NOT `android/build.gradle` ) and add the following:
```gradle
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
```
To customize the files being copied, add the following instead:
```gradle
project.ext.vectoricons = [
iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf' ] // Name of the font files you want to copy
]
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
```
#### Option: Manually
* Copy the contents in the `Fonts` folder to `android/app/src/main/assets/fonts` (*note lowercase font folder*).
##### Integrating library for `getImageSource` and `ToolbarAndroid` support
These steps are optional and only needed if you want to use the `Icon.getImageSource` function or using custom icons in the `Icon.ToolbarAndroid` component.
* Edit `android/settings.gradle` to look like this (without the +):
```diff
rootProject.name = 'MyApp'
include ':app'
+ include ':react-native-vector-icons'
+ project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
```
* Edit `android/app/build.gradle` (note: **app** folder) to look like this:
```diff
apply plugin: 'com.android.application'
android {
...
}
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
compile "com.android.support:appcompat-v7:23.0.1"
compile "com.facebook.react:react-native:+" // From node_modules
+ compile project(':react-native-vector-icons')
}
```
* Edit your `MainApplication.java` (deep in `android/app/src/main/java/...`) to look like this (note **two** places to edit):
```diff
package com.myapp;
+ import com.oblador.vectoricons.VectorIconsPackage;
....
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage()
+ , new VectorIconsPackage()
);
}
}
```
*Note: If you're using React Native (Android) <= 0.17, [follow this instructions](https://github.com/oblador/react-native-vector-icons/blob/2fe5b97afa849652215e3258189e8ca3ea775c53/README.md#integrating-library-for-getimagesource-support)*
#### Option: With `rnpm`
`$ react-native link`
*Note: Some users are having trouble using this method, try one of the others if you are too.*
### OSX via [`react-native-desktop`](https://github.com/ptmt/react-native-desktop)
* Browse to `node_modules/react-native-vector-icons` and drag the folder `Fonts` to your project in Xcode. **Make sure your app is checked under "Add to targets" and that "Create folder references" is checked**.
* Edit `Info.plist` and add a property called **Application fonts resource path** (or `ATSApplicationFontsPath` if Xcode won't autocomplete/not using Xcode) and type `Fonts` as the value.
*Note: you need to recompile your project after adding new fonts, also ensure that the `Fonts` folder also appear under __Copy Bundle Resources__ in __Build Phases__.*
### Windows via [`react-native-windows`](https://github.com/ReactWindows/react-native-windows)
* Open your solution in Visual Studio, right click the Assets folder in your solution, click **Add Existing**.
* Browse to the `node_modules\react-native-vector-icons\Fonts` folder, select the required font files
* Click the **Add** drop-down and select **Add as Link**.
* Set **Copy To Output Directory** property of each font file to **Copy if newer**
*Note: you need to recompile your project after adding new fonts.*
### Web (with [webpack](https://webpack.js.org/))
In your webpack configuration file, add a section to handle ttf files using url-loader (or file-loader)
```js
{
test: /\.ttf$/,
loader: "url-loader", // or directly file-loader
include: path.resolve(__dirname, "node_modules/react-native-vector-icons"),
},
```
Then consume those files in your JavaScript entry point to get the bundled url and inject a style tag in your page:
```js
// Use prebuilt version of RNVI in dist folder
import Icon from 'react-native-vector-icons/dist/FontAwesome';
// Generate required css
import iconFont from 'react-native-vector-icons/Fonts/FontAwesome.ttf';
const iconFontStyles = `@font-face {
src: url(${iconFont});
font-family: FontAwesome;
}`;
// Create stylesheet
const style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet) {
style.styleSheet.cssText = iconFontStyles;
} else {
style.appendChild(document.createTextNode(iconFontStyles));
}
// Inject stylesheet
document.head.appendChild(style);
```
## Upgrading
Upgrading this package often requires the font files linked to your projects to be updated as well. If the automatic linking works for you, running this again should update the fonts. Otherwise you need to follow the steps outlined in the [installation](#installation) section.
## `Icon` Component
You can either use one of the bundled icons above or roll your own custom font.
```js
import Icon from 'react-native-vector-icons/FontAwesome';
const myIcon = (<Icon name="rocket" size={30} color="#900" />)
```
### Properties
Any [Text property](http://facebook.github.io/react-native/docs/text.html) and the following:
| 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. |*Inherited*|
### Static Methods
| Prop | Description |
|---|---|
|**`getFontFamily`**|Returns the font family that is currently used to retrieve icons as text. Usage: `const fontFamily = Icon.getFontFamily()`|
|**`getImageSource`**|Returns a promise that resolving to the source of a bitmap version of the icon for use with `Image` component et al. Usage: `const source = await Icon.getImageSource(name, size, color)`|
|**`getRawGlyphMap`**|Returns the raw glyph map of the icon set. Usage: `const glyphMap = Icon.getRawGlyphMap()` |
|**`hasIcon`**|Checks if the name is valid in current icon set. Usage: `const isNameValid = Icon.hasIcon(name)`|
### 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:
* `backgroundColor`
* `borderWidth`
* `borderColor`
* `borderRadius`
* `padding`
* `margin`
* `color`
* `fontSize`
NOTE: On android `Text` doesn't currently support `border*` styles, to circumvent this simply wrap your `Icon` with a `View`.
By combining some of these you can create for example :
![type](https://cloud.githubusercontent.com/assets/378279/7667570/33817554-fc0d-11e4-9ad7-4eb60139cfb7.png)
![star](https://cloud.githubusercontent.com/assets/378279/7667569/3010dd7e-fc0d-11e4-9696-cb721fe8e98d.png)
## `Icon.Button` Component
A convenience component for creating buttons with an icon on the left side.
```js
import Icon from 'react-native-vector-icons/FontAwesome';
const myButton = (
<Icon.Button name="facebook" backgroundColor="#3b5998" onPress={this.loginWithFacebook}>
Login with Facebook
</Icon.Button>
);
const 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. *Note: use `iconStyle` for margins or expect unstable behaviour.*|`{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.
```
Icon.getImageSource('user', 20, 'red').then((source) => this.setState({ userIcon: source }));
```
For a complete example check out the `TabBarExample` project.
## Usage with [TabBarIOS](http://facebook.github.io/react-native/docs/tabbarios.html)
Simply use `Icon.TabBarItemIOS` instead of `TabBarIOS.Item`. This is an extended component that works exactly the same but with three additional properties:
| 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`|
|**`iconColor`**|Color of the icon. |*None*|
|**`selectedIconColor`**|Color of the selected icon. |*`iconColor`*|
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.
**Note:** using `iconColor` and `selectedIconColor` requires the attribute [renderAsOriginal](https://facebook.github.io/react-native/docs/tabbarios-item.html#renderasoriginal) to be set to `true` on `Icon.TabBarItemIOS`.
## 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 [`NavigatorIOS` doesn't rerender with new state](https://github.com/facebook/react-native/issues/1403) and the async nature of `getImageSource` you must not use it with `initialRoute` until the icon is rendered, but any view added by `push` should be fine. Easiest way is to simple add an `if` statment at the beginning of you render method like this:
```
render() {
if (!this.state.myIcon) {
return false;
}
return (<NavigatorIOS ... />);
}
```
[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).
## Usage with [ToolbarAndroid](http://facebook.github.io/react-native/docs/toolbarandroid.html)
Simply use `Icon.ToolbarAndroid` instead of `React.ToolbarAndroid`, this is composition of the underlying `ToolbarAndroid` component that works the same but any `*icon` property also takes `*iconName`:
| Prop | Description | Default |
|---|---|---|
|**`logoName`**|Name of the navigation logo icon (similar to `ToolbarAndroid` `logo`)|*None*|
|**`navIconName`**|Name of the navigation icon (similar to `ToolbarAndroid` `navIcon`)|*None*|
|**`overflowIconName`**|Name of the overflow icon (similar to `ToolbarAndroid` `overflowIcon`). |*none*|
|**`actions`**|Possible actions on the toolbar as part of the action menu, takes the additional arguments `iconName`, `iconColor` and `iconSize`. |*none*|
|**`iconSize`**|Size of the icons. |`24`|
|**`iconColor`**|Color of the icons. |`black`|
For example usage see `Examples/IconExplorer/index.android.js`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 ToolbarAndroid integration.
## Custom Fonts
### `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 the custom font file name.
```js
import { createIconSet } from 'react-native-vector-icons';
const glyphMap = { 'icon-name': 1234, test: '∆' };
const Icon = createIconSet(glyphMap, 'FontName', 'font-name.ttf');
```
### `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.
```js
import { createIconSetFromFontello } from 'react-native-vector-icons';
import fontelloConfig from './config.json';
const Icon = createIconSetFromFontello(fontelloConfig);
```
### `createIconSetFromIcoMoon(config[, fontFamily[, fontFile]])`
```js
import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
import icoMoonConfig from './selection.json';
const Icon = createIconSetFromIcoMoon(icoMoonConfig, 'LineAwesome', 'line-awesome.ttf');
```
Make sure you're using the _Download_ option in [IcoMoon](https://icomoon.io/app), and use the `.json` file that's included in the `.zip` you've downloaded. You'll also need to import the `.ttf` font file into your project, following the instructions above.
#### iOS
You have to manually make a reference of your `.ttf` on your xcodeproj `Resources` folder.
## Animation
React Native comes with an amazing animation library called [`Animated`](http://facebook.github.io/react-native/docs/animated.html). To use it with an icon, simply create an animated component with this line: `const AnimatedIcon = Animated.createAnimatedComponent(Icon)`. You can also use the higher level animation library [react-native-animatable](https://github.com/oblador/react-native-animatable).
## Examples
### 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/8903470/a9fe6b46-3458-11e5-901f-98b7b676d0d3.png)
### Basic Example
```js
import Icon from 'react-native-vector-icons/Ionicons';
function ExampleView(props) {
return (<Icon name="ios-person" size={30} color="#4F8EF7" />);
}
```
### TabBarIOS
Full example in `TabBarExample` project in `Examples/TabBarExample` folder.
```js
import { View, Text, TabBarIOS } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
function TabBarView(props) {
return (
<TabBarIOS>
<Icon.TabBarItem
title="Home"
iconName="ios-home-outline"
selectedIconName="ios-home"
>
<View style={styles.tabContent}><Text>Home Tab</Text></View>
</Icon.TabBarItem>
</TabBarIOS>
);
}
```
### ToolbarAndroid
```js
import Icon from 'react-native-vector-icons/Ionicons';
function ToolbarView(props) {
return (
<Icon.ToolbarAndroid
title="Home"
titleColor="white"
navIconName="md-arrow-back"
onIconClicked={props.navigator.pop}
actions={[
{ title: 'Settings', iconName: 'md-settings', iconSize: 30, show: 'always' },
{ title: 'Follow me on Twitter', iconName: 'logo-twitter', iconColor: "#4099FF", show: 'ifRoom' },
]}
overflowIconName="md-more"
/>
);
}
```
### Inline Icons
```js
import { Text } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
function ExampleView(props) {
return (<Text>Lorem <Icon name="ios-book" color="#4F8EF7" /> Ipsum</Text>);
}
```
### Community examples
* [react-native-dribbble-app](https://github.com/catalinmiron/react-native-dribbble-app)
* [product-kitty](https://github.com/rkho/product-kitty) ([blog post](http://richardkho.com/persisting-tabbars-in-react-native/))
* [react-native-netflix](https://github.com/mariodev12/react-native-netflix)
## Generating your own icon set from a CSS file
If you already have a icon font with associated CSS file then you can easily generate a icon set with the `generate-icon` script.
### Example usage:
```
./node_modules/.bin/generate-icon path/to/styles.css --componentName=MyIcon --fontFamily=myicon > Components/MyIcon.js
```
### Options
Any flags not listed below, like `--componentName` and `--fontFamily`, will be passed on to the template.
#### `-p`, `--prefix`
CSS selector prefix [default: ".icon-"]
#### `-t`, `--template`
Template in lodash format [default: "./template/iconSet.tpl"]
For default template please provide `--componentName` and `--fontFamily`.
#### `-o`, `--output`
Save output to file, defaults to STDOUT
## [Changelog](https://github.com/oblador/react-native-vector-icons/releases)
## Troubleshooting
#### The icons show up as a crossed out box on Android
* Make sure you've copied the font to `android/app/src/main/assets/fonts`.
* Delete the build folder with `rm -rf android/app/build`.
* Recompile the project.
#### Red screen with "Unrecognized font family" error on iOS
* Make sure you've added manually the reference of your `.ttf` on your xcodeproj `Resources` folder.
* Check that the font you are trying to use appears in `Info.plist`, if you've added the whole folder and it's blue in color, then you need to add it to the path.
* Check that the font is copied in the *Copy Bundle Resources* in *Build Phases*.
* Delete the build folder with `rm -rf ios/build`
* Recompile the project.
#### Android build fails on Windows for no good reason
Both npm and android file hierarchies tend to get very deep and even worse when you combine them. Since Windows file system has a max length, long file name addresses will result in numerous errors including `Execution failed for task ':react-native-vector-icons:processReleaseResources'`. So try to keep the path to your project folder as short as possible.
#### Wrong icons are shown after upgrading this package
You probably didn't update the font files linked to your native project after upgrading. However, this only applies to Android targets since iOS bundles the fonts when building the app (try to clean your build from Xcode if the problem exists). On android you can relink the project or you manually update the fonts. To have them automatically synced use the [gradle approach](https://github.com/oblador/react-native-vector-icons#option-with-gradle-recommended).
#### Some icons are missing after upgrading this package
Sometimes vendors decides to remove some icons from newer releases, this has nothing to do with this package. If you depend on an older version of a font you can add it as a [custom font](#custom-fonts).
## License
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).

15
src/vendor/react-native-vector-icons/SimpleLineIcons.js vendored
View File

@@ -9,10 +9,11 @@ import glyphMap from './glyphmaps/SimpleLineIcons.json';
const iconSet = createIconSet(glyphMap, 'simple-line-icons', 'SimpleLineIcons.ttf');
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;
export const {
Button,
TabBarItem,
TabBarItemIOS,
ToolbarAndroid,
getImageSource,
getImageSourceSync,
} = iconSet;

Some files were not shown because too many files have changed in this diff Show More