Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

createIconSetFromIcoMoon - IOS - question marks #1357

Open
IvanKrt opened this issue Jun 22, 2021 · 4 comments
Open

createIconSetFromIcoMoon - IOS - question marks #1357

IvanKrt opened this issue Jun 22, 2021 · 4 comments

Comments

@IvanKrt
Copy link

IvanKrt commented Jun 22, 2021

Environment

"react-native": "0.64.2",
"react-native-vector-icons": "^8.1.0"
pod: 1.10.1

Description

Created custom icon set, and used it in the application. Android works fine, but in IOS devices, it shows question marks, instead of icons.
Added TTF file at every ./ios/... folders - didn't help.
myIcons.ttf is shown at Resources in XCode (12.4), and "Target Membership" is set to my project.
Already cleared cache, cleared build folder, used "react-native link" - didn't help.
At "project.pbxproj" my .ttf file is included. (everywhere, where my custom FONT .ttf files, btw font-family works fine on IOS, it shown my fonts, but icons- don't).

Here is my icon.js:

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

// also tried
export default createIconSetFromIcoMoon(icoMoonConfig);
-- no changes

Icon .ttf file is already in Build Phases -> Copy Bundle Resources.

NAMING is fine because android works good + names are similar as at my icon set at Icomoon website

@IvanKrt
Copy link
Author

IvanKrt commented Jun 22, 2021

Small update - if I enter a non-existing name (in my icon set) - it shows a question mark itself. But if I enter existed icon name - it displays as Question symbol inside the bordered square.

@danychi
Copy link

danychi commented Feb 22, 2022

I had exactly the same issue, I solved it by:

const icoMoonConfig = require('./path-to-your-ico-moon-config.json');

const Icon = createIconSetFromIcoMoon(icoMoonConfig);
// This step is essencial
Icon.loadFont();

@AKcrisAshish
Copy link

AKcrisAshish commented Dec 27, 2022

I am still facing this issue, Has anyone found the solution? @IvanKrt

@Xmaxer
Copy link

Xmaxer commented Sep 19, 2023

I had exactly the same issue, I solved it by:

const icoMoonConfig = require('./path-to-your-ico-moon-config.json');

const Icon = createIconSetFromIcoMoon(icoMoonConfig);
// This step is essencial
Icon.loadFont();

This should seriously be added to the readme. It's not obvious at all that I have to run this for iOS, but not Android when using custom fonts.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants