How to use SVGs in React - LogRocket Blog (2024)

Editor’s note: This article was last updated by Miracle Jude on 4 March 2024 to cover passing SVGs as props in React with TypeScript, converting SVGs to React components, and creating and using React SVG icons.

SVG, or Scalable Vector Graphics, is a vector graphics image format based on XML. It was developed in the late 90s and was poorly supported until around 2016.

Today, a huge percentage of icon libraries, such as Flaticon, Font Awesome, and Material Icon have full support for SVG. Brands such as X, YouTube, Udacity, and Netflix use SVG for some of their images and icons.

In this article, we will explore the advances of using SVG over other image formats and various ways to implement SVGs in React applications, including their integration, animation, and usage as React components.

Why use SVG over other image formats?

You’re probably more familiar with image formats like JPEG, GIFs, and PNG than you are with SVG. However, there are many reasons why you’d want to use SVG over these other formats:

• Scalability and resolution: This is the biggest advantage that SVG has over other formats. SVG uses shapes, numbers, and coordinates instead of pixel grids like other image formats do. This makes it possible to zoom in and out of SVG images without losing image quality. This also gives SVG the ability to scale infinitely
• Small file size: SVG file sizes are usually small compared to other file formats, and they are easily compressible, which allows for their sizes to be even smaller
• High performance and speed: Because of their small size, SVG images are very easy and fast for browsers to render. It’s like rendering text compared to rendering pixels and colors for other image formats. Also, if you use inline SVG in your code, the browser does not have to request to get the image and renders it just like all the other code in your file. In this case, no request was made. But in a situation where you have a complex image SVG file, such as the Mona Lisa photo, I would suggest using PNGs or JPEGs as the load time and performance for SVGs can fall drastically
• DOM-like, styleable, and editable: SVG images are like code, which means they can be navigated like a DOM element and also styled. Some properties will have different names. For example, you might want to use fill instead of color. You can also style SVG with CSS. Likewise, because SVGs are DOM-like, they can be created, edited, and animated with any text editor
• Animatable: SVGs can be animated. This can be done with tools like Web Animation APIs, WebGL, CSS animations, etc. Read more about animating SVG with CSS in this guide
• Ease of integration: SVGs can be used in various ways: they can display logo images and icons, graphs, animations, effects, and more
• Accessibility and SEO: SVGs contain text, which improves accessibility. It also means they can be searched, indexed, scripted, etc.

How to use SVGs in React

Below we explore various ways to use or render this React SVG logo on a webpage, it is worth noting that Create React App (CRA) has a built-in configuration for handling SVGs. Some of the examples in this article that require modifying the webpack setup apply only to custom React projects using webpack as a bundler.

You may need different plugins if you don’t use webpack for your custom React project.

Using the <img> tag for static SVGs

In order to use SVGs or any other image format in the <img> tag, we have to set up a file loader system in whichever module bundler we’re using. Here, I will show you how to set it up in a few steps if you are already using webpack as your bundler.

If you are using webpack 4, first install the file-loader library with the command $ npm install file-loader --save-dev. This will install it as a dev dependency.

You can update your webpack configuration file rules with this code:

const webpack = require('webpack');module.exports = { entry: './src/index.js', module: { rules: [ //... { test: /\.(png|jp(e*)g|svg|gif)$/, use: [ { loader: 'file-loader', options: { name: 'images/[hash]-[name].[ext]', }, }, ], }, ], }, //...};

However, the file-loader library is deprecated if you are using webpack 5 — use asset modules instead. With asset modules, you can use asset files in your project setup without installing additional loaders. Update the rules field of your webpack configuration file to include the following:

module.exports = { entry: "./src/index.js", module: { rules: [ //... { test: /\.(png|jp(e*)g|svg|gif)$/, type: "asset/resource", }, ], }, //...};

Now you can import your SVG and use it as a variable, like this:

import React from 'react';{/*images*/}import ReactLogo from './logo.svg';const App = () => { return ( <div className="App"> <img src={ReactLogo} alt="React Logo" /> </div> );}export default App;

This method of importing SVGs has a disadvantage as it cannot be styled in an img element, making it suitable for non-customizable SVGs like logos, unlike other methods.

Using the <svg> element

With the same webpack settings above, we can use the <svg> element by copying and pasting the contents of the .svg file into our code. Here is a sample use case:

import React from 'react';const App = () => { return ( <div className="App"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"> <g fill="#61DAFB"> <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/> <circle cx="420.9" cy="296.5" r="45.7"/> <path d="M520.5 78.1z"/> </g> </svg> </div> );}export default App;

You can likely already see the disadvantages of using this method. When the image is more complex, the SVG file becomes larger, and because SVG is stored in text, that means we have a whole bunch of text in our code.

Using an SVG as a component

SVGs can be imported and used directly as React components in your React code. The image is not loaded as a separate file; rather, it’s rendered along with the HTML. A sample use case would look like this:

import { ReactComponent as Logo} from './logo.svg';import './App.css';function App() { return ( <div className="App"> <Logo /> </div> );}export default App;

Although this approach is simple to implement, it has some difficulties. The imported SVG functions as an image element, not a full-fledged React component, and cannot be customized with props. It’s not suitable for complex SVGs with multiple elements or styles.

Another approach is converting it to a React component before using it in your React application:

const BarIcon = () => { return ( <svg className="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> <path stroke="currentColor" strokeLinecap="round" strokeWidth="2" d="M5 7h14M5 12h14M5 17h14" /> </svg> )}function App() { return ( <header className="App-header"> <BarIcon /> </header> );}export default App;

Adding SVG directly as JSX

JSX supports the svg tag, allowing for the direct copy-paste of SVGs into React components without using a bundler. SVGs are in XML format, similar to HTML, and can be converted to JSX syntax. Alternatively, a compiler can be used instead of manually converting:

export default function App() { return ( <svg className="w-10 h-10 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill={fill} width={width} height={height} viewBox="0 0 24 24"> <path stroke="currentColor" strokeLinecap="round" strokeWidth="2" d="M5 7h14M5 12h14M5 17h14" /> </svg>);};export default App;

Inline SVGs offer access to their properties, allowing for customization and style. However, large SVG file sizes may reduce code readability and productivity, so using a PNG or JPEG file is recommended.

Using SVGR

SVGR is an awesome tool that converts your SVGs into React components. To set it up, first install the package by running the command $ npm install @svgr/webpack --save-dev. Then, update your webpack configuration rule to use SVGR for SVGs:

const webpack = require('webpack');module.exports = { entry: './src/index.js', module: { rules: [ //... { test: /\.svg$/, use: ['@svgr/webpack'], }, ], }, //...};

Now you can import SVG images as React components and use them in your code like so:

import React from 'react';import ReactLogo from './logo.svg';const App = () => { return ( <div className="App"> <ReactLogo /> </div> );}export default App;

Using SVG as a data URL

Data URLs are URLs prefixed with the data: scheme, which allows content creators to embed small files inline in documents. This approach allows us to use SVG images like an inline element.

How do you achieve this? First, you’ll need an appropriate loader if you are using webpack. For this use case, I’ll use svg-url-loader. You can add it to your project by running the command $ npm install svg-url-loader --save-dev.

Then, update the webpack configuration file rules section with the following:

const webpack = require('webpack');module.exports = { entry: './src/index.js', module: { rules: [ //... { test: /\.svg$/, use: [ { loader: 'svg-url-loader', options: { limit: 10000, }, }, ], }, ], }, //...};

Now you can import your SVG file and use it in your React component like this:

import ReactLogo from './logo.svg';const App = () => { return ( <div className="App"> <img src={ReactLogo} alt="React Logo" /> </div> );}

This usually results in something like this in the DOM:

<img src="data:image/svg+xml,%3csvg..." alt="React Logo" />

Injecting SVG to the DOM using react-svg

Adding SVG markup directly in your React component increases its file size, making it hard to maintain. Despite this limitation, using inline SVG comes with its advantages. You can easily apply CSS styles to the SVG markup when you embed it inline compared to using the <img> tag.

To leverage the benefits of embedding SVGs inline without worrying about the maintainability of your component, you can use the react-svg package. It fetches the SVG asynchronously and embeds it inline.

You can install it from the npm package registry like so:

npm install react-svg

You can then import the ReactSVG component and render it in your React application. The ReactSVG component takes the URL for your SVG as the value of the src prop. It also takes several optional props you can look up in the documentation:

import { ReactSVG } from "react-svg";<ReactSVG src="icon.svg" />

How to animate SVGs in React

As mentioned in the introduction, one of the benefits of using SVGs over other image formats is that SVGs are possible to animate. You can animate SVGs using CSS or React animation libraries like Framer Motion and React Spring.

Things to note:

• Complicated images: The more complex the image, the larger the SVG file gets — we saw this while trying to use the <svg> element. Here, I would recommend you go with PNG or JPEGs
• Backward support on the web: SVG doesn’t have backward browser support, which means most older browser versions won’t support it. As such, SVG might not display correctly for users who are still on those versions.

Techniques for converting SVGs to React components

While manually converting SVGs to React components is possible, it takes time and is prone to errors. Fortunately, some different techniques and tools make this procedure easier:

• Automated conversion with SVGR: As we saw earlier, SVGR parses your SVG file and creates a corresponding React component with customizable properties. Tools such as SVGR Playground allow you to experiment with conversion and view the final React component code
• Using inline SVG with JSX: The svg tag can be used to embed SVG code directly within JSX components for simple SVGs. This method works well for static SVGs that don’t need to be dynamically modified
• Third-party libraries: When you work with complex SVGs or need advanced interactions, check out libraries like react-svg or react-inlinesvg for further features and functionality

Creating and using React SVG icons

When used as React components, SVGs become excellent tools for creating clean and scalable user interfaces. Effectively managing React SVG icons requires careful consideration for scalability and maintainability, and some strategies include:

• Icon library creation: Consider creating a centralized icon library. This might be a special folder where all of your SVG icon files are kept inside the project structure
• Component naming conventions: Give each of your icon components a consistent name. HamburgerIcon.js and NotificationIcon.js are examples of descriptive names that improve readability and organization
• Icon component structure: Make sure your icon components are organized consistently. This makes maintenance easier and encourages the reuse of code. A common structure may include specifying default values like width, height, and fill color, as well as options for customization through props

Passing SVGs as props in React with TypeScript

TypeScript allows developers to enforce type safety in React applications, including handling SVG elements and their properties. Adhering to best practices for typing SVG properties is important for preventing runtime errors and ensuring code reliability. This section will explore these best practices and provide examples of passing SVG elements as props to other components.

SVG prop typing

One technique for typing SVG properties in TypeScript to ensure type safety includes using the SVGProps type that React provides to type SVG-related props correctly. This guards against type errors and guarantees that the right props are supplied to SVG elements:

interface CustomProps { icon: React.FunctionComponent<React.SVGProps<SVGSVGElement>>; // Additional props specific to SVG components can be defined here // For example: color?: string; size?: number;}

Another technique involves defining a custom interface that encompasses all relevant SVG properties, extending built-in types for specific attributes:

interface SvgProps { fill?: string; stroke?: string; width?: number; height?: number; // Add other relevant SVG attributes here}

Finally, consider exploring third-party libraries like react-svg or SVGR for pre-defined type definitions for SVG manipulation within React.

Examples of passing SVGs as props

Now, let’s see how to provide SVG elements as props to other components in TypeScript:

// Define a component that accepts SVG element as a propinterface Props { svgElement: React.ReactElement<React.SVGProps<SVGElement>>;}const SVGWrapper: React.FC<Props> = ({ svgElement }) => ( <div> {svgElement} </div>);

Here we create an interface Props for the SVGWrapper component that accepts svgElement props of the type React.ReactElement<React.SVGProps<SVGElement>>. The SVGWrapper component renders the svgElement that it gets.

In the App component, we can now pass instances of our SVG icons and components as svgElement props to SVGWrapper:

import { BarIcon } from './BarIcon';export default function App() { return ( <div className="App"> <SVGWrapper svgElement={<BarIcon fill="#fff" className="w-10 h-10 text-gray-800 dark:text-white" />} /> </div> );}

This way, you can pass SVG elements as props to other components in TypeScript.

Passing an interface for dynamic SVG creation

interface BarProps { fill?: string; width?: number; height?: number; className?: string;}export const BarIcon = ( { fill, width = 20, height = 20, className, }: BarProps) => { return ( <svg className={className} aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill={fill} width={width} height={height} viewBox="0 0 24 24"> <path stroke="currentColor" strokeLinecap="round" strokeWidth="2" d="M5 7h14M5 12h14M5 17h14" /> </svg> )}

The component defines an interface BarProps, which allows for the specification of optional props like width, height, and fill color, and then renders the SVG code using the path element.

Passing the SVG string as a prop

Using this method, the SVG code is passed directly as a string prop. For instance, consider this:

import React from "react"interface ButtonProps { onClick: () => void; svg: string; // Prop for the SVG code}const Button: React.FC<ButtonProps> = ({ onClick, svg }) => ( <button onClick={onClick}> <div dangerouslySetInnerHTML={{ __html: svg }} /> </button>);const App = () => { const svgString = "<svg width='100' height='100'><circle cx='50' cy='50' r='40' stroke='black' strokeWidth='3' fill='red' /></svg>"; return ( <div> <Button onClick={() => console.log('Svg')} svg={svgString} /> </div> );};export default App;

This example demonstrates using the ButtonProps interface to define props for the Button, which takes a string property svg and onClick as a prop. The component renders the SVG using dangerouslySetInnerHTML, assigning it to the __html key, bypassing React’s XSS protection. It’s crucial to ensure the SVG string is safe to render, as it could pose a security risk if it contains untrusted content. Proper use of dangerouslySetInnerHTML can prevent cross-site scripting attacks. In App, we define an SVG string and pass it to Button as a prop.

To ensure reusability and maintain a single source of truth for SVG code, create a separate component for multiple uses of the same SVG with different styles. If it is only needed once or has a simple SVG, pass the SVG string as a prop.

Conclusion

SVGs make up a significant proportion of images on the web today. As highlighted above, SVGs have smaller file sizes than other image formats. You can resize them without losing image quality, and they are animatable.

Though its usage is straightforward with HTML, you need additional tools and configuration to start using SVG in frontend frameworks like React. Most of the popular React project starter toolsets, like Create React App, Vite, and Astro, come with out-of-the-box configurations for handling static assets such as images, including SVGs.

As mentioned in this article, Create React App uses the SVGR webpack loader, @svgr/webpack, under the hood. Therefore, you can import an SVG with an import statement and render it in your application. You can also inline the SVG markup. However, rendering SVGs inline can make your components hard to maintain.

For a custom React project that uses webpack as a bundler, you can configure the @svgr/webpack loader to load SVGs similar to Create React App.

As you use SVGs, it is worth mentioning that complex images can have large SVG files, especially if you want to inline the SVG. Though most popular modern browsers fully support SVGs, some browsers, especially mobile browsers, do not have full support for certain SVG features.