{"id":13725652,"url":"https://github.com/bmcmahen/create-react-icons","last_synced_at":"2025-04-14T05:10:44.530Z","repository":{"id":34602425,"uuid":"180509466","full_name":"bmcmahen/create-react-icons","owner":"bmcmahen","description":"a CLI for generating your own react icon components from svg files","archived":false,"fork":false,"pushed_at":"2023-01-03T19:29:39.000Z","size":939,"stargazers_count":77,"open_issues_count":15,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-14T03:48:32.406Z","etag":null,"topics":["icon-pack","icons","react"],"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/bmcmahen.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":"2019-04-10T05:39:29.000Z","updated_at":"2024-09-26T00:59:26.000Z","dependencies_parsed_at":"2023-01-15T08:15:40.629Z","dependency_job_id":null,"html_url":"https://github.com/bmcmahen/create-react-icons","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bmcmahen%2Fcreate-react-icons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bmcmahen%2Fcreate-react-icons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bmcmahen%2Fcreate-react-icons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bmcmahen%2Fcreate-react-icons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bmcmahen","download_url":"https://codeload.github.com/bmcmahen/create-react-icons/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248824681,"owners_count":21167345,"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":["icon-pack","icons","react"],"created_at":"2024-08-03T01:02:30.276Z","updated_at":"2025-04-14T05:10:44.505Z","avatar_url":"https://github.com/bmcmahen.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"Deprecated:\n\nWhile I'm likely to continue using this project for a while, I recommend you use [svgr](https://www.smooth-code.com/open-source/svgr/docs/cli/) instead. \n\n\u003cdiv align=\"center\"\u003e\n    \n# Create react icons\n  \n[![npm package](https://img.shields.io/npm/v/create-react-icons/latest.svg)](https://www.npmjs.com/package/create-react-icons)\n[![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=create-react-icons%20is%20a%20CLI%20for%20generating%20your%20own%20react%20icon%20components%20from%20svg%20files.\u0026url=https://github.com/bmcmahen/create-react-icons\u0026hashtags=react,javascript)\n[![Follow on Twitter](https://img.shields.io/twitter/follow/benmcmahen.svg?style=social\u0026logo=twitter)](\nhttps://twitter.com/intent/follow?screen_name=benmcmahen\n)\n\n\u003c/div\u003e\n\nCreate react icons is a CLI for easily generating react icon components from a set of svg formatted icons. It was originally built to generate the feather icons found in [Sancho-UI](http://sancho-ui.com).\n\nInstall using yarn or npm\n\n```\nyarn global add create-react-icons\n```\n\n```\ncreate-react-icons -s './icons/**.svg' -d path/to/destination\n```\n\n## Features\n\n- Generate javascript or typescript components.\n- Provide a custom ejs template, or use the [included template](https://github.com/bmcmahen/create-react-icons/blob/master/lib/default-js-template.ejs). This flexibility means you could create a component that uses styled-components, themes, or even a non-react component.\n- Generated icons support tree shaking. Bundle only those icons that you use!\n- Creates an index file which exports all of your generated icons.\n\nIt converts something like this:\n\n```svg\n\u003c!--?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?--\u003e\n\u003csvg viewBox=\"0 0 17 17\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" class=\"si-glyph si-glyph-baseball\"\u003e\n    \u003c!-- Generator: Sketch 3.0.3 (7891) - http://www.bohemiancoding.com/sketch --\u003e\n    \u003ctitle\u003e888\u003c/title\u003e\n\n    \u003cdefs\u003e\u003c/defs\u003e\n    \u003cg stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\"\u003e\n        \u003cg fill=\"#434343\"\u003e\n            \u003cpath d=\"M3.518,14.562 C4.434,13.746 5.712,13.19 6.863,12.963 C8.597,12.622 9.894,10.984 9.882,9.151 C9.878,8.305 9.534,7.506 8.916,6.9 C8.345,6.36 7.584,6.062 6.776,6.061 L6.623,6.064 C4.815,6.145 3.773,7.072 3.247,9.071 C2.929,10.291 2.214,11.566 1.411,12.471 C1.976,13.292 2.69,14.002 3.518,14.562 L3.518,14.562 Z\" class=\"si-glyph-fill\"\u003e\u003c/path\u003e\n            \u003cpath d=\"M8,0.046 C3.591,0.046 0.0160000001,3.603 0.0160000001,7.989 C0.0160000001,9.197 0.295,10.337 0.78,11.362 C1.325,10.659 1.837,9.722 2.087,8.766 C2.75,6.246 4.217,4.971 6.571,4.867 L6.772,4.862 C7.891,4.862 8.948,5.279 9.749,6.037 C10.602,6.873 11.074,7.975 11.081,9.142 C11.099,11.542 9.386,13.69 7.096,14.138 C6.22,14.312 5.32,14.682 4.632,15.183 C5.657,15.659 6.796,15.932 8.001,15.932 C12.41,15.932 15.985,12.375 15.985,7.989 C15.985,3.603 12.409,0.046 8,0.046 L8,0.046 Z\" class=\"si-glyph-fill\"\u003e\u003c/path\u003e\n        \u003c/g\u003e\n    \u003c/g\u003e\n\u003c/svg\u003e\n```\n\ninto this:\n\n```jsx\nimport React from \"react\";\nimport PropTypes from \"prop-types\";\n\nexport function IconBaseball(props) {\n  const { size, color, ...other } = props;\n  return (\n    \u003csvg\n      viewBox=\"0 0 17 17\"\n      version=\"1.1\"\n      height={size}\n      width={size}\n      {...other}\n    \u003e\n      \u003ctitle\u003e888\u003c/title\u003e\n\n      \u003cdefs /\u003e\n      \u003cg stroke=\"none\" fill=\"none\" strokeWidth=\"1\" fillRule=\"evenodd\"\u003e\n        \u003cg fill={color}\u003e\n          \u003cpath d=\"M3.518,14.562 C4.434,13.746 5.712,13.19 6.863,12.963 C8.597,12.622 9.894,10.984 9.882,9.151 C9.878,8.305 9.534,7.506 8.916,6.9 C8.345,6.36 7.584,6.062 6.776,6.061 L6.623,6.064 C4.815,6.145 3.773,7.072 3.247,9.071 C2.929,10.291 2.214,11.566 1.411,12.471 C1.976,13.292 2.69,14.002 3.518,14.562 L3.518,14.562 Z\" /\u003e\n          \u003cpath d=\"M8,0.046 C3.591,0.046 0.0160000001,3.603 0.0160000001,7.989 C0.0160000001,9.197 0.295,10.337 0.78,11.362 C1.325,10.659 1.837,9.722 2.087,8.766 C2.75,6.246 4.217,4.971 6.571,4.867 L6.772,4.862 C7.891,4.862 8.948,5.279 9.749,6.037 C10.602,6.873 11.074,7.975 11.081,9.142 C11.099,11.542 9.386,13.69 7.096,14.138 C6.22,14.312 5.32,14.682 4.632,15.183 C5.657,15.659 6.796,15.932 8.001,15.932 C12.41,15.932 15.985,12.375 15.985,7.989 C15.985,3.603 12.409,0.046 8,0.046 L8,0.046 Z\" /\u003e\n        \u003c/g\u003e\n      \u003c/g\u003e\n    \u003c/svg\u003e\n  );\n}\n\nIconBaseball.defaultProps = {\n  color: \"currentColor\",\n  size: 24\n};\n\nIconBaseball.propTypes = {\n  color: PropTypes.string,\n  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])\n};\n```\n\n## API\n\n```\nUsage: create-react-icons [options]\n\nOptions:\n  -V, --version             output the version number\n  -s, --source \u003cpath\u003e       Path to the svg icons source ('./path/**.svg')\n  -d, --destination \u003cpath\u003e  Destination path for the react components (./path/destination)\n  -t, --template \u003cpath\u003e     Path to ejs react component template (./path/template.ejs)\n  --typescript              Generate typescript icons\n  -h, --help                output usage information\n```\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbmcmahen%2Fcreate-react-icons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbmcmahen%2Fcreate-react-icons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbmcmahen%2Fcreate-react-icons/lists"}