Hi Cedric, This is a fork of Ty's PR with very minor changes:
Added react-native-svg
and react-native-svg-transformer
to the mobile app.
Updated metro.config.js to support SVG imports
To support dynamic loading of svgs in packages/icons
, I borrowed Evan's metroRequire solution in that package. It required three files additions: metroRequire.d.ts, declarations.d.ts and adding these to tsconfig.
You will find two identical components <RootIcon>
that are loaded either locally from apps/mobile/components or from the custom package packages/icons.
When loaded locally from apps/mobile/app/(tabs)/index.tsx, the icon appears on both the ios simulator and web. However, when loaded from the package, it only loads in the ios simulator but returns an error when opening the app on web:
Error: ENOENT: no such file or directory, open '.../monorouter/packages/icons/build/svgs?ctx=eec2920c0e33152cbcb0ed6384415969ee28698e'
To test, simply switch the imports of RootIcon in apps/mobile/app/(tabs)/index.tsx.