README.md

react-native-svg-transformer

Load SVG files in React Native.

Demo app: react-native-svg-example

Installation and configuration

Step 1: Install react-native-svg library

Make sure that you have installed and linked react-native-svg library:

• https://github.com/react-native-community/react-native-svg#installation

Step 2: Install react-native-svg-transformer library

yarn add --dev react-native-svg-transformer

Step 3: Configure the react native packager

For React Native v0.57 or newer

Add this to your rn-cli.config.js (create the file if it does not exist already):

const { getDefaultConfig } = require("metro-config");

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts }
  } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve("react-native-svg-transformer")
    },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== "svg"),
      sourceExts: [...sourceExts, "svg"]
    }
  };
})();

For React Native v0.56 or older

React Native versions older than 0.57 do not support running the transformer for .svg file extension. That is why a .svgx file extension should be used instead for your SVG files. This is fixed in React Native 0.57 and newer versions.

Add this to your rn-cli.config.js (create the file if it does not exist already):

module.exports = {
  getTransformModulePath() {
    return require.resolve("react-native-svg-transformer");
  },
  getSourceExts() {
    return ["js", "jsx", "svgx"];
  }
};

...or if you are using Expo, in app.json:

{
  "expo": {
    "packagerOpts": {
      "sourceExts": ["js", "jsx", "svgx"],
      "transformer": "node_modules/react-native-svg-transformer/index.js"
    }
  }
}

Usage

Import your .svg file inside a React component:

import Logo from "./logo.svg";

You can then use your image as a component:

<Logo width={120} height={40} />

If you use React Native version 0.56 or older, you need to rename your .svg files to .svgx.

Dependencies

In addition to React Native, this transfomer depends on the following libraries:

• react-native-svg
• react-native-svg-loader