search

oblador / react-native-vector-icons

Customizable Icons for React Native with support for image source and full styling.
https://oblador.github.io/react-native-vector-icons/
MIT License
17.31k stars 2.12k forks source link

[iOS/iPadOS] - icons/icon font not loading correctly #1487

Closed coolersham closed 1 year ago

coolersham commented 1 year ago

Summary

When using this package, not a single icon loads and instead a question mark is rendered (it is even coloured in the correct way).

I am using the latest version of the package in connection with the new react-native architecture on version 0.71.2. Fabric renderer and concurrency are additionally enabled.

All steps in the documentation were considered but the outcome is still the same.

The icons are displayed as following:

showcase

Android devices are not affected by this issue.

What platform does this occur on?

iOS

Environment

@expo/webpack-config: 0.17.4 babel-preset-expo: 9.2.2 expo: 48.0.0-beta.0 (also on 47.X.X) react: 18.2.0 react-dom: 18.2.0 react-native: 0.71.2 react-native-web: 0.18.12 react-native-vector-icons: 9.2.0 (even with the latest commit/status of the repository)

Example

import MaterialCommunityIcon from "react-native-vector-icons/MaterialCommunityIcons"

[...]

<MaterialCommunityIcon color="blue" name="close" size={24} />
jrods commented 1 year ago

I'm having a similar issue iOS since updating to the latest React-Native version (0.71.2), beforehand it was working fine but now I get an error popup saying its trying to use 'FontAwesome5Free-Solid':

coolersham commented 1 year ago

@jrods Strangely I am not even receiving such or any kind of error that would indicate that the font cannot be loaded or found.

coolersham commented 1 year ago

Strangely it only affects following icon sets: EvilIcons, Octicons, Zocial, MaterialIcons, MaterialCommunityIcons and Foundation.

qwertynik commented 10 months ago

@coolersham facing the similar issue. Did you manage to resolve the issue?

qwertynik commented 10 months ago

This ended up working. Deleted all build files, node_modules. Setup the project from scratch and then followed the steps in README. Except that instead of dragging and dropping the folder, imported the Fonts folder.

tmaly1980 commented 3 months ago

I had the same exact problem, but rather than dragging Fonts from node_modules/react-native-vector-icons into XCode, I had to create a Fonts group/folder in xcode first, then drag the TTF files into there. THEN it worked. The instructions need to be updated.