You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
`react-native-vector-icons` support using custom icon sets if you do not want to use the icons which come bundled or if you want to add your own icons. It supports Fontello and IcoMoon to create custom fonts. We used icomoon to convert our svgs to a config which is readable by the library.
### Configuring your project to support custom iconsets.
The steps for the same are as follows:
* Create a resources folder where we will keep our custom fontfile(.ttf).
* Add this line in package.json: `"rnpm": { "assets": [ "resources/fonts" ] },`
* Do `react-native link`. This will copy your fontfiles to android and iOS resources folders.
That's it, you are done with the setup. Now we need to get the ttf file and place it inside the `resources/fonts` that we just created.
### How to generate .ttf fonts using icomoon:
* Open the [iconmoon application.](https://icomoon.io/app)
* Remove the current set and create a new empty set.
* Drag and drop your svg files on the tool.
* Select the files which you want to export. Select all if you want to export all the icons. After the selection, click generate font. This will download a zip file on your system.
//TODO: Add screenshot
### Setting up the framework
Install the NPM module using NPM or Yarn.
```js
npm install --save react-native-vector-icons
```
OR
```js
yarn add react-native-vector-icons
```
* The zip file will contain a selection.json file fonts folder containing a .ttf file. We only need these two files to use fonts in react-native.
### Configuring your project to support custom iconsets.
//TODO: Add screenshot
We will use IcoMoon to support custom icons/fonts. Icomoon is free and open source application which lets you convert a set of svg icons to fonts. It is a front end only app and does not upload your icons anywhere, so no privacy concerns!
* Put the JSON file (selection.json) in your app and create a file called CustomIcon.js and import the config.json which you exported in the previous step.
The steps for the configuration are as follows:
```js
import {createIconSetFromIcoMoon} from 'react-native-vector-icons';
7. Put the fontfile(.ttf) in `resources/fonts` folder and add the following script to the package.json:
```
"rnpm": {
"assets": [
"resources/fonts"
]
}
```
This script will copy the font files to both android and iOS folders. After this, whenever we want to update the fonts, we will do react-native link and the fonts will be copied/updated automatically to both android and iOS projects.
8. Put the JSON file (selection.json) in your app and create a file called CustomIcon.js and import the selection.json which you exported in the previous step.
```js
import {createIconSetFromIcoMoon} from 'react-native-vector-icons';
9. That's it, to use a font simply import the file as a react component and pass the icon name and size(optional) or even style.
```js
import CustomIcon from './components/CustomIcon.js'
<CustomIcon name='android' /> //To use the icon
<CustomIcon name='android' size={25} /> // To pass size
<CustomIcon name='android' style={styles.androidIcon} /> // To pass custom tyle
```
### Changing file names of the fontfile
The default name of the fontfile is `icomoon.ttf`. If you want to give a different name, go to Preferences after step 5 and change the name there before downloading. Also, make sure that if you change the fontfile name, give the same name to the set as well(by default its "Untitled Set")
It is not recommended to change the filename of `.ttf` fontfile after the setup/native linking. The filename gets written in `project.pbxproj` and `Info.plist` and the file gets copied to ` android/app/src/main/assets/fonts/` once you run the link command. If you wish to change the filename, you would need to take care of changing the above 2 files as well, and removing the unused icon from android folder which might cause problems if not done properly._
### How do I add/delete icons from the fontfile(.ttf)
You can easily change/delete the contents of fontfile. The tool just needs `selection.json` file, which defines the font configuration. The steps for the same are as follows:
1. Open [IcoMoon App](https://icomoon.io/app/#/select)
* After the editing is complete, generate a new fontfile by following the steps 5 and 6 mentioned above. Once you have the new fontfile and the new selection.json file, place them in their locations and do `react-native link`.
That's how you you change the icons. Pretty neat huh?
###### This will let us convert any svg image to font which is scalable, platform independent and easy to style. What else can you ask for, right?
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
