I have created custom icons. If I try to use the icons in App.js it works fine. I want to use them in my other files. What is the proper way of doing it?

import { createIconSetFromIcoMoon } from "@expo/vector-icons";

const Icon = createIconSetFromIcoMoon(
  require("./components/SVGComponents/selection.json"),
  "IcoMoon",
  "icomoon.ttf"
);

const fetchFonts = () => {
  return Font.loadAsync({
    ...

    //icons font
    IcoMoon: require("./components/SVGComponents/icomoon.ttf"),
  });
};


export default function App() {
  const [isFontLoaded, setIsFontLoaded] = useState(false);
  if (!isFontLoaded) {
    return (
      <AppLoading
        startAsync={fetchFonts}
        onFinish={() => setIsFontLoaded(true)}
        }
      />
    );
  }
...
}

I tried creating an Icon component, importing it in the App.js file and then using it in other component of mine but I am getting the following errors :

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

AppLoading threw an unexpected error when loading: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

//Icon.js
import { createIconSetFromIcoMoon } from "@expo/vector-icons";


const fetchFonts = () => {
  return Font.loadAsync({
   ...

    //icons font
    IcoMoon: require("./components/SVGComponents/icomoon.ttf"),
  });
};

export default Icon = createIconSetFromIcoMoon(
  require("./components/SVGComponents/selection.json"),
  "IcoMoon",
  "icomoon.ttf"
);

//in App.js
import Icon from "./components/SVGComponents/Icon";

Also tried with export const Icon and import {Icon} , got the same error

in the component i want to use icons:

<Icon name="Back" color="green" size={44}></Icon>

What did the job - exporting Icon from App.js and importing it in the component I want to use it like that:

import { Icon } from "../../App";

but I am not sure it's a good idea to use it this way. How would you suggest I use it?