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?