{"id":26220978,"url":"https://github.com/budavariam/babel-react-extract-svg","last_synced_at":"2026-04-20T23:31:52.542Z","repository":{"id":39133099,"uuid":"262564486","full_name":"budavariam/babel-react-extract-svg","owner":"budavariam","description":"A quick proof of concept babel plugin that refactors a react codebase to extract inline svg as separate svg files.","archived":false,"fork":false,"pushed_at":"2023-01-06T05:24:04.000Z","size":4238,"stargazers_count":1,"open_issues_count":21,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-12-28T13:33:40.983Z","etag":null,"topics":["babel","babel-plugin","create-react-app","refactoring","refactoring-tools","svg"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/budavariam.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-05-09T12:19:39.000Z","updated_at":"2023-03-09T01:27:45.000Z","dependencies_parsed_at":"2023-02-05T10:16:12.435Z","dependency_job_id":null,"html_url":"https://github.com/budavariam/babel-react-extract-svg","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/budavariam/babel-react-extract-svg","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/budavariam%2Fbabel-react-extract-svg","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/budavariam%2Fbabel-react-extract-svg/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/budavariam%2Fbabel-react-extract-svg/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/budavariam%2Fbabel-react-extract-svg/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/budavariam","download_url":"https://codeload.github.com/budavariam/babel-react-extract-svg/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/budavariam%2Fbabel-react-extract-svg/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32070618,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-20T21:26:33.338Z","status":"ssl_error","status_checked_at":"2026-04-20T21:26:22.081Z","response_time":94,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: 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":["babel","babel-plugin","create-react-app","refactoring","refactoring-tools","svg"],"created_at":"2025-03-12T15:28:59.567Z","updated_at":"2026-04-20T23:31:52.517Z","avatar_url":"https://github.com/budavariam.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Babel React Extract SVG\n\nA quick proof of concept babel plugin that refactors a react codebase\nto extract inline svg as separate svg files.\n\nMain inspiration: I learned that you can\n[import svg files as components](https://create-react-app.dev/docs/adding-images-fonts-and-files#adding-svgs)\nwith create-react-app.\n\n## Getting started\n\n```bash\nyarn\nyarn run svg-extract\n```\n\n## Expected structure\n\nIt expects that the icons are loccated in a certain folder.\nThe icons are js filles that contain svg assets as function components.\nMore assets can be stored in a single file.\n\n```js\nimport React from \"react\"\n\nexport const logo = ({ width, height }) =\u003e (\n    \u003csvg width={width} height={height} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 841.9 595.3\"\u003e\n        \u003cg fill=\"#61DAFB\"\u003e\n            \u003ccircle cx=\"420.9\" cy=\"296.5\" r=\"45.7\" /\u003e\n        \u003c/g\u003e\n    \u003c/svg\u003e\n)\n```\n\n## Generated structure\n\nIt extracts the top level svg components from these kind of js files,\nand saves them to a separate place.\n\nFor project backward compatibility it keeps the file structure,\nand the variables to export.\n\nI think it is better to export them here,\nif any extra logic needed they can manipulate props in these js files.\n\n```js\nimport React from \"react\"\nimport { ReactComponent as Logo } from \"../icons/logo.svg\"\n\nexport const logo = (width, height) =\u003e (\u003cLogo width={width} height={height} /\u003e)\n```\n\n\u003e NOTE: This plugin is meant to be run only one time,\n\u003e while refactoring code to this approach from the previous one.\n\n## Disclaimer\n\nThis is my fist ever babel plugin.\nThis code is not prepared for any kind of case, I made it to have some fun.\n\nI just wanted to try if babel can save me many hours of\nrepetitive copy/paste file creation, function renaming work.\nI'm happy that it worked exactly as I wanted it to be.\n\nIt should not do anything desctructive, but I'm sure\nit won't work for the first time in any repository that has different constrains.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbudavariam%2Fbabel-react-extract-svg","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbudavariam%2Fbabel-react-extract-svg","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbudavariam%2Fbabel-react-extract-svg/lists"}