{"id":20148265,"url":"https://github.com/maximalism2/msvgc","last_synced_at":"2025-04-09T19:51:58.453Z","repository":{"id":57304542,"uuid":"73284277","full_name":"maximalism2/msvgc","owner":"maximalism2","description":"Make React components from your plain SVG files","archived":false,"fork":false,"pushed_at":"2017-09-15T17:20:28.000Z","size":54,"stargazers_count":67,"open_issues_count":6,"forks_count":14,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-23T21:45:59.495Z","etag":null,"topics":["cli","components","react","react-components","react-naitve","svg","svg-files"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/maximalism2.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-11-09T12:57:51.000Z","updated_at":"2022-05-31T12:09:23.000Z","dependencies_parsed_at":"2022-08-27T02:07:42.924Z","dependency_job_id":null,"html_url":"https://github.com/maximalism2/msvgc","commit_stats":null,"previous_names":["necinc/msvgc"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maximalism2%2Fmsvgc","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maximalism2%2Fmsvgc/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maximalism2%2Fmsvgc/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maximalism2%2Fmsvgc/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/maximalism2","download_url":"https://codeload.github.com/maximalism2/msvgc/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248103902,"owners_count":21048244,"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":["cli","components","react","react-components","react-naitve","svg","svg-files"],"created_at":"2024-11-13T22:36:29.625Z","updated_at":"2025-04-09T19:51:58.419Z","avatar_url":"https://github.com/maximalism2.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# MSVGC\n\nUtils for generating react components from plain svg files \u003cbr /\u003e\n*(compatible with react-native)*\n\n### Install:\n```bash\n# install package globally\nnpm install -g msvgc\n```\n### Usage:\n```bash\n# provide for utils\nmsvgc -f ./path/to/pic.svg -o ./svgComponents/\n```\n\n`--camelCase` flag creates components with camel-case class names\n\n`--react-native` flag creates components using [react-native-svg](https://github.com/react-native-community/react-native-svg) library\n\n`--color` flag creates react-native components with color props passed to the svg children's fill prop\n\n`--typescript` flag will use typescript import statements e.g. (`import * as React`)\n\n`--coffeescript` flag will use CoffeeScript CJSX syntax for creating components\n\n**Notes:**\n\nIf default params are not set, the current working\ndirectory will be used as the path to .svg files with output in the ./svg directory.\n\nSubdirectories containing .svg files will generate their corresponding react components within a subdirectory in the output path.\n\nThe output path contains an index.js that exports all generated components.\n\n### React JS:\nUse generated components in your jsx/tsx/cjsx files:\n\n```js\n[...]\n\nimport Pic from './svgComponents/Pic'\n\nclass MyComponent extends Component {\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cPic width={300} height={100} /\u003e\n        \u003cp\u003eLorem ipsum...\u003c/p\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\n[...]\n```\n\n#### TODO:\n- [x] Create index file in target component directory.\n  - [ ] Provide warning when duplicate component names exist in the index.\n- [ ] Compare existing files in target component directory.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaximalism2%2Fmsvgc","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaximalism2%2Fmsvgc","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaximalism2%2Fmsvgc/lists"}