Custom Icon Set Problem with React-native-vector-icons + Icomoon

Question

I want to use my custom icons with react-native-vector-icons and Icomoon. I generated .tff and selection.js with Icomoon and put them into my project with react-native-link but The icons that I tried to use seen as empty square.

I will share with you my code and screenshoot.

Here is my import code

import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
import selectionConfig from "../selection.json"
const Icon = createIconSetFromIcoMoon(selectionConfig,"icomoon","icomon.ttf");
<Icon name="bag" size={64} />

This is my package.json edit:

 "rnpm": {
    "assets": [
        "resources/fonts"
    ]
},

And this is the screenshot of icon: Screenshot

Note: I put my font files under "./resources/fonts" and put selection.json under my "src" folder and I used "react-native link react-native-vector-icons" code for link these"

How Can I solve this issue?

Answer 1

I think maybe you have forgetten to run react native link, if you did and still does not show the icon, try delete the build file and retry.

There are two way to get your custom icon working, if linking does not help you, you may try the manual way.

This answer is referenced here: https://medium.com/bam-tech/add-custom-icons-to-your-react-native-application-f039c244386c

a) React Native link

1. Put your .ttf in a ./resources/fonts folder at the base of your project

2. Add this piece of code at the first level of your package.json :

   "rnpm": { "assets": [ "resources/fonts" ] },

3. In your terminal: react-native link

b) Manual

Android: Copy your .ttf inside the ./android/app/src/main/assets/fonts folder of your RN project.

If it still does not show

delete android build folder and rerun

Answer 2

I had similar issues and it's because the rnpm in the package is depreciated, I solved it by creating react-native.config.js file and then I did run the link command:

Here is react-native.config.js file.

module.exports = {
  project: {
    ios: {},
    android: {},
  },
  assets: ['./resources/fonts'],
};

After creating a file and adding the above code snippet, run the following command:

react-native link

Answer 3

If you prefer to use icons as SVG, there is an easier way to do this. I hope react-icomoon will be of use to you.

Create Icon component

import IcoMoon from "react-icomoon";
import { Svg, Path } from "react-native-svg";
const iconSet = require("./selection.json");

const Icon = (props) => (
  <IcoMoon
    native
    SvgComponent={Svg}
    PathComponent={Path}
    iconSet={iconSet}
    {...props}
  />
);

export default Icon;

Then use

import Icon from "./Icon";

<Icon icon="pencil" size={20} color="orange" />