{"id":13397940,"url":"https://github.com/gregberge/svgr","last_synced_at":"2025-05-12T18:18:59.511Z","repository":{"id":37251371,"uuid":"102155012","full_name":"gregberge/svgr","owner":"gregberge","description":"Transform SVGs into React components 🦁","archived":false,"fork":false,"pushed_at":"2025-01-01T12:56:20.000Z","size":15924,"stargazers_count":10786,"open_issues_count":124,"forks_count":429,"subscribers_count":35,"default_branch":"main","last_synced_at":"2025-05-12T18:18:49.550Z","etag":null,"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"],"latest_commit_sha":null,"homepage":"https://react-svgr.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gregberge.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":".github/SUPPORT.md","governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"gregberge","open_collective":"svgr"}},"created_at":"2017-09-01T21:38:42.000Z","updated_at":"2025-05-12T10:12:38.000Z","dependencies_parsed_at":"2024-01-22T23:04:21.958Z","dependency_job_id":"8bcf3597-d53d-44ec-b42c-243e44299376","html_url":"https://github.com/gregberge/svgr","commit_stats":{"total_commits":581,"total_committers":134,"mean_commits":4.335820895522388,"dds":0.5094664371772806,"last_synced_commit":"180eb6d503215fc782dfece351ff751194a0dfed"},"previous_names":["smooth-code/svgr"],"tags_count":69,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gregberge%2Fsvgr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gregberge%2Fsvgr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gregberge%2Fsvgr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gregberge%2Fsvgr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gregberge","download_url":"https://codeload.github.com/gregberge/svgr/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253795162,"owners_count":21965488,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["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"],"created_at":"2024-07-30T18:01:55.604Z","updated_at":"2025-05-12T18:18:59.491Z","avatar_url":"https://github.com/gregberge.png","language":"TypeScript","readme":"\u003ch1 align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/gregberge/svgr/master/resources/svgr-logo.png\" alt=\"svgr\" title=\"svgr\" width=\"300\"\u003e\n\u003c/h1\u003e\n\u003cp align=\"center\" style=\"font-size: 1.2rem;\"\u003eTransform SVGs into React components 🦁\u003c/p\u003e\n\n[![License](https://img.shields.io/npm/l/@svgr/core.svg)](https://github.com/gregberge/svgr/blob/master/LICENSE)\n[![Donate](https://opencollective.com/svgr/backers/badge.svg)](https://opencollective.com/svgr/donate)\n[![npm package](https://img.shields.io/npm/v/@svgr/core/latest.svg)](https://www.npmjs.com/package/@svgr/core)\n[![npm downloads](https://img.shields.io/npm/dm/@svgr/core.svg)](https://www.npmjs.com/package/@svgr/core)\n[![CI](https://github.com/gregberge/svgr/actions/workflows/ci.yml/badge.svg)](https://github.com/gregberge/svgr/actions/workflows/ci.yml)\n[![Code Coverage](https://img.shields.io/codecov/c/github/gregberge/svgr.svg)](https://codecov.io/github/gregberge/svgr)\n\n[**Try it out online!**](https://react-svgr.com/playground)\n\n[**Watch the talk at React Europe**](https://www.youtube.com/watch?v=geKCzi7ZPkA)\n\nSVGR is an universal tool to transform SVG into React components.\n\nSVGR takes a raw SVG and transforms it into a ready-to-use React component.\n\n## [Docs](https://react-svgr.com)\n\n**See the documentation at [react-svgr.com](https://react-svgr.com)** for more information about using `svgr`!\n\nQuicklinks to some of the most-visited pages:\n\n- [**Playground**](https://react-svgr.com/playground/)\n- [**Getting started**](https://react-svgr.com/docs/getting-started/)\n- [CLI usage](https://react-svgr.com/docs/cli/)\n- [Webpack usage](https://react-svgr.com/docs/webpack/)\n- [Node.js usage](https://react-svgr.com/docs/node-api/)\n\n## Example\n\n**Take a SVG**:\n\n```html\n\u003c?xml version=\"1.0\" encoding=\"UTF-8\"?\u003e\n\u003csvg\n  width=\"48px\"\n  height=\"1px\"\n  viewBox=\"0 0 48 1\"\n  version=\"1.1\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n\u003e\n  \u003c!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch --\u003e\n  \u003ctitle\u003eRectangle 5\u003c/title\u003e\n  \u003cdesc\u003eCreated with Sketch.\u003c/desc\u003e\n  \u003cdefs\u003e\u003c/defs\u003e\n  \u003cg id=\"Page-1\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\"\u003e\n    \u003cg\n      id=\"19-Separator\"\n      transform=\"translate(-129.000000, -156.000000)\"\n      fill=\"#063855\"\n    \u003e\n      \u003cg id=\"Controls/Settings\" transform=\"translate(80.000000, 0.000000)\"\u003e\n        \u003cg id=\"Content\" transform=\"translate(0.000000, 64.000000)\"\u003e\n          \u003cg id=\"Group\" transform=\"translate(24.000000, 56.000000)\"\u003e\n            \u003cg id=\"Group-2\"\u003e\n              \u003crect id=\"Rectangle-5\" x=\"25\" y=\"36\" width=\"48\" height=\"1\"\u003e\u003c/rect\u003e\n            \u003c/g\u003e\n          \u003c/g\u003e\n        \u003c/g\u003e\n      \u003c/g\u003e\n    \u003c/g\u003e\n  \u003c/g\u003e\n\u003c/svg\u003e\n```\n\n**Run SVGR**\n\n```sh\nnpx @svgr/cli --icon --replace-attr-values \"#063855=currentColor\" -- icon.svg\n```\n\n**Get an optimized React component**\n\n```js\nimport * as React from 'react'\n\nconst SvgComponent = (props) =\u003e (\n  \u003csvg width=\"1em\" height=\"1em\" viewBox=\"0 0 48 1\" {...props}\u003e\n    \u003cpath d=\"M0 0h48v1H0z\" fill=\"currentColor\" fillRule=\"evenodd\" /\u003e\n  \u003c/svg\u003e\n)\n\nexport default SvgComponent\n```\n\n## Supporting SVGR\n\nSVGR 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:\n\n- [Sponsor me on GitHub](https://github.com/sponsors/gregberge)\n- [Become a backer or sponsor on OpenCollective](https://opencollective.com/svgr)\n\nLearn more about [supporting SVGR](https://react-svgr.com/docs/supporting-svgr/).\n\n## Contributing\n\nCheck out the [contributing guidelines](CONTRIBUTING.md)\n\n# License\n\nLicensed under the MIT License, Copyright © 2017-present Greg Bergé.\n\nSee [LICENSE](./LICENSE) for more information.\n\n## Acknowledgements\n\nThis 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.\n","funding_links":["https://github.com/sponsors/gregberge","https://opencollective.com/svgr","https://opencollective.com/svgr/donate"],"categories":["JavaScript","SVG","TypeScript","React","Built on rehype","react"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgregberge%2Fsvgr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgregberge%2Fsvgr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgregberge%2Fsvgr/lists"}