Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/smooth-code/svgr
Transform SVGs into React components 🦁
https://github.com/smooth-code/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 months ago
JSON representation
Transform SVGs into React components 🦁
- Host: GitHub
- URL: https://github.com/smooth-code/svgr
- Owner: gregberge
- License: mit
- Created: 2017-09-01T21:38:42.000Z (about 7 years ago)
- Default Branch: main
- Last Pushed: 2024-04-18T15:30:41.000Z (7 months ago)
- Last Synced: 2024-05-01T12:17:01.585Z (6 months ago)
- Topics: 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
- Language: TypeScript
- Homepage: https://react-svgr.com
- Size: 15.9 MB
- Stars: 10,320
- Watchers: 35
- Forks: 407
- Open Issues: 102
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Support: .github/SUPPORT.md
Awesome Lists containing this project
- awesome-fe - **svgr** - svg 转 react 组件。 (打包工具 / webpack 辅助工具、Loader 和插件)
- awesome-f2e-libs - **svgr** - svg 转 react 组件。 (打包工具 / webpack 辅助工具、Loader 和插件)
README
Transform SVGs into React components 🦁
[](https://github.com/gregberge/svgr/blob/master/LICENSE)
[](https://opencollective.com/svgr/donate)
[](https://www.npmjs.com/package/@svgr/core)
[](https://www.npmjs.com/package/@svgr/core)
[](https://github.com/gregberge/svgr/actions/workflows/ci.yml)
[](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.