{"id":17912036,"url":"https://github.com/arnaudbarre/vite-plugin-fast-react-svg","last_synced_at":"2026-04-11T10:15:53.036Z","repository":{"id":57393090,"uuid":"454785746","full_name":"ArnaudBarre/vite-plugin-fast-react-svg","owner":"ArnaudBarre","description":"Turn SVG into React components, without Babel","archived":false,"fork":false,"pushed_at":"2025-09-28T20:31:32.000Z","size":114,"stargazers_count":13,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-11-27T12:12:32.104Z","etag":null,"topics":["react","svg","vite"],"latest_commit_sha":null,"homepage":"","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/ArnaudBarre.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-02-02T13:29:49.000Z","updated_at":"2025-09-29T17:58:21.000Z","dependencies_parsed_at":"2024-06-19T05:29:11.344Z","dependency_job_id":"7abe3b07-a7c1-46c8-a66e-31a567ff1d62","html_url":"https://github.com/ArnaudBarre/vite-plugin-fast-react-svg","commit_stats":{"total_commits":11,"total_committers":2,"mean_commits":5.5,"dds":"0.36363636363636365","last_synced_commit":"ec71ef79317c2eb24c26fcbf1521633fa4325560"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"purl":"pkg:github/ArnaudBarre/vite-plugin-fast-react-svg","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArnaudBarre%2Fvite-plugin-fast-react-svg","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArnaudBarre%2Fvite-plugin-fast-react-svg/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArnaudBarre%2Fvite-plugin-fast-react-svg/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArnaudBarre%2Fvite-plugin-fast-react-svg/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ArnaudBarre","download_url":"https://codeload.github.com/ArnaudBarre/vite-plugin-fast-react-svg/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArnaudBarre%2Fvite-plugin-fast-react-svg/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31491097,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-06T17:22:55.647Z","status":"ssl_error","status_checked_at":"2026-04-06T17:22:54.741Z","response_time":112,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["react","svg","vite"],"created_at":"2024-10-28T19:42:46.476Z","updated_at":"2026-04-06T22:01:18.962Z","avatar_url":"https://github.com/ArnaudBarre.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vite-plugin-fast-react-svg [![npm](https://img.shields.io/npm/v/vite-plugin-fast-react-svg)](https://www.npmjs.com/package/vite-plugin-fast-react-svg)\n\nTurn SVG into React components, without Babel.\n\n⚠️ This plugin expects svg to be cleanup by [svgo](https://github.com/svg/svgo) with `convertStyleToAttrs` enable. You can also use the [web version](https://jakearchibald.github.io/svgomg/) and toggle `Style to attributes`.\n\n## Why\n\nWhile [svgr](https://github.com/gregberge/svgr) is great, it uses AST transformation from Babel, which is too slow (~300ms per SVG). This plugin uses regex manipulations and `dangerouslySetInnerHTML`, which is almost instantaneous. It's working well for SVG optimized by [svgo](https://github.com/svg/svgo).\n\n## Installation\n\n```sh\nnpm i -D vite-plugin-fast-react-svg\n```\n\nIn your vite config:\n\n```ts\nimport { defineConfig } from \"vite\";\nimport { svgPlugin } from \"vite-plugin-fast-react-svg\";\n\nexport default defineConfig({\n  plugins: [svgPlugin()],\n});\n```\n\nIn `tsconfig.json`:\n\n```json5\n{\n  compilerOptions: {\n    types: [\"vite-plugin-fast-react-svg/types\", \"vite/client\"],\n  },\n}\n```\n\nIf you use a custom `.d.ts` file instead of `tsconfig.json` to include Vite Client Types, you will need to modify it accordingly:\n\n```\n/// \u003creference types=\"vite-plugin-fast-react-svg/types\" /\u003e\n/// \u003creference types=\"vite/client\" /\u003e\n```\n\n\u003e N.B: You only need to include Vite Client Types via `tsconfig.json` _or_ a custom `d.ts` file. Both are not needed, so if you have included the types in `tsconfig.json` you can safely delete your `.d.ts` file.\n\n## Usage\n\n```jsx\nimport Logo from \"./logo.svg\";\n\nconst Example = () =\u003e (\n  \u003c\u003e\n    \u003cLogo /\u003e\n  \u003c/\u003e\n);\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnaudbarre%2Fvite-plugin-fast-react-svg","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farnaudbarre%2Fvite-plugin-fast-react-svg","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnaudbarre%2Fvite-plugin-fast-react-svg/lists"}