diff --git a/book/12-svg-icons-using-react-native-vector-icons/12.1-creating-custom-iconset.md b/book/12-svg-icons-using-react-native-vector-icons/12.1-creating-custom-iconset.md index 64ee72d..baacfd8 100644 --- a/book/12-svg-icons-using-react-native-vector-icons/12.1-creating-custom-iconset.md +++ b/book/12-svg-icons-using-react-native-vector-icons/12.1-creating-custom-iconset.md @@ -2,58 +2,138 @@ `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. - -![](/assets/icomoon-1.png) - -* Drag and drop your svg files on the tool. -![](/assets/icomoon2.png) - -* 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 +``` -![](/assets/icomoon3.png) -* 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'; -import icoMoonConfig from './config.json'; -export default createIconSetFromIcoMoon(icoMoonConfig); -``` +* Create a resources folder where we will keep our custom fontfile(.ttf). -* Paste the .ttf file found inside the fonts folder in the downloaded zip to - * For Android: `/android/app/src/main/assets/fonts/` - * For iOS: `/ios/` +* Do `react-native link`. This will setup the vector icons framework for you. -* 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. +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. -```js -import CustomIcon from './components/CustomIcon.js' +### How to generate .ttf fonts using icomoon: - //To use the icon - // To pass size - // To pass custom tyle -``` +1. Open the [iconmoon application.](https://icomoon.io/app) + +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). +
+
+ +
+
+ +3. Drag and drop your SVG files on the tool. +
+
+ +
+
+ +4. Select the files which you want to export. Select all if you want to export all the icons. +
+
+ +
+
+ +
+
+ +
+
+ +5. After the selection, click generate font. This will download a zip file on your system. +
+
+ +
+
+ +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. +
+
+ + +
+
+ +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'; + import icoMoonConfig from './selection.json'; + export default createIconSetFromIcoMoon(icoMoonConfig); + ``` + +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' + + //To use the icon + // To pass size + // 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) + +* Upload the current selection.json file. +
+
+ +
+
+ +* Edit/Delete the icon using the tools on top. (Adding the Icon is same as step 3 mentioned above) +
+
+ +
+
+ +* 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? +
+ +
+
diff --git a/book/assets/icomoon-1.png b/book/assets/icomoon-1.png deleted file mode 100644 index d2c28be..0000000 Binary files a/book/assets/icomoon-1.png and /dev/null differ diff --git a/book/assets/icomoon2.png b/book/assets/icomoon2.png deleted file mode 100644 index de4304c..0000000 Binary files a/book/assets/icomoon2.png and /dev/null differ diff --git a/book/assets/icomoon3.png b/book/assets/icomoon3.png deleted file mode 100644 index 3f4c4ff..0000000 Binary files a/book/assets/icomoon3.png and /dev/null differ diff --git a/book/assets/images/12/1.png b/book/assets/images/12/1.png new file mode 100644 index 0000000..d16a009 Binary files /dev/null and b/book/assets/images/12/1.png differ diff --git a/book/assets/images/12/2.png b/book/assets/images/12/2.png new file mode 100644 index 0000000..fb87c65 Binary files /dev/null and b/book/assets/images/12/2.png differ diff --git a/book/assets/images/12/3.png b/book/assets/images/12/3.png new file mode 100644 index 0000000..a2d70f7 Binary files /dev/null and b/book/assets/images/12/3.png differ diff --git a/book/assets/images/12/4.png b/book/assets/images/12/4.png new file mode 100644 index 0000000..7a405f7 Binary files /dev/null and b/book/assets/images/12/4.png differ diff --git a/book/assets/images/12/5.png b/book/assets/images/12/5.png new file mode 100644 index 0000000..7135b36 Binary files /dev/null and b/book/assets/images/12/5.png differ diff --git a/book/assets/images/12/6.png b/book/assets/images/12/6.png new file mode 100644 index 0000000..ccbdcd4 Binary files /dev/null and b/book/assets/images/12/6.png differ diff --git a/book/assets/images/12/7.png b/book/assets/images/12/7.png new file mode 100644 index 0000000..71ab8ec Binary files /dev/null and b/book/assets/images/12/7.png differ diff --git a/book/assets/images/12/8.png b/book/assets/images/12/8.png new file mode 100644 index 0000000..0b024a8 Binary files /dev/null and b/book/assets/images/12/8.png differ diff --git a/book/assets/images/12/9.png b/book/assets/images/12/9.png new file mode 100644 index 0000000..c711c3c Binary files /dev/null and b/book/assets/images/12/9.png differ diff --git a/book/assets/images/12/giphy.gif b/book/assets/images/12/giphy.gif new file mode 100644 index 0000000..b63ecc3 Binary files /dev/null and b/book/assets/images/12/giphy.gif differ

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