Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 5ad3b13

Browse files
authored
Svg icons screenshots updated (#11)
* Sag icons screenshots updated * Added giphy * chnage setup added * Finishing move🕵🏻
1 parent 66a8b94 commit 5ad3b13

File tree

14 files changed

+125
-45
lines changed

14 files changed

+125
-45
lines changed

‎book/12-svg-icons-using-react-native-vector-icons/12.1-creating-custom-iconset.md

Lines changed: 125 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -2,58 +2,138 @@
22

33
`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.
44

5-
### Configuring your project to support custom iconsets.
6-
7-
The steps for the same are as follows:
8-
9-
* Create a resources folder where we will keep our custom fontfile(.ttf).
10-
11-
* Add this line in package.json: `"rnpm": { "assets": [ "resources/fonts" ] },`
12-
13-
* Do `react-native link`. This will copy your fontfiles to android and iOS resources folders.
14-
15-
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.
16-
17-
### How to generate .ttf fonts using icomoon:
18-
19-
* Open the [iconmoon application.](https://icomoon.io/app)
20-
21-
* Remove the current set and create a new empty set.
22-
23-
![](/assets/icomoon-1.png)
24-
25-
* Drag and drop your svg files on the tool.
265

27-
![](/assets/icomoon2.png)
28-
29-
* 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.
30-
31-
//TODO: Add screenshot
6+
### Setting up the framework
7+
Install the NPM module using NPM or Yarn.
8+
```js
9+
npm install --save react-native-vector-icons
10+
```
11+
OR
12+
```js
13+
yarn add react-native-vector-icons
14+
```
3215

33-
![](/assets/icomoon3.png)
3416

35-
* 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.
17+
### Configuring your project to support custom iconsets.
3618

37-
//TODO: Add screenshot
19+
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!
3820

39-
* 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.
21+
The steps for the configuration are as follows:
4022

41-
```js
42-
import {createIconSetFromIcoMoon} from 'react-native-vector-icons';
43-
import icoMoonConfig from './config.json';
44-
export default createIconSetFromIcoMoon(icoMoonConfig);
45-
```
23+
* Create a resources folder where we will keep our custom fontfile(.ttf).
4624

47-
* Paste the .ttf file found inside the fonts folder in the downloaded zip to
48-
* For Android: `<projectRoot>/android/app/src/main/assets/fonts/`
49-
* For iOS: `<projectRoot>/ios/`
25+
* Do `react-native link`. This will setup the vector icons framework for you.
5026

51-
*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.
27+
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.
5228

53-
```js
54-
import CustomIcon from './components/CustomIcon.js'
29+
### How to generate .ttf fonts using icomoon:
5530

56-
<CustomIcon name='android' /> //To use the icon
57-
<CustomIcon name='android' size={25} /> // To pass size
58-
<CustomIcon name='android' style={styles.androidIcon} /> // To pass custom tyle
59-
```
31+
1. Open the [iconmoon application.](https://icomoon.io/app)
32+
33+
2. Remove the current set(if there is one) and create a new empty set and give your preferred name(Remember to give same name everywhere).
34+
<br>
35+
<div style="text-align:center">
36+
<img src="/assets/images/12/1.png" style="width: 80%;display:inline-block;" hspace="20">
37+
</div>
38+
<br>
39+
40+
3. Drag and drop your SVG files on the tool.
41+
<br>
42+
<div style="text-align:center">
43+
<img src="/assets/images/12/2.png" style="width: 80%;display:inline-block;" hspace="20">
44+
</div>
45+
<br>
46+
47+
4. Select the files which you want to export. Select all if you want to export all the icons.
48+
<br>
49+
<div style="text-align:center">
50+
<img src="/assets/images/12/3.png" style="width: 80%;display:inline-block;" hspace="20">
51+
</div>
52+
<br>
53+
54+
<br>
55+
<div style="text-align:center">
56+
<img src="/assets/images/12/4.png" style="width: 80%;display:inline-block;" hspace="20">
57+
</div>
58+
<br>
59+
60+
5. After the selection, click generate font. This will download a zip file on your system.
61+
<br>
62+
<div style="text-align:center">
63+
<img src="/assets/images/12/5.png" style="width: 80%;display:inline-block;" hspace="20">
64+
</div>
65+
<br>
66+
67+
6. 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.
68+
<br>
69+
<div style="text-align:center">
70+
<img src="/assets/images/12/6.png" style="width: 40%;display:inline-block;vertical-align: middle;margin:0" hspace="40">
71+
<img src="/assets/images/12/7.png" style="width: 40%;display:inline-block;vertical-align: middle;margin:0" hspace="40">
72+
</div>
73+
<br>
74+
75+
7. Put the fontfile(.ttf) in `resources/fonts` folder and add the following script to the package.json:
76+
77+
```
78+
"rnpm": {
79+
80+
"assets": [
81+
"resources/fonts"
82+
]
83+
}
84+
```
85+
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.
86+
87+
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.
88+
89+
```js
90+
import {createIconSetFromIcoMoon} from 'react-native-vector-icons';
91+
import icoMoonConfig from './selection.json';
92+
export default createIconSetFromIcoMoon(icoMoonConfig);
93+
```
94+
95+
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.
96+
97+
```js
98+
import CustomIcon from './components/CustomIcon.js'
99+
100+
<CustomIcon name='android' /> //To use the icon
101+
<CustomIcon name='android' size={25} /> // To pass size
102+
<CustomIcon name='android' style={styles.androidIcon} /> // To pass custom tyle
103+
```
104+
105+
### Changing file names of the fontfile
106+
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")
107+
108+
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._
109+
110+
### How do I add/delete icons from the fontfile(.ttf)
111+
112+
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:
113+
114+
1. Open [IcoMoon App](https://icomoon.io/app/#/select)
115+
116+
* Upload the current selection.json file.
117+
<br>
118+
<div style="text-align:center">
119+
<img src="/assets/images/12/8.png" style="width: 80%;display:inline-block;" hspace="20">
120+
</div>
121+
<br>
122+
123+
* Edit/Delete the icon using the tools on top. (Adding the Icon is same as step 3 mentioned above)
124+
<br>
125+
<div style="text-align:center">
126+
<img src="/assets/images/12/9.png" style="width: 80%;display:inline-block;" hspace="20">
127+
</div>
128+
<br>
129+
130+
* 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`.
131+
132+
That's how you you change the icons. Pretty neat huh?
133+
134+
135+
###### 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?
136+
<div style="text-align:center">
137+
<img src="/assets/images/12/giphy.gif" style="width: 80%;display:inline-block;" hspace="20">
138+
</div>
139+
<br>

‎book/assets/icomoon-1.png

-84.5 KB
Binary file not shown.

‎book/assets/icomoon2.png

-71.4 KB
Binary file not shown.

‎book/assets/icomoon3.png

-102 KB
Binary file not shown.

‎book/assets/images/12/1.png

395 KB
Loading[フレーム]

‎book/assets/images/12/2.png

104 KB
Loading[フレーム]

‎book/assets/images/12/3.png

155 KB
Loading[フレーム]

‎book/assets/images/12/4.png

149 KB
Loading[フレーム]

‎book/assets/images/12/5.png

231 KB
Loading[フレーム]

‎book/assets/images/12/6.png

49.9 KB
Loading[フレーム]

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /