How to use SVGs in React Native

Table of contents

We love SVGs

SVGs are a great way to create scalable graphics for your applications. They are lightweight, easy to use, and can be styled easily. Unfortunately, React Native does not support SVGs out of the box. In this post, I will show you how to use SVGs in React Native.

Guide to using SVGs in React Native

We will use a library called react-native-svg-transformer to render SVGs in React Native. This library allows us to import SVG files in components of our React Native project, just the same way as we would do in a React application. I first want to show how the end result will be:

import CemKirayLogo from "./ck-logo.svg";

function Header() {
  return (
    <View>
      <CemKirayLogo width={100} height={100} />
    </View>
  );
}

Easy as that! Now let’s see how we can achieve this.

1. First, install react-native-svg (which is a dependency of react-native-svg-transformer), then install react-native-svg-transformer:

npx expo install react-native-svg
npm install --save-dev react-native-svg-transformer

Note: This post assumes you are using Expo. If you are not using Expo, or you get stuck at some point, make sure to check the official documentation of react-native-svg-transformer. Check this section

2. Configure your metro.config.js file to use the transformer: (If you don’t have a metro.config.js file, create one in the root of your project, and add the following code to it.)

Note: If you have an existing metro.config.js file, you can merge the configuration with the existing one. Make sure to include everything from the existing configuration.

// metro.config.js
const { getDefaultConfig } = require("expo/metro-config");

module.exports = (() => {
  const config = getDefaultConfig(__dirname);

  const { transformer, resolver } = config;

  config.transformer = {
    ...transformer,
    babelTransformerPath: require.resolve("react-native-svg-transformer"),
  };
  config.resolver = {
    ...resolver,
    assetExts: resolver.assetExts.filter(ext => ext !== "svg"),
    sourceExts: [...resolver.sourceExts, "svg"],
  };

  return config;
})();

This configuration tells Metro to use the react-native-svg-transformer for .svg files. Since we updated the metro configuration, you better restart the Expo server to apply the changes.

3. Now you can import SVG files in your components:

import CemKirayLogo from "./ck-logo.svg";

function Header() {
  return (
    <View>
      <CemKirayLogo width={100} height={100} />
    </View>
  );
}

And that’s it! If you are using TypeScript, you might get an error. Check the next section to see how to fix it.

How to use SVG as React components with TypeScript

If you are (hopefully) using TypeScript, you will get an error:

Cannot find module ‘./ck-logo.svg’ or its corresponding type declarations.ts(2307)

We should let TypeScript know about our SVGs; we will create a declaration file in the root of the app, named custom.d.ts (the name is arbitrary) and add the following code to it:

declare module "*.svg" {
  const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
  export default content;
}

This declaration tells TypeScript that any file with the .svg extension should be treated as a React component that accepts SVG attributes.

Extra Tips

How to color SVGs

There is a very handy way to color SVGs easily in React Native. First, in your .svg file, make sure all attributes that you want to color are set to currentColor. Then, in your component, you can use the color prop to change the color of the SVG:

<CemKirayLogo width={100} height={100} color="red" />

Where to find SVGs

Recently I came across a great website called Flowbite Icons. It has a vast collection of free SVGs that you can use in your projects. You can even copy the SVG icon as JSX code, which is very handy for web projects!

Stuck at something?

Make sure to check out up-to-date documentation of react-native-svg-transformer to see if there are any changes or updates. You can also reach me out on one of the links below.