💡 Step 1 — Install the Transformer#

First things first, let’s add the dependency that will allow Metro to transform .svg files into React components:

1
yarn add react-native-svg-transformer

or, if you prefer npm:

1
npm install react-native-svg-transformer

That’s it. The real magic starts in the config.

⚙️ Step 2 — Update Your metro.config.js#

We need to tell Metro how to handle .svg files instead of treating them like regular assets. Here’s the full config that works perfectly with Expo or plain React Native:

1
const { getDefaultConfig } = require("expo/metro-config")
2

3
module.exports = (() => {
4
  const config = getDefaultConfig(__dirname)
5
  const { transformer, resolver } = config
6

7
  config.transformer = {
8
    ...transformer,
9
    getTransformOptions: async () => ({
10
      transform: {
11
        inlineRequires: true,
12
      },
13
    }),
14
    // 👇 The magic line
15
    babelTransformerPath: require.resolve("react-native-svg-transformer/expo"),
16
  }
17

18
  config.resolver = {
19
    ...resolver,
20
    // Remove `.svg` from asset extensions
21
    assetExts: resolver.assetExts.filter((ext) => ext !== "svg"),
22
    // Add `.svg` to source extensions
23
    sourceExts: [...resolver.sourceExts, "cjs", "svg"],
24
  }
25

26
  return config
27
})()

Now Metro will know how to parse .svg files as React components.

🧩 Step 3 — Add TypeScript Declarations#

If you’re using TypeScript, it’ll complain about importing SVGs unless you tell it what to expect. Create a declarations.d.ts file in your root directory and add:

1
declare module "*.svg" {
2
  import React from "react"
3
  import { SvgProps } from "react-native-svg"
4
  const content: React.FC<SvgProps>
5
  export default content
6
}

Now, TypeScript knows that .svg files are valid React components that accept SvgProps.

🧪 Step 4 — Set Up Jest (Optional but Handy)#

If you’re testing your components with Jest, you’ll need a mock for .svg imports. In your jest.config.ts, add:

1
transformer: {
2
  // your existing config
3
},
4
moduleNameMapper: {
5
  "\\.svg": "<rootDir>/__mocks__/svgMock.js",
6
},

Then, create a simple mock file in __mocks__/svgMock.js:

1
module.exports = "SvgMock"
2
module.exports.ReactComponent = "SvgMock"

Now your tests won’t break when SVGs are imported.

🧠 Step 5 — Try It Out#

Let’s add a test icon called menu.svg

Create a new file called svg.ts to export it easily:

1
import MenuSVG from "assets/svgs/menu.svg"
2
export { MenuSVG }

Now you can import it anywhere:

1
import { MenuSVG } from "path/to/svg"
2

3
<MenuSVG width={24} height={24} />

Clean and simple.

🎨 Step 6 — Add Custom Props to Your SVGs#

Want to dynamically change your SVG colors? Easy. Create a .svgrrc file at the root of your project and add:

1
{
2
  "replaceAttrValues": {
3
    "#000": "{props.fill}"
4
  }
5
}

This lets you override the hardcoded fill color in the SVG. Now you can do this:

1
<MenuSVG fill={colors.palette.neutral100} />

Boom 💥 — fully dynamic icons.

✅ Conclusion#

That’s it! You’ve just set up full SVG support in your React Native app — with Metro, TypeScript, Jest, and prop customization. No more converting icons or struggling with weird configs.

SVGs now behave like first-class React components — reusable, customizable, and perfect for a scalable design system.