Unrecognized font family 'ionicons'

[OsamaMohammed]

Description of the bug
In a newly initialized vue-native project, icons doesn't work and fires the error

Unrecognized font family 'ionicons'

Things I've tried so far...

• Initialize new project the latest versions
• downgrade expo
• installing react-native-vector-icons
• tried installing react-native and execute react-native link react-native-vector-icons
• Forcing Font.loadAsync to load the fonts from "@expo/vector-icons/build/vendor/react-native-vector-icons/Fonts" or from "native-base/Fonts"
• removed package-lock, node_modules, expo client and reinstalled them, and started the project with expo start -c

To Reproduce
Steps to reproduce the behavior:

vue-native init vueNativeTest

and use the below simple code

<template>
    <view class="container">
        <text class="text-color-primary">My Vue Native App</text>
        <Ionicons name="md-checkmark-circle" :size="50" />
    </view>
</template>

<script>
import Vue from "vue-native-core";
import { Ionicons, FontAwesome } from "@expo/vector-icons";

export default {
    components: {
        FontAwesome,
        Ionicons,
    },
    methods: {},
    created() {},
};
</script>

<style>
.container {
    background-color: white;
    align-items: center;
    justify-content: center;
    flex: 1;
}
.text-color-primary {
    color: blue;
}
.cRed {
    color: red;
}
</style>

What I expected
Icon to appear

Screenshots
https://imgur.com/a/NWpV89i

Did I use vue-native-cli to create the project?
Yes

Am I using Expo?
Yes

Development platform (please complete the following information):

• OS: Windows 10
• Shell/terminal: cmd

The device on which I run my Vue Native app

• Device: iPhone 7 & Samsung A01
• OS: iOS 13.5 and Android 10
  Expo Client latest version on time of writing

Additional context
Add any other context about the problem here.

{
    "@expo/vector-icons": "^12.0.2",
    "expo": "~40.0.0",
    "expo-font": "^8.4.0",
    "expo-status-bar": "~1.0.3",
    "native-base": "^2.13.15",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
    "react-native-svg": "^12.1.0",
    "react-native-vector-icons": "^7.1.0",
    "react-native-web": "~0.13.12",
    "vue-native-core": "^0.2.0",
    "vue-native-helper": "^0.2.0"
}

[RishabhKarnad]

Where does the code snippet live in the directory structure? Is it in App.vue?

I'm not sure if it's a Windows thing, but could you try running it from WSL?

[OsamaMohammed]

Where does the code snippet live in the directory structure? Is it in App.vue?

I'm not sure if it's a Windows thing, but could you try running it from WSL?

Its in App.vue and I was not able to run it from WSL, maybe I will try through linux later

EDIT: I noticed that in my React native projects the connected devices show up in the DevTool window, but in VueNative one doesn't show the connected devices, just building logs
EDIT 2: I ended up using React Native, even when you add VueNative to RN project break fonts.

[leonzuendel]

this is still an issue and i tried EVERY step from EVERY issue i found on several plattforms (not only git and even for only expo or react native) - it is still relevant and the documentation is literally useless and has so many errors that it's not even fun anymore...

icons are not showing due to the font family being unrecognized and loading them 1:1 like in the docs and i also tried several other ways - there not working alone and not in the (also so terribly bad documented) tab navigation

i never write issues myself but THIS drives me crazy. even a simple thing like that can't be documented right? seems like i'm giving up vue native at this point

[leonzuendel]

and btw i dont understand why all the relevant issues here are keep getting closed or ignored for months all the time (like for example the fact that expo web is not working - which makes half of this useless anyways)

[michug]

I'am also unable to make the icons works. Anyone had any luck?

[RishabhKarnad]

@OsamaMohammed @michug sorry for taking so long to reply. The Vue Native KitchenSink app has an example and uses a workaround for this issue

https://github.com/GeekyAnts/KitchenSink-Vue-Native/blob/master/src/boot/setup.vue

The workaround is to basically use a relative path to node_modules inside the require, instead of using the absolute path. The fonts are loaded here in advance.

Let me know if this works for you.

[michug]

@OsamaMohammed @michug sorry for taking so long to reply. The Vue Native KitchenSink app has an example and uses a workaround for this issue

https://github.com/GeekyAnts/KitchenSink-Vue-Native/blob/master/src/boot/setup.vue

The workaround is to basically use a relative path to node_modules inside the require, instead of using the absolute path. The fonts are loaded here in advance.

Let me know if this works for you.

Didnt work for me

[mahimranjan]

Running into the same issue. I have been struggling with this for the last 4 days. Tried everything. Downgrade/delete/recreate. No luck. Icons are not showing and "Unrecognized font family 'ionicons'" keeps popping up.

Any updates?

[michug]

@mahimranjan I couldn't, I cloned the kitchensink repo (repo link), and after some upgrades made it work locally, copied the same setup as that app but it doesn't work for me, I cant pinpoint what is what makes it work for them. Maybe you'll have better luck

[mahimranjan]

I can't even get the repo to work.

"Error: Asset not found: {****}/KitchenSink-Vue-Native/assets/App_Icon_4_No_Transparency.png for platform:"

@RishabhKarnad Are you guys still supporting vue-native?

[RishabhKarnad]

This seems to be an issue with Expo.
expo/expo#11333

This issue mentions it happens on SDK 40. I can't confirm right now if it happens with older SDKs.

A workaround mentioned in it seems to be working for some people. It will need to be done in a slightly different way with Vue Native. I'll try it out with the Vue Native Kitchen Sink app and update it if this solves it.

[mahimranjan]

@RishabhKarnad Any luck with SDK 40?

[RishabhKarnad]

The Kitchen Sink app has been updated to Expo SDK 40 and the fix for fonts has been added

• Use react-native-svg-transformer for SVG files (changes in vueTransformerPlugin.js)
• Use @expo/metro-config in metro.config.js
• Add new sourceExts to app.json (including .svg)
• Remove .svg from assetExts in metro.config.js

[mahimranjan]

Yes that worked! Thank you!!