React-native-vector-icons: Crossed out box

Created on 31 May 2017 · 9Comments · Source: oblador/react-native-vector-icons

Hi,
I'm trying to import custom Icomoon font I have generated, but I keep getting crossed out box icon instead of icomoon icon. I copied font to android/app/src/main/assets/fonts, deleted the android/app/build folder.
recompiled the project, changed from f to F and vice versa, I do not have fontWeight or any style on Icon tag.

Is there anything else I could do?

Source

marijarahman

👍4

Most helpful comment

This worked for me.

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

import fontelloConfig from './config.json';
const Icon = createIconSetFromFontello(fontelloConfig, '', '<fontFileName>');

export default Icon;

pyjac on 15 Jun 2017

❤4 👍3 🎉2 😄2

All 9 comments

Does it work on iOS? How does your config.json file look like?

oblador on 11 Jun 2017

This worked for me.

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

import fontelloConfig from './config.json';
const Icon = createIconSetFromFontello(fontelloConfig, '', '<fontFileName>');

export default Icon;

pyjac on 15 Jun 2017

❤4 👍3 🎉2 😄2

My issue was I forgot to copy the font file to assets/fonts and the [X] got cached.

I proved it by changing com.oblador.vectoricons.VectorIconsModule and changing cacheFile.exists() to false

Pyrolistical on 23 Jul 2017

👍1

Issues with cache is mentioned in troubleshooting section of readme so closing this for now.

oblador on 30 Jul 2017

I don't see the mention of caching issue. The caching is on the phone, not in the build artifacts

Pyrolistical on 30 Jul 2017

Ah, right! Ideally it shouldn't cache incorrect icons all. iOS throws an error when the font is missing and I guess it would be good for android to do the same. Care to create a PR for this?

oblador on 30 Jul 2017

@Pyrolistical Could you make a PR with the needed changes?

oblador on 8 Oct 2017

sorry, not using this project atm

Pyrolistical on 13 Oct 2017

Hi all,

I've searched around the issue threads and I can't find a solution to the problem that @marijarahman describes, which I'm having with my project too. Here's some background info:

I made a custom font file (.ttf) using fontastic.me and saved it to the ./assets/fonts/ directory of my project. I installed the font correctly for iOS as per the installation instructions on the repo home page for RNVI and it works perfectly.

Unfortunately, I get a crossed out box when I launch the app on the android simulator, despite the font file being available within the android/app/src/main/assets/fonts folder. I've followed the manual android install instructions, I've cleared the cache on my simulator and I have no fontWeight style on my Icon (incase that should cause issues).

UPDATE

I created a new react native project to check out where I was going wrong using the react-native command line tools. I then followed the steps described in this article: Add custom icons to your react native application using this time fontello to create my .ttf and character mappings. I added my font assets directory to the package.json in the root directory of my new project. I then used react-native link and on first launch, the android simulator worked perfectly, whilst the iOS simulator had the error: Unrecognized font family "fontello". I opened up the .xcodeproj file within /ios and checked my info.plist and build phases and everything looked to be ok. So I rebuilt the project (cmd + b) and rerun react-native run-iosand it worked after that!

Problem solved!