CODEWITHSUNDEEP
react-nativefontsreact-native-vector-iconsicomoon
Sam
Sam

Reputation: 30330

Importing custom icons into React Native 0.62

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?

Upvotes: 10

Views: 10861

Answers (2)

Diyorbek Sadullaev
Diyorbek Sadullaev

Reputation: 477

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

Custom icon fonts with React Native

Upvotes: 2

OriHero
OriHero

Reputation: 1228

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

Upvotes: 1

Related Questions