In a React Native app bundled by Metro, how do you import SVG icon files as components, and why does babelTransformerPath matter?

## Why an SVG import does not just work A design team hands over icons as `.svg` files and wants to use them like components: `<Logo width={24} height={24} />`. Out of the box that fails for two separate reasons. 1. **Metro classifies `.svg` as an asset.** `svg` sits in Metro's default `resolver.assetExts` list next to `png` and `jpg`. An asset import is not compiled; it becomes a reference to a file copied into the app, which `Image` can load by source. 2. **React Native core cannot draw SVG.** There is no vector-drawing component in `react-native`. The `react-native-svg` library supplies `Svg`, `Path`, `Circle`, `Rect` and the other primitives as native views. So a working setup needs both a renderer (`react-native-svg`) and a build step that turns SVG markup into a component made of those primitives. ## Where babelTransformerPath comes in Metro's transform worker compiles each source file by calling the module named in **`transformer.babelTransformerPath`**. React Native points it at `@react-native/metro-babel-transformer`; Expo points it at its own. That makes it the natural hook for a custom file type: a replacement transformer receives `{ src, filename, options }` for every file, and can do something different for one extension. An SVG transformer does exactly this: - if `filename` ends in `.svg`, it converts the markup into JavaScript source for a component built from `react-native-svg` primitives, then compiles that source with Babel; - for every other file, it **delegates to the upstream transformer**, so JSX, TypeScript and your Babel config keep working. The community package for this is `react-native-svg-transformer`. ## The configuration, step by step 1. Install `react-native-svg` (it has native code, so a bare app or development build must be rebuilt) and the SVG transformer package. 2. In `metro.config.js`, set `transformer.babelTransformerPath` to the transformer. 3. Remove `svg` from `resolver.assetExts` and add it to `resolver.sourceExts`, so Metro sends `.svg` files to the transformer instead of copying them as assets. 4. Add a TypeScript declaration so `import Logo from './logo.svg'` type-checks. 5. Restart Metro with a clean cache: the transform configuration changed, and cached output for existing files must not be reused. Step 3 is the one people forget. With `babelTransformerPath` changed but `svg` still in `assetExts`, the transformer is never called for `.svg` files and the import still yields an asset reference. ## The Expo wrinkle `getDefaultConfig` from `expo/metro-config` already sets `babelTransformerPath` to `@expo/metro-config/babel-transformer`, so that `babel-preset-expo` and its web and server handling always apply. Overwriting the key with a transformer that delegates to the bare React Native transformer silently drops Expo's. Expo's documentation says to extend its transformer instead: a custom transformer handles `.svg` and passes everything else to `require('@expo/metro-config/babel-transformer').transform(...)`. ## Alternatives and tradeoffs | Approach | How it works | Cost | |---|---|---| | Transformer | `.svg` becomes a component at build time | Metro config to maintain; must match your framework's upstream transformer | | Pre-converted components | Convert SVGs to `.tsx` once (the Expo docs point to SVGR) and commit them | No build hook, but regenerate on every design change | | Raster assets | Export PNGs at `@2x`/`@3x` | No vector scaling or runtime colour changes | The transformer wins when icons change often and designers own the files. Pre-converted components win when the icon set is small and stable, or when a team wants no custom Metro configuration. ## Common failure modes - Icons render as nothing or an import error appears: `svg` is still an asset extension. - Every JSX file breaks after the change: the custom transformer does not delegate non-SVG files. - Expo-specific behaviour disappears: the replacement delegates to the React Native transformer instead of Expo's. - It works after a fix only on some machines: Metro was not restarted with a clean cache. - Tests fail on the new imports: Jest does not use Metro's transformer, so `.svg` files need their own mapping in the Jest config. ## What interviewers listen for A good answer separates the two problems (Metro's asset classification and the missing renderer), names `babelTransformerPath` as the hook, remembers the extension lists, and knows that in Expo the custom transformer has to chain to Expo's rather than replace it.