What is SVGR?

SVGR is an universal tool to transform SVG into React components.

SVGR takes a raw SVG and transforms it into a ready-to-use React component.

For example, take the following SVG:

<?xml version="1.0" encoding="UTF-8"?>
viewBox="0 0 48 1"
<!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
<title>Rectangle 5</title>
<desc>Created with Sketch.</desc>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
transform="translate(-129.000000, -156.000000)"
<g id="Controls/Settings" transform="translate(80.000000, 0.000000)">
<g id="Content" transform="translate(0.000000, 64.000000)">
<g id="Group" transform="translate(24.000000, 56.000000)">
<g id="Group-2">
<rect id="Rectangle-5" x="25" y="36" width="48" height="1"></rect>

After running SVGR, we got:

import * as React from 'react'
const SvgComponent = (props) => (
<svg width="1em" height="1em" viewBox="0 0 48 1" {...props}>
<path d="M0 0h48v1H0z" fill="currentColor" fillRule="evenodd" />
export default SvgComponent

To achieve this result, SVGR applies several complex transformations:

  • Optimizing using SVGO
  • Transforming HTML into JSX in several steps:
    • Converting SVG into HAST (HTML AST)
    • Converting HAST into Babel AST (JSX AST)
    • Transforming AST using Babel (renaming attribute, changing attribute values, ...)
  • Wrapping JSX into a React Component
  • Converting Babel AST into code
  • Formatting code using Prettier

This complex pipeline makes SVGR a reliable, safe and extendable tool.

It can be used through:

It is just the list of official integrations, but the community around SVGR is huge. If you are looking for a plugin, it probably already exists. Give a look to ecosystem to learn more about existing SVGR integrations.

If you want to learn more, this conference talk is a great introduction:

Edit this page on GitHub