DEV Community

Cover image for How to Add SVGs to Your React Native App: A Quick and Simple Guide
Abhishek P N
Abhishek P N

Posted on

How to Add SVGs to Your React Native App: A Quick and Simple Guide

SVGs (Scalable Vector Graphics) are a fantastic way to add crisp, scalable graphics to your React Native app. They’re perfect for icons, logos, and illustrations because they look sharp at any size. Here’s a quick and easy guide to help you get started with SVGs in React Native.

Step 1: Install the Necessary Packages
To use SVGs in React Native, you need the react-native-svg library. If you’re using Expo, you’re already set! For React Native CLI users, follow these steps:

Open your terminal.

Run the following command:

npm install react-native-svg
Enter fullscreen mode Exit fullscreen mode

or

yarn add react-native-svg
Enter fullscreen mode Exit fullscreen mode

For React Native versions 0.60 and above, this library will be automatically linked. For older versions, you might need to link it manually:

react-native link react-native-svg
Enter fullscreen mode Exit fullscreen mode

Step 2: Import SVG Components
In your React Native component, import Svg and other components from react-native-svg. Here’s how you do it:

import React from 'react';
import { View, StyleSheet } from 'react-native';
import Svg, { Path } from 'react-native-svg';
Enter fullscreen mode Exit fullscreen mode

Step 3: Add Your SVG Code
You can write SVG code directly in your component or use an SVG file. Here’s a simple inline SVG example:

const MySVGIcon = () => (
  <Svg width="100" height="100" viewBox="0 0 100 100">
    <Path
      d="M50 0 L100 50 L50 100 L0 50 Z"
      fill="blue"
    />
  </Svg>
);
Enter fullscreen mode Exit fullscreen mode

Step 4: Use SVG Files (Optional)

If you prefer using SVG files, you can use react-native-svg-transformer.

Install the transformer:

npm install react-native-svg-transformer
Enter fullscreen mode Exit fullscreen mode

or

yarn add react-native-svg-transformer
Enter fullscreen mode Exit fullscreen mode

Create or update your metro.config.js file with:

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

const defaultConfig = getDefaultConfig(__dirname);

const {
  resolver: { sourceExts, assetExts },
} = defaultConfig;

const config = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
    babelTransformerPath: require.resolve('react-native-svg-transformer'),
  },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== 'svg'),
      sourceExts: [...sourceExts, 'svg'],
    },
};

module.exports = mergeConfig(defaultConfig, config);
Enter fullscreen mode Exit fullscreen mode

Import your SVG file like this:

import React from 'react';
import { View } from 'react-native';
import MyIcon from './path/to/icon.svg'; // Your SVG file path

const App = () => (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <MyIcon width={100} height={100} />
  </View>
);

export default App;
Enter fullscreen mode Exit fullscreen mode

Step 5: Customize and Enjoy!
You can customize your SVGs by adjusting their size and colors:

const MySVGIcon = ({ width = 100, height = 100, color = 'blue' }) => (
  <Svg width={width} height={height} viewBox="0 0 100 100">
    <Path
      d="M50 0 L100 50 L50 100 L0 50 Z"
      fill={color}
    />
  </Svg>
);
Enter fullscreen mode Exit fullscreen mode

Wrapping Up
Adding SVGs to your React Native app is a breeze and adds a polished look to your user interface. Whether you choose to use inline SVG code or import SVG files, you’ll have sharp, scalable graphics that enhance your app's design.

Dive into your project and start integrating those SVGs today. Happy coding!

-Abhishek

Top comments (0)