# svgr

> Convert raw SVG into React components.

Latest version **2.0.0** (published 2018-06-12) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install svgr
pnpm add svgr
yarn add svgr
bun add svgr
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2018-06-12 |
| First published | 2017-08-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=8 |
| Dependencies | 1 |
| Unpacked size | 17 KB |
| Known vulnerabilities | 0 |
| Install scripts | yes |
| GitHub stars | 11057 |
| Author | Greg Bergé |
| Maintainers | neoziro |
| Keywords | svg, h2x, react, component, svg2react, svg-to-react |

## Links

- npm: https://www.npmjs.com/package/svgr
- Repository: https://github.com/smooth-code/svgr
- Homepage: https://github.com/smooth-code/svgr#readme
- Issues: https://github.com/smooth-code/svgr/issues
- npm.io page: https://npm.io/package/svgr

## Dependencies (1)

- [github-current-user](https://npm.io/package/github-current-user.md) ^2.5.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.0.0 (latest) — 2018-06-12
- 1.10.0 — 2018-05-28
- 1.9.2 — 2018-05-14
- 1.9.1 — 2018-03-25
- 1.9.0 — 2018-03-08
- 1.8.1 — 2018-01-31
- 1.8.0 — 2018-01-31
- 1.7.0 — 2018-01-23
- 1.6.0 — 2018-01-08
- 1.5.0 — 2017-12-12
- 1.4.0 — 2017-12-07
- 1.3.0 — 2017-12-05
- 1.2.0 — 2017-12-04
- 1.1.0 — 2017-11-24
- 1.0.0 — 2017-11-07
- … 7 more at https://npm.io/package/svgr/versions

## README

<h1 align="center">
  <img src="https://raw.githubusercontent.com/gregberge/svgr/master/resources/svgr-logo.png" alt="svgr" title="svgr" width="300">
</h1>
<p align="center" style="font-size: 1.2rem;">Transform SVGs into React components 🦁</p>

[![License](https://img.shields.io/npm/l/@svgr/core.svg)](https://github.com/gregberge/svgr/blob/master/LICENSE)
[![Donate](https://opencollective.com/svgr/backers/badge.svg)](https://opencollective.com/svgr/donate)
[![npm package](https://img.shields.io/npm/v/@svgr/core/latest.svg)](https://www.npmjs.com/package/@svgr/core)
[![npm downloads](https://img.shields.io/npm/dm/@svgr/core.svg)](https://www.npmjs.com/package/@svgr/core)
[![CI](https://github.com/gregberge/svgr/actions/workflows/ci.yml/badge.svg)](https://github.com/gregberge/svgr/actions/workflows/ci.yml)
[![Code Coverage](https://img.shields.io/codecov/c/github/gregberge/svgr.svg)](https://codecov.io/github/gregberge/svgr)

[**Try it out online!**](https://react-svgr.com/playground)

[**Watch the talk at React Europe**](https://www.youtube.com/watch?v=geKCzi7ZPkA)

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](https://react-svgr.com)

**See the documentation at [react-svgr.com](https://react-svgr.com)** for more information about using `svgr`!

Quicklinks to some of the most-visited pages:

- [**Playground**](https://react-svgr.com/playground/)
- [**Getting started**](https://react-svgr.com/docs/getting-started/)
- [CLI usage](https://react-svgr.com/docs/cli/)
- [Webpack usage](https://react-svgr.com/docs/webpack/)
- [Node.js usage](https://react-svgr.com/docs/node-api/)

## Example

**Take a SVG**:

```html
<?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**

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

**Get an optimized React component**

```js
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](/BACKERS.md). If you'd like to join them, please consider:

- [Sponsor me on GitHub](https://github.com/sponsors/gregberge)
- [Become a backer or sponsor on OpenCollective](https://opencollective.com/svgr)

Learn more about [supporting SVGR](https://react-svgr.com/docs/supporting-svgr/).

## Contributing

Check out the [contributing guidelines](CONTRIBUTING.md)

# License

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

See [LICENSE](./LICENSE) for more information.

## Acknowledgements

This project has been popularized by [Christopher Chedeau](https://twitter.com/vjeux) and it has been included in [create-react-app](https://github.com/facebook/create-react-app) thanks to [Dan Abramov](https://twitter.com/dan_abramov). We would like to thanks [Sven Sauleau](https://twitter.com/svensauleau) for his help and its intuition.

---
_Source: https://npm.io/package/svgr · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._