expo / expo/vector-icons

Incompatibility with expo-font plugin

Open
#355 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
743
Forks
123
PR merge metrics
No merged PRs in 30d

Description

To avoid showing invisible icons on my app's initial load I decided to use the expo-font config plugin like below in my app.json

```json
{
"expo": {
"plugins": [
[
"expo-font",
{
"fonts": [
"node_modules/@expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/Ionicons.ttf",
"node_modules/@expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/Fontisto.ttf"
]
}
]
]
}
}
```

This correctly creates Ionicons.ttf and Fontisto.ttf assets on android. However the fontName being used on the createIconSet for Ionicons is lowercase [ionicons](https://github.com/expo/vector-icons/blob/master/src/Ionicons.ts#L7), in contrast to uppercase for [Fontisto](https://github.com/expo/vector-icons/blob/master/src/Fontisto.ts#L11).

This results in [fontIsLoaded](https://github.com/expo/vector-icons/blob/master/src/createIconSet.tsx#L173) incorrectly resolving to false for Ionicons and correctly resolving to true for Fontisto. In the [isLoadedNative](https://github.com/expo/expo/blob/main/packages/expo-font/src/memory.ts#L16) function from expo-font the fontFamily is `ionicons` and `Fontisto`, and the [loadedNativeFonts](https://github.com/expo/expo/blob/main/packages/expo-font/src/memory.ts#L20) has `Ionicons` and `Fontisto`.

Which leads to Ionicons still being [loaded asynchronously](https://github.com/expo/vector-icons/blob/master/src/createIconSet.tsx#L178) despite being bundled, in contrast to Fontisto which correctly renders straight away. This causes a flicker where ionicons show the invisible fallback icon on the app's initial load, defeating the purpose of bundling fonts via the config plugin.

This mismatch in the fontName being used in the createIconSet occurs in multiple icons besides Ionicons. So the fix for this would be going through all the icons and ensuring the fontName being used in the createIconSet is in line with the file name/fontFamily name of the ttf files. Which I am happy to do if my deduction is correct and there isn't a reason it has been named these way.

Here is a list of the fontName used in for the createIconSet function for all the [fonts](https://github.com/expo/vector-icons/tree/master/build/vendor/react-native-vector-icons/Fonts)

```
LOG [IconSet] Initializing: material-community
LOG [IconSet] Initializing: anticon
LOG [IconSet] Initializing: entypo
LOG [IconSet] Initializing: evilicons
LOG [IconSet] Initializing: feather
LOG [IconSet] Initializing: Fontisto
LOG [IconSet] Initializing: FontAwesome
LOG [IconSet] Initializing: FontAwesome5Free-Brand
LOG [IconSet] Initializing: FontAwesome5Free-Light
LOG [IconSet] Initializing: FontAwesome5Free-Regular
LOG [IconSet] Initializing: FontAwesome5Free-Solid
LOG [IconSet] Initializing: FontAwesome6Brands-Regular
LOG [IconSet] Initializing: FontAwesome6Free-Light
LOG [IconSet] Initializing: FontAwesome6Free-Regular
LOG [IconSet] Initializing: FontAwesome6Free-Solid
LOG [IconSet] Initializing: FontAwesome6Sharp-Regular
LOG [IconSet] Initializing: FontAwesome6Sharp-Light
LOG [IconSet] Initializing: FontAwesome6Sharp-Solid
LOG [IconSet] Initializing: FontAwesome6Duotone-Solid
LOG [IconSet] Initializing: FontAwesome6Free-Thin
LOG [IconSet] Initializing: foundation
LOG [IconSet] Initializing: ionicons
LOG [IconSet] Initializing: material
LOG [IconSet] Initializing: octicons
LOG [IconSet] Initializing: simple-line-icons
LOG [IconSet] Initializing: zocial
```

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with the font names in src/Ionicons.ts and src/Fontisto.ts, then compare the other icon entry points with the font files under build/vendor/react-native-vector-icons/Fonts. Read createIconSet.tsx alongside expo-font's memory.ts to confirm how fontIsLoaded and loadedNativeFonts compare names. Done means bundled fonts use matching names and no longer load asynchronously when the config plugin includes them.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react-native
Domain
mobile-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.