[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-70706":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":19,"rankGlobal":10,"rankLanguage":10,"license":20,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":21,"hasPages":21,"topics":23,"createdAt":10,"pushedAt":10,"updatedAt":38,"readmeContent":39,"aiSummary":40,"trendingCount":16,"starSnapshotCount":16,"syncStatus":17,"lastSyncTime":41,"discoverSource":42},70706,"svgr","gregberge\u002Fsvgr","gregberge","Transform SVGs into React components 🦁","https:\u002F\u002Freact-svgr.com",null,"TypeScript",11035,439,32,120,0,2,10,42.93,"MIT License",false,"main",[24,25,26,27,28,29,30,31,32,33,34,35,36,37],"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","2026-06-12 02:02:42","\u003Ch1 align=\"center\">\n  \u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fgregberge\u002Fsvgr\u002Fmaster\u002Fresources\u002Fsvgr-logo.png\" alt=\"svgr\" title=\"svgr\" width=\"300\">\n\u003C\u002Fh1>\n\u003Cp align=\"center\" style=\"font-size: 1.2rem;\">Transform SVGs into React components 🦁\u003C\u002Fp>\n\n[![License](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fl\u002F@svgr\u002Fcore.svg)](https:\u002F\u002Fgithub.com\u002Fgregberge\u002Fsvgr\u002Fblob\u002Fmaster\u002FLICENSE)\n[![Donate](https:\u002F\u002Fopencollective.com\u002Fsvgr\u002Fbackers\u002Fbadge.svg)](https:\u002F\u002Fopencollective.com\u002Fsvgr\u002Fdonate)\n[![npm package](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@svgr\u002Fcore\u002Flatest.svg)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@svgr\u002Fcore)\n[![npm downloads](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002F@svgr\u002Fcore.svg)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@svgr\u002Fcore)\n[![CI](https:\u002F\u002Fgithub.com\u002Fgregberge\u002Fsvgr\u002Factions\u002Fworkflows\u002Fci.yml\u002Fbadge.svg)](https:\u002F\u002Fgithub.com\u002Fgregberge\u002Fsvgr\u002Factions\u002Fworkflows\u002Fci.yml)\n[![Code Coverage](https:\u002F\u002Fimg.shields.io\u002Fcodecov\u002Fc\u002Fgithub\u002Fgregberge\u002Fsvgr.svg)](https:\u002F\u002Fcodecov.io\u002Fgithub\u002Fgregberge\u002Fsvgr)\n\n[**Try it out online!**](https:\u002F\u002Freact-svgr.com\u002Fplayground)\n\n[**Watch the talk at React Europe**](https:\u002F\u002Fwww.youtube.com\u002Fwatch?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:\u002F\u002Freact-svgr.com)\n\n**See the documentation at [react-svgr.com](https:\u002F\u002Freact-svgr.com)** for more information about using `svgr`!\n\nQuicklinks to some of the most-visited pages:\n\n- [**Playground**](https:\u002F\u002Freact-svgr.com\u002Fplayground\u002F)\n- [**Getting started**](https:\u002F\u002Freact-svgr.com\u002Fdocs\u002Fgetting-started\u002F)\n- [CLI usage](https:\u002F\u002Freact-svgr.com\u002Fdocs\u002Fcli\u002F)\n- [Webpack usage](https:\u002F\u002Freact-svgr.com\u002Fdocs\u002Fwebpack\u002F)\n- [Node.js usage](https:\u002F\u002Freact-svgr.com\u002Fdocs\u002Fnode-api\u002F)\n\n## Example\n\n**Take a SVG**:\n\n```html\n\u003C?xml version=\"1.0\" encoding=\"UTF-8\"?>\n\u003Csvg\n  width=\"48px\"\n  height=\"1px\"\n  viewBox=\"0 0 48 1\"\n  version=\"1.1\"\n  xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\"\n  xmlns:xlink=\"http:\u002F\u002Fwww.w3.org\u002F1999\u002Fxlink\"\n>\n  \u003C!-- Generator: Sketch 46.2 (44496) - http:\u002F\u002Fwww.bohemiancoding.com\u002Fsketch -->\n  \u003Ctitle>Rectangle 5\u003C\u002Ftitle>\n  \u003Cdesc>Created with Sketch.\u003C\u002Fdesc>\n  \u003Cdefs>\u003C\u002Fdefs>\n  \u003Cg id=\"Page-1\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n    \u003Cg\n      id=\"19-Separator\"\n      transform=\"translate(-129.000000, -156.000000)\"\n      fill=\"#063855\"\n    >\n      \u003Cg id=\"Controls\u002FSettings\" transform=\"translate(80.000000, 0.000000)\">\n        \u003Cg id=\"Content\" transform=\"translate(0.000000, 64.000000)\">\n          \u003Cg id=\"Group\" transform=\"translate(24.000000, 56.000000)\">\n            \u003Cg id=\"Group-2\">\n              \u003Crect id=\"Rectangle-5\" x=\"25\" y=\"36\" width=\"48\" height=\"1\">\u003C\u002Frect>\n            \u003C\u002Fg>\n          \u003C\u002Fg>\n        \u003C\u002Fg>\n      \u003C\u002Fg>\n    \u003C\u002Fg>\n  \u003C\u002Fg>\n\u003C\u002Fsvg>\n```\n\n**Run SVGR**\n\n```sh\nnpx @svgr\u002Fcli --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) => (\n  \u003Csvg width=\"1em\" height=\"1em\" viewBox=\"0 0 48 1\" {...props}>\n    \u003Cpath d=\"M0 0h48v1H0z\" fill=\"currentColor\" fillRule=\"evenodd\" \u002F>\n  \u003C\u002Fsvg>\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](\u002FBACKERS.md). If you'd like to join them, please consider:\n\n- [Sponsor me on GitHub](https:\u002F\u002Fgithub.com\u002Fsponsors\u002Fgregberge)\n- [Become a backer or sponsor on OpenCollective](https:\u002F\u002Fopencollective.com\u002Fsvgr)\n\nLearn more about [supporting SVGR](https:\u002F\u002Freact-svgr.com\u002Fdocs\u002Fsupporting-svgr\u002F).\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](.\u002FLICENSE) for more information.\n\n## Acknowledgements\n\nThis project has been popularized by [Christopher Chedeau](https:\u002F\u002Ftwitter.com\u002Fvjeux) and it has been included in [create-react-app](https:\u002F\u002Fgithub.com\u002Ffacebook\u002Fcreate-react-app) thanks to [Dan Abramov](https:\u002F\u002Ftwitter.com\u002Fdan_abramov). We would like to thanks [Sven Sauleau](https:\u002F\u002Ftwitter.com\u002Fsvensauleau) for his help and its intuition.\n","SVGR 是一个将SVG文件转换为React组件的工具。它能够读取原始SVG，并将其转换成可以直接使用的React组件，支持自定义属性替换和优化，如颜色值替换等。项目基于TypeScript开发，确保了代码的质量与类型安全，同时提供了CLI、Webpack loader以及Node.js API等多种使用方式，方便开发者根据具体需求选择最适合的集成方案。适用于需要在React或React Native项目中高效复用SVG图形的各种场景。","2026-06-11 03:33:43","high_star"]