Native generates invalid references to react-native-svg imports#929

<!-- Love SVGR? Please consider supporting our collective: 👉 https://opencollective.com/svgr/donate --> ## 🐛 Bug Report I just upgraded to the latest versions of SVGR and react-native-svg-transformer in my project that contains both web & React Native apps. Web works just fine, but React Native is now crashing with errors of this type: `Property 'LinearGradient' doesn't exist` (replace `'LinearGradient'` with several different exports from `react-native-svg`, depending on the SVG file used) It looks like the generated code misses a bunch of these imports: ```js var _react = _interopRequireDefault(_$$_REQUIRE(_dependencyMap[1], "react")); var _reactNativeSvg = _interopRequireWildcard(_$$_REQUIRE(_dependencyMap[2], "react-native-svg")); var _MUIIcon = _$$_REQUIRE(_dependencyMap[3], ...); var _jsxRuntime = _$$_REQUIRE(_dependencyMap[4], "react/jsx-runtime"); function _getRequireWildcardCache(e) { ... } function _interopRequireWildcard(e, r) { ... } var _default = exports.default = (0, _MUIIcon.withIcon)("IconComponent", function (color) { return (0, _jsxRuntime.jsxs)(_reactNativeSvg.default, { xmlns: "http://www.w3.org/2000/svg", width: 335, height: 112, viewBox: "0 0 335 112", children: [(0, _jsxRuntime.jsx)(_reactNativeSvg.Defs, { // GOOD import children: (0, _jsxRuntime.jsxs)(LinearGradient, { // BAD import -- this symbol doesn't exist in global scope. should be _reactNativeSvg.LinearGradient id: "a", x1: "50%", x2: "50%", y1: "0%", y2: "100%", children: [(0, _jsxRuntime.jsx)(Stop, { // another BAD import offset: "0%", stopColor: "#393D40" }), (0, _jsxRuntime.jsx)(Stop, { offset: "100%", stopColor: color })] }) }), (0, _jsxRuntime.jsx)(_reactNativeSvg.Path, { // GOOD import ... })] }); ``` For reference, here is my template: ```js // @ts-check /** @type {import('@svgr/babel-plugin-transform-svg-component').Template} */ module.exports = ({ componentName, jsx }, { tpl }) => tpl` import React from 'react'; // much like React, this Svg symbol must be in scope at runtime import Svg from 'react-native-svg'; import { withIcon } from '...'; // accept color as argument because RN does not support currentColor export default withIcon('${componentName.replace('Svg', 'Icon')}', color => ${jsx}); `; ``` ## Expected behavior all `react-native-svg` symbols are rewritten to import from the package. ## Link to repl or repo (highly encouraged) Looks like the source code here may not support all import rewrites? https://github.com/gregberge/svgr/blob/0ae0413eaef2442af129bfc88847867d0ab8afa5/packages/babel-plugin-transform-svg-component/src/variables.ts#L132-L136 ## Run `npx envinfo --system --binaries --npmPackages @svgr/core,@svgr/cli,@svgr/webpack,@svgr/rollup --markdown --clipboard` Paste the results here: ```bash ## System: - OS: macOS 14.2 - CPU: (10) arm64 Apple M1 Max - Memory: 1.70 GB / 32.00 GB - Shell: 5.9 - /bin/zsh ## Binaries: - Node: 18.18.0 - ~/.nvm/versions/node/v18.18.0/bin/node - Yarn: 1.22.19 - ~/.nvm/versions/node/v18.18.0/bin/yarn - npm: 9.8.1 - ~/.nvm/versions/node/v18.18.0/bin/npm - pnpm: 8.12.1 - ~/.nvm/versions/node/v18.18.0/bin/pnpm - bun: 1.0.0 - ~/.bun/bin/bun ```