How to use SVGs with React?
Vinícius Victorino SVG

How to use SVGs with React?

SVG is the most performant image format for the web, when embedded in your HTML

What are SVGs?

SVG (Scalable Vector Graphics) is an image representation format, which uses vector coordinates to draw a image. The more traditional formats like png and jpg can be classified as bitmap, which works by mapping and associating each pixel with a color, so when performing zoom the image has quality loss. Which is not the case with SVG by its nature, that why it’s scalable.

How to load on React applications?

There are several ways:

  • You can open the .svg file and copy paste its contents to the HTML
  • You can load it as a image
  • You can use e loader to parse it to a component
  • Or you can parse you SVG to JSON, w
  • Ou você pode converter seu SVG para JSON, which is a native JavaScript format, using a CLI svj

Pros e Cons

Let’s compare each of these methods, taking into account the following points:

  • Unit effort - Effort to run only once
  • Scalability - Effort to run multiple times
  • Optimization - Deleting useless tags
  • Performance - Browser loading speed
  • Size - Browser loading cost
Method: Copy the contents of the SVG file
  • Pros
    • Unit effort: It’s simple and straightforward
    • Performance: Being embedded in HTML so is good
  • Cons
    • Scalability: It’s complicated as it’s a manual process
    • Optimization: Requires developer knowledge about SVGs, to do it manually
    • Size: It may be big, depending on the optimization done
Method: Upload as image
  • Pros
    • Unit effort: Non-existent because it uses the platform
    • Scalability: As scalable as any image
  • Cons
    • Optimization: Requires developer knowledge about SVGs, to do it manually
    • Performance: Performance compromised by requiring the .svg file request
    • Size: It may be big, depending on the optimization done
Method: Use a component loader
  • Pros
    • Unit effort: Non-existent because it is done by the loader
    • Scalability: As scalable as any component
    • Optimization: It is optimized by the loader
  • Cons
    • Performance: Performance compromised by the amount of JavaScript
    • Size: Too much JavaScript for something non-interactive
Method: Convert SVG to JSON with svj CLI
  • Pros
    • Unit effort: Non-existent because it is done by the CLI
    • Scalability: Non-existent because it is done by the CLI
    • Optimization: It is optimized by the CLI
    • Performance: Being embedded in HTML is good
    • Size: It’s Three Shakeable and maybe lazy loadable

How to use the CLI and adapter for React

Reserve a folder for your SVGs and another for the file destination (both can be the same) and run the CLI with the following command:

Terminal window
npx svj -i <svg-folder-path> -d <dist-folder> -r

Then install the adapter for React:

Terminal window
npm i @svjson/react

Now you can import it at your component, both the JSON of the SVG and the adapter, to render the SVG. Passing the svg in the prop src and an alternative text in the prop alt for accessibility:

import { icon } from "<dist-folder>";
import { Svg } from "@svjson/react";


export function IconText() {
  return (
    <span>
      <span>text</span>
      <Svg alt="icon" src={icon} />
    </span>
  );
}