react-native-svg-transformer - Integrate SVG Files in React Native Projects with Ease

Introduction to react-native-svg-transformer

In modern app development, particularly when working with React Native, one often encounters the need to utilize SVG graphics. SVGs, with their scalability and crisp visual quality, are ideal for icons, logos, and illustrations. However, integrating SVG files seamlessly in both React Native and web applications can be somewhat challenging. This is where the react-native-svg-transformer library comes into play as it bridges this gap effectively.

Overview

The react-native-svg-transformer allows developers to import SVG files into a React Native project just as easily as they would in a standard web application. This is similar to using tools like SVGR, which convert SVG images into React components for the web. Through this transformer, you can maintain a consistent codebase across both React Native and web platforms, simplifying the development process while enhancing cross-platform compatibility.

Usage

Implementing SVG files in your React Native projects is straightforward with react-native-svg-transformer. Start by importing an SVG file within a React component like so:

import Logo from "./logo.svg";

Once imported, the SVG can be used as a React component, giving you the flexibility to pass props, such as width and height:

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

Installation and Configuration

Step 1: Install react-native-svg

First, ensure that the react-native-svg library is installed, as it is a prerequisite for react-native-svg-transformer.

Step 2: Install react-native-svg-transformer

You can install the transformer using either npm or yarn:

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

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

Step 3: Configure the Metro Bundler

Depending on your React Native version or if you are using Expo, you need to adjust your metro.config.js configuration file. Here is a sample configuration for React Native v0.72.1 or newer:

const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");

const defaultConfig = getDefaultConfig(__dirname);
const { assetExts, sourceExts } = defaultConfig.resolver;

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

module.exports = mergeConfig(defaultConfig, config);

Customization with SVGR

SVGR, a tool used within this transformer, supports configuration adjustments through a file named .svgrrc. This allows developers to customize how SVGs get transformed. For instance, you can change the default fill color of SVG elements by using:

{
  "replaceAttrValues": {
    "red": "currentColor"
  }
}

Using TypeScript

For those using TypeScript, a module declaration is necessary. Add the following to your declarations.d.ts file:

declare module "*.svg" {
  import React from "react";
  import { SvgProps } from "react-native-svg";
  const content: React.FC<SvgProps>;
  export default content;
}

Additional Features and Dependencies

The transformer also provides solutions for using custom fonts in iOS, and setting up Jest for testing components that import SVG images. It depends on several libraries, including react-native-svg and SVGR plugins, to perform the transformation process.

With these robust capabilities, react-native-svg-transformer proves to be an essential tool for developers looking to incorporate SVG graphics into their React Native applications with ease and consistency.