9

I'm trying to import and use my own custom icons in my React Native 0.62.2 app.

I followed the steps outlined here https://github.com/oblador/react-native-vector-icons#custom-fonts but so far the icons are not showing up.

Here are the steps I followed:

  1. Created my icon set and converted it to fonts on https://icomoon.io
  2. Downloaded the zip file from IcoMoon and placed the ttf file into ./src/assets/fonts folder
  3. I then created react-native-config.js file and placed in the root. The code in this file is down below
  4. Under my components folder, I created CustomIcon.js -- see code below
  5. I also placed the selection.json file that was included in the zip file I downloaded from IcoMoon in the same folder as CustomIcon.js
  6. I then used the CustomIcon as shown below

So here what the codes look like:

The react-native-config.js file looks like this:

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

The CustomIcon.js file looks like this:

import { createIconSetFromIcoMoon } from 'react-native-vector-icons';

import icoMoonConfig from './selection.json';
export default createIconSetFromIcoMoon(icoMoonConfig, 'StreamLine', '../../../assets/fonts/streamline-icon-set-1.ttf');

And here's how I use the icon:

import CustomIcon from '../common_components/fonts/CustomIcon';

<CustomIcon name="home-outline" />

When I run the app in Android Emulator, I see the missing icon symbol i.e. a box with an X in it.

Any idea what the issue is here?

Sam
  • 26,817
  • 58
  • 206
  • 383

2 Answers2

2

There is a really good article which helped me with this problem.

Custom icon fonts with React Native

Diyorbek Sadullaev
  • 453
  • 4
  • 10
1

There is always issue with custom icons. When I personally bump into such condition I do these:

Rename the react-native-config.js to react-native.config.js

Re-run the app by restarting metro

Make sure I have correct path to my assets in react-native.config.js

react-native link and restart. It copies your assets to corresponding ios and android folders

If neither do not help I copy the assets manually to folder: Project/android/app/src/main/assets/fonts

Community
  • 1
  • 1
OriHero
  • 1,168
  • 1
  • 10
  • 24
  • Done all of these and still the icons won't show. This does seem like a common problem! I'd appreciate any other suggestions you may have. – Sam May 15 '20 at 18:04
  • Do you see your fonts in this folder? `Project/android/app/src/main/assets/fonts` – OriHero May 15 '20 at 18:05
  • Yes, they’re there – Sam May 15 '20 at 18:06
  • Then watch your `config.js` there might be incorrect imports or the icon might be defined twice. – OriHero May 15 '20 at 18:07
  • Which `config.js`? The `react-native.config.js`? – Sam May 15 '20 at 22:21
  • Do I need to install the `react-native-config` `npm` package? In the instructions, it said create a `react-native-config.js` file and I did. Do I need to configure anything in the app for this file to be read? – Sam May 15 '20 at 22:22
  • Sorry I mean selection.json file. Observe that file there might me incorrect configs or duplicate imports! – OriHero May 16 '20 at 04:26
  • I have created a new app to reproduce the bug. The bug here is you have named `react-native-config.js` but it should be `react-native.config.js`. Rename it and repeat above steps! – OriHero May 19 '20 at 10:50