Unrecognized font family 'ionicons'

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]

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

[RishabhKarnad]

This seems to be an issue with Expo. https://github.com/expo/expo/issues/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.