Transform SVGs into React components 🦁

Try it out online!

Watch the talk at React Europe

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.

Docs

See the documentation at react-svgr.com for more information about using svgr!

Quicklinks to some of the most-visited pages:

• Playground
• Getting started
• CLI usage
• Webpack usage
• Node.js usage

Example

Take a SVG:

<?xml version="1.0" encoding="UTF-8"?>
<svg
  width="48px"
  height="1px"
  viewBox="0 0 48 1"
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
>
  <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
  <title>Rectangle 5</title>
  <desc>Created with Sketch.</desc>
  <defs></defs>
  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <g
      id="19-Separator"
      transform="translate(-129.000000, -156.000000)"
      fill="#063855"
    >
      <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>
            </g>
          </g>
        </g>
      </g>
    </g>
  </g>
</svg>

Run SVGR

npx @svgr/cli --icon --replace-attr-values "#063855=currentColor" -- icon.svg

Get an optimized React component

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" />
  </svg>
)

export default SvgComponent

Supporting SVGR

SVGR is a MIT-licensed open source project. It's an independent project with ongoing development made possible thanks to the support of these awesome backers. If you'd like to join them, please consider:

• Sponsor me on GitHub
• Become a backer or sponsor on OpenCollective

Learn more about supporting SVGR.

Contributing

Check out the contributing guidelines

License

Licensed under the MIT License, Copyright © 2017-present Greg Bergé.

See LICENSE for more information.

Acknowledgements

This project has been popularized by Christopher Chedeau and it has been included in create-react-app thanks to Dan Abramov. We would like to thanks Sven Sauleau for his help and its intuition.

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

8.1.0 (2023-08-15)

Bug Fixes

• cli: fix default dimensions, prettier & svgo (571d5c8)
• config: prefer cli config over rc config (#845) (8b97248)
• react-native: fix duplicate import (#894) (e612b6a)

Features

• esm: add support for svgo.config.cjs (#879) (ae91e2e)

8.0.1 (2023-05-09)

Bug Fixes

• fix peer dependencies (2e05255)

8.0.0 (2023-05-09)

Bug Fixes

• parseObject error causes website broken (05f2946)

Features

• add snake_case filename option (#857) (428b0c7)
• make index template more flexible (#861) (003009c)
• types: change SVGProps from import to import type (#853) (095f021)

BREAKING CHANGES

• index template now receives an array of objects containing both the created component path (path) and the original SVG path (originalPath)

7.0.0 (2023-03-24)

Features

• allow specifying jsxRuntimeImport in config (86bb86f), closes #801 #801
• remove @svgr/plugin-jsx from core (a0f078d)
• upgrade to svgo v3 (#798) (21b6209)

BREAKING CHANGES

• plugin-jsx is no longer included by default in core
• svgr now requires Node.js v14+

6.5.1 (2022-10-27)

Reverts

• Revert "feat(a11y): add attribute role="img" to the svg element (#750)" (1382232), closes #750

6.5.0 (2022-10-14)

Bug Fixes

• fix Yarn peer dependency warning from @babel/core (#786) (db35837), closes #785

Features

• babel-preset: fix 'role' attribute on svg element for react native (#787) (35d85e0)

6.4.0 (2022-10-01)

Bug Fixes

• deps: add babel-preset to core dependencies (#782) (464ec5f)

Features

• a11y: add attribute role="img" to the svg element (#750) (8b9edc4)
• support spaces in file names (#779) (6ee639a)

6.3.1 (2022-07-22)

Bug Fixes

• fix duplicate plugin/preset detected error (#747) (3c6a54c), closes #746
• fix exports compat with ESM (#749) (f3e304c)

6.3.0 (2022-07-18)

Bug Fixes

• core: types field in package.json (#693) (a491ace)
• package.json: fix exports (#745) (2a368d1)

Features

• add descProp option (#729) (a0637d4)
• cli: output file name when error happen to handling a file (#702) (0ec1fbd)

6.2.1 (2022-01-30)

Bug Fixes

• do not transform mask-type (#673) (6e58f2c), closes #643
• use .ts extension for generated index (#670) (d19abe2), closes #462

6.2.0 (2022-01-10)

Bug Fixes

• cli: pass in parser to prettier format to avoid deprecation warning (#662) (74fa3ae)
• plugin-svgo: handle potential errors from optimize (#663) (7582d31)

Features

• support comments in templates (#661) (9afb590)

6.1.2 (2021-12-12)

Bug Fixes

• rollup: missing dep & missing map return (#652) (12627fc)
• specify valid peer deps (45a76ed)

6.1.1 (2021-12-04)

Bug Fixes

• webpack: fix double export (#648) (7595d37), closes #645

6.1.0 (2021-12-01)

BREAKING CHANGES

• svgr v6 is now only compatible with Webpack v5 and up. See the migration guide

Bug Fixes

• fix previous export system (1872829), closes #635

Features

• native: automatically convert inline style in native (138c493), closes #588

Performance Improvements

• remove useless loader-utils package (387bc72), closes #631

5.5.0 (2020-11-15)

Bug Fixes

• typescript: fix react-native support #465 (#488) (d61e0cf)
• ensure a valid name for exports (#489) (0eb8085)
• fix playground (c7ad69f)
• prevent removing the namespace by svgr (#475 (#498) (00e84ea)

Features

• allow custom name for named export (#493) (16a58d6)
• svgo: add .svgorc.js config file support (#451) (8049b1a), closes #412

Performance Improvements

• cli: use fs.promises (#459) (af294ac)
• replace merge-deep with smaller deepmerge (#463) (1f015eb)

5.4.0 (2020-04-27)

Bug Fixes

• wrap svg component directly with memo/forwardRef (#440) (#441) (a6de2da)
• cli: fix index generation (#443) (7c46ad7), closes #433

Features

• add ForeignObject support for react native (#430) (1b56b85)
• cli: make all CLI options available in config (a23a186), closes #431 #437

5.3.1 (2020-04-05)

Bug Fixes

• fix typescript types (ref, title) (#419) (6e7e6b2)

5.3.0 (2020-03-22)

Bug Fixes

• cli: remove confusion between {keep,ignore}-existing (#413) (c5430f9), closes #390
• parcel-plugin: support "parcel" and "parcel-bundler" (853db4e), closes #410
• svgo: support any SVGO config format (#412) (f2b2367), closes #400

Features

• add typescript option (4596d7b), closes #373

5.2.0 (2020-02-23)

Bug Fixes

• verify that svgoConfig.plugins is an array (#397) (88110b6)

Features

• parcel-plugin: replace parcel-bundler with parcel (#387) (d09bcd5)

5.1.0 (2020-01-20)

Bug Fixes

• fix merging svgo plugins in config (#384) (c9d2dfc)

Features

• add Svg prefix to exports that starts with a number (#383) (fd120d1), closes #379
• allow to provide custom index.js template (#378) (f734dda)

5.0.1 (2019-12-29)

Bug Fixes

• fix engines in package.json (a45d6fc)

4.3.3 (2019-09-24)

Bug Fixes

• babel-plugin-svg-dynamic-title: dont render empty title (#341) (88b24c5), closes #333
• invalid characters in component name (#332) (4b4bd2c), closes #331

4.3.2 (2019-07-15)

Performance Improvements

• replace rehype with svg-parser (#321) (7eb5ef6)

4.3.1 (2019-07-01)

Bug Fixes

• titleProp: handle the existing title case by using element instead of value (children) (#315) (065e7a9)

4.3.0 (2019-05-28)

Features

• cli: output relative destination paths (#312) (b78e471)
• titleProps fallbacks to svg's title (#311) (8f92366)

4.2.0 (2019-04-11)

Bug Fixes

• keep viewBox when dimensions are removed (#281) (f476c8e)
• babel-preset: expandProps + icon option (ddfae22), closes #277
• cli: fix kebab case transformation with "_" (39c24c5), closes #280
• hast-util-to-babel-ast: correctly handle aria attributes (23d12aa), closes #279
• plugin-prettier: fix prettier warning (d01d33f)

Features

• add expo option (#289) (978db3e)

4.1.0 (2018-11-24)

Features

• add parcel plugin (#235) (144dbe3), closes #215

4.0.4 (2018-11-24)

Bug Fixes

• webpack: use static babel config (#240) (d67af31), closes #232

4.0.3 (2018-11-13)

Bug Fixes

• babel-plugin: fix usage of spread attribute(#231) (4186953)
• upgrade dependencies (7e2195f)

4.0.2 (2018-11-08)

Bug Fixes

• hast-util-to-babel-ast: replace tabs by spaces in attributes (b0f3d19), closes #219

4.0.1 (2018-11-08)

Bug Fixes

• babel-plugin-transform-svg: support template that only return a single node (80ac40f), closes #223
• babel-plugin-transform-svg-component: parsing error of JSX template exports defs (#225) (1e56309), closes /github.com/gregberge/svgr/blob/master/packages/babel-plugin-transform-svg-component/src/util.js#L61
• hast-util-to-babel-ast: correctly transforms data & aria attributes (99711c4), closes #221
• hast-util-to-babel-ast: replace line-breaks in attributes (00a2625), closes #219

4.0.0 (2018-11-04)

Bug Fixes

• prevent babel read babel.config.js (#206) (514d43d)
• cli: fix --out-dir usage with absolute path (#208) (c922e2e)

Features

• svgo: prefix ids by default (06c338d), closes #210
• v4: new architecture (ac8b8ca)
• allow dynamic properties in replaceAttrValues option (15f55fe), closes #205

BREAKING CHANGES

• v4: - template option must now returns a Babel AST

• @svgr/core does not include svgo & prettier by default

3.1.0 (2018-10-05)

Bug Fixes

• style & custom SVG properties (#203) (f8b2212), closes #199 #201

Features

• allow Mask & Image on React Native (#202) (0256bc0)

3.0.0 (2018-10-01)

Bug Fixes

• rollup: forward filePath in rollup plugin (461492b), closes #177 #188
• webpack: forward filePath in webpack loader (b7a108e), closes #177 #188
• fix --icon + --no-dimensions (7535693), closes #141
• fix expandProps when position is not allowed (45522fc)

Features

• config: improve runtime config (e52cdce), closes #192
• template: expose getProps util for template (5cb238e), closes #187
• add synchronous API (169eb2f), closes #185
• always prefix component name with "Svg" (f71aa7a), closes #190
• do not remove style tag (a4ce09a), closes #191
• new "expandProps" option (bb95828), closes #170
• remove "svgAttributes" option (4e46a5d), closes #173
• use forwardRef on React Native (4bdd989), closes #184
• use React.forwardRef (cbee51c), closes #184

BREAKING CHANGES

• "--no-expand-props" is now replaced by "--expand-props none". You can now specify a position "start" or "end" for "expandProps" property.
• svgAttributes has been removed, please use svgProps instead.
• "ref" option now uses React.forwardRef. You don't have to use "svgRef" prop, just use "ref" and it will work. React.forwardRef requires React

  16.3.

• Style tag will no longer be automatically removed. SVGO should handle it correctly using "inlineStyles" plugin. If you want to remove them, enable "removeStyleElement" plugin in your SVGO config.
• rollup: runtime configuration is now loaded using rollup plugin.
• webpack: runtime configuration is now loaded using webpack loader.

• config: - Runtime configuration is always loaded (even with Node API convert)

• In CLI, "--config" is now "--config-file"; this new option can be used everywhere

2.4.1 (2018-09-16)

Bug Fixes

• config: fix custom config & default options (#176) (9a6c40b)

2.4.0 (2018-09-16)

Bug Fixes

• use literal instead of litteral (7849fd4)

Features

• allow to spread props at the start (#166) (cd659dc)
• upgrade: h2x@1.1.0 (jsdom@12.0.0) & others (2d9b7bd)
• new option "svgProps" (#172) (9657110)

2.3.0 (2018-09-03)

Features

• upgrade to Babel v7 (7bc908d)

2.2.1 (2018-08-16)

Bug Fixes

• rollup: fix to work with rollup-plugin-typescript2 (#147) (4b3737e)

2.2.0 (2018-08-13)

Bug Fixes

• remove null-byte characters (#154) (de7f8a7), closes #153
• webpack: use source when possible (#139) (ae9965d)

Features

• core: pass info to SVGO (2b2353b), closes #152

2.1.1 (2018-07-11)

Bug Fixes

• core: config conflict with icon option (#137) (e13a99a)

2.1.0 (2018-07-08)

Features

• add .editorconfig support (#129) (968fd82)
• cli: support custom filename cases (#136) (4922f7a), closes #118

2.0.0 (2018-06-12)

Features

Project configurations

SVGR now supports Prettier (.prettierc) and SVGO (.svgo.yml) configurations. It also supports a new .svgrrc configuration. See the readme for more detail.

Rollup plugin

Rollup has now an official SVGR plugin available under @svgr/rollup.

Split into several modules

SVGR is now an ecosystem of four modules:

• @svgr/core: Core of SVGR, it exposes the Node API
• @svgr/cli: Command Line Interface
• @svgr/webpack: webpack loader
• @svgr/rollup: a fresh new Rollup plugin

svgAttributes and titleProp options

Two new options appears, the first one svgAttributes gives you the opportunity to add attribute on the root svg tag without creating a custom template:

Command:

svgr --svg-attributes focusable=true foo.svg

Output:

;(props) => <svg focusable="false" />

The second one, titleProp, adds a custom property title to specify the title of the SVG.

Command:

svgr --title-prop foo.svg

Output:

;({ title }) => (
  <svg>
    <title>{title}</title>
  </svg>
)

Breaking changes

Node version

Node v6 support has been dropped, you need Node >= 8 to run SVGR.

Prettier options

All Prettier options have been removed:

• jsx-bracket-same-line
• no-bracket-spacing
• no-semi
• single-quote
• tab-width
• trailing-comma
• use-tabs

If you used it, use a .prettierrc instead of use the new option --prettier-config:

v1.x:

svgr --no-semi file.svg

v2.x:

svgr --prettier-config '{"semi": true}' file.svg

SVGO options

All SVGO options have been removed:

• ids
• keep-useless-defs
• no-title
• no-view-box
• precision

If you used it, use a .svgo.yml instead of use the new option --svgo-config:

v1.x:

svgr --ids file.svg

v2.x:

svgr --svgo-config '{"plugins": [{"cleanupIDs": {"remove": false, "minify": false}}]}' file.svg

Other options

• replace-attr-value has been renamed into replace-attr-values

In API, replaceAttrValues is now an object instead of an array.

Node API changes

• rawConvert method has been dropped
• Templates now receive three arguments: code, config and state
• componentName must now be passed in state

Thanks

Thanks to @MarquesDev and @lifeiscontent.

1.10.0 (2018-05-28)

Features

• upgrade Prettier (v1.13) (2f50403), closes #108

1.9.2 (2018-05-14)

Bug Fixes

• ids: do not minify them (538b73f)

1.9.1 (2018-03-25)

Bug Fixes

• fix width / height override (1f91705), closes #issuecomment-375467614
• handle filename with numbers (a2387ea), closes #62 #64

1.9.0 (2018-03-08)

Features

• add option to removeDimensions (#58) (7357e7c)

1.8.1 (2018-01-31)

Bug Fixes

• loader: add missing babel-plugin (#50) (c49b627)

1.8.0 (2018-01-31)

Bug Fixes

• fix tabWidth option (#49) (a863280), closes #33

Features

• support custom file extension (#47) (56a111f), closes #31
• webpack: include Babel transformation (#48) (dfecd39), closes #45

1.7.0 (2018-01-23)

Features

• emSize: add support for missing width/height (2eacfd8)
• add option keepUselessDefs (3d03510), closes #36

Performance Improvements

• refactor emSize to reduce iterations (3c9d8b4)

1.6.0 (2018-01-08)

Features

• support url-loader & file-loader (b95ed07)

1.5.0 (2017-12-12)

Features

• add ref option (#29) (86e0bda)

1.4.0 (2017-12-07)

Features

• add "-native" option to target React Native (76fd6f5)
• native: import only relevant components (fcd4229)
• native: log unsupported components (888d968)

1.3.0 (2017-12-05)

Features

• add option to keeps IDs from SVG (bfd4066)

1.2.0 (2017-12-04)

Features

• simplify webpack usage (7ac643e)

1.1.0 (2017-11-24)

Features

• add viewBox option that default to true (ba2be3a)

1.0.0 (2017-11-07)

Features

• upgrade svgo & prettier (fd66885)

BREAKING CHANGES

• SVGO now removes viewBox automatically.