Search code examples
react-nativesvgreact-native-vector-icons

Custom font icons are showing cross in box in react-native

I am trying to use Custom fonts in react native. Converted SVG's in custom icon set using Icomoon and tried all the steps from https://www.reactnative.guide/12-svg-icons-using-react-native-vector-icons/12.1-creating-custom-iconset.html.

react-native-vector-icons was installed already.

used react-native link react-native-vector-icons to setup the vector icons framework for the project.

Placed the selection.json and Icomoon.ttf files in assets/fonts folder.

And added "rnpm": { "assets": [ "resources/fonts" ] } in package.json file

Created CustomIcon.js file and added

import {createIconSetFromIcoMoon} from 'react-native-vector-icons';
import icoMoonConfig from './selection.json';
export default createIconSetFromIcoMoon(icoMoonConfig);

In App.js file added following

import CustomIcon from './components/CustomIcon.js'

<CustomIcon name='accounts' size={50} /> //To use the icon

And the Icon is showing ☒ at the icon place.

If anyone have solution please share, Thank you.

Solution

  • I've tried a lot but didn't get solution but finally I got the solution whenever I used react-native link react-native-vector-icons command it didn't worked properly. So I checked font folder in android/app/src/main/assets/font and I found that my icomoon font file wasn't present there. So I copied the file and manually pasted at the location and it worked .