He creado iconos personalizados. Si trato de usar los íconos en App.js, funciona bien. Quiero usarlos en mis otros archivos. ¿Cuál es la forma correcta de hacerlo?
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)} } /> ); } ... }Intenté crear un componente Icon, importarlo en el archivo App.js y luego usarlo en otro componente mío, pero recibo los siguientes errores:
Advertencia: React.jsx: el tipo no es válido: esperaba una cadena (para componentes integrados) o una clase/función (para componentes compuestos) pero obtuvo: objeto. Probablemente olvidó exportar su componente desde el archivo en el que está definido, o puede haber mezclado las importaciones predeterminadas y con nombre.
AppLoading arrojó un error inesperado al cargar: Error: el tipo de elemento no es válido: esperaba una cadena (para componentes integrados) o una clase/función (para componentes compuestos) pero obtuvo: objeto. Probablemente olvidó exportar su componente desde el archivo en el que está definido, o puede haber mezclado las importaciones predeterminadas y con nombre.
//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";También probé con export const Icon e import {Icon} , obtuve el mismo error
en el componente quiero usar iconos:
<Icon name="Back" color="green" size={44}></Icon>¿Qué hizo el trabajo? Exportar el ícono de App.js e importarlo en el componente. Quiero usarlo así:
import { Icon } from "../../App";pero no estoy seguro de que sea una buena idea usarlo de esta manera. ¿Cómo sugieres que lo use?
Lo resolvió así:
//Icon.js import { createIconSetFromIcoMoon } from "react-native-vector-icons"; export default createIconSetFromIcoMoon( require("./selection.json"), "IcoMoon", "icomoon.ttf" );En el archivo quiero usar el icono:
import Icon from "../SVGComponents/Icon";
Después
//App.js 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)} onError={(err) => console.log("App => fetchFonts, <AppLoading> => " + err) } /> ); ... }en una carpeta llamada SVGComponents he colocado el archivo de fuente del icono - icomoon.ttf, los iconos - selection.json, el componente de icono personalizado - Icon.js