Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/gregberge/svgr

Transform SVGs into React components 🦁
https://github.com/gregberge/svgr

inline-svg loader react react-native react-svg react-svg-creator react-svg-loader svg svg-react svg-to-react svg2react svgo webpack webpack-loader

Last synced: 3 days ago
JSON representation

Transform SVGs into React components 🦁

Awesome Lists containing this project

README

        


svgr


Transform SVGs into React components 🦁

[![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


Rectangle 5
Created with Sketch.













```

**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) => (



)

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.