{"id":18817299,"url":"https://github.com/blueberryapps/react-svg-icon-generator","last_synced_at":"2025-07-28T19:07:19.914Z","repository":{"id":49311984,"uuid":"53747636","full_name":"blueberryapps/react-svg-icon-generator","owner":"blueberryapps","description":"Generate React Icon Component from SVG icons to show, resize and recolor them.","archived":false,"fork":false,"pushed_at":"2023-07-10T23:53:51.000Z","size":886,"stargazers_count":64,"open_issues_count":15,"forks_count":21,"subscribers_count":25,"default_branch":"master","last_synced_at":"2025-06-09T12:49:56.885Z","etag":null,"topics":["blueberry-opensource","generator","icon","radium","react","react-component","svg","svg-icons"],"latest_commit_sha":null,"homepage":"https://react-svg-icon-live-generator.herokuapp.com","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/blueberryapps.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","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":"2016-03-12T18:44:41.000Z","updated_at":"2024-02-05T13:12:11.000Z","dependencies_parsed_at":"2024-06-18T18:29:25.064Z","dependency_job_id":"7db3c7c3-a5d4-4f96-837a-2557fb148f88","html_url":"https://github.com/blueberryapps/react-svg-icon-generator","commit_stats":{"total_commits":70,"total_committers":17,"mean_commits":4.117647058823529,"dds":0.6142857142857143,"last_synced_commit":"f2fc99241027fa19fe3153f5f66eb9c5d9ad8fb2"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/blueberryapps/react-svg-icon-generator","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blueberryapps%2Freact-svg-icon-generator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blueberryapps%2Freact-svg-icon-generator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blueberryapps%2Freact-svg-icon-generator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blueberryapps%2Freact-svg-icon-generator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/blueberryapps","download_url":"https://codeload.github.com/blueberryapps/react-svg-icon-generator/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blueberryapps%2Freact-svg-icon-generator/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267569149,"owners_count":24109016,"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","status":"online","status_checked_at":"2025-07-28T02:00:09.689Z","response_time":68,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["blueberry-opensource","generator","icon","radium","react","react-component","svg","svg-icons"],"created_at":"2024-11-08T00:10:44.911Z","updated_at":"2025-07-28T19:07:19.880Z","avatar_url":"https://github.com/blueberryapps.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React SVG Icon Generator [![Dependency Status](https://dependencyci.com/github/blueberryapps/react-svg-icon-generator/badge)](https://dependencyci.com/github/blueberryapps/react-svg-icon-generator)\n\nGenerate React Icon Component from SVG icons to show, resize and recolor them.\n\nWe have prepared live demo for you at [React SVG Icon Live Generator](https://react-svg-icon-live-generator.herokuapp.com)\n\n📱Supports React Native 💕\n\n## Fastest way to get your svg converted to React Component\n\n```\nyarn global add react-svg-icon-generator\nyarn svg-icon-generate -- --svgDir ./icons --destination ./Icon.tsx\n```\n\nfor detailed options run just `yarn react-svg-icon-generator`\n\n## Preview of Generated Component\n\n![Preview](https://raw.githubusercontent.com/blueberryapps/react-svg-icon-generator/master/examples/previews.png)\n\n[source directory with SVG](https://github.com/blueberryapps/react-svg-icon-generator/tree/master/examples/simple/icons) and [this is output component from gulp task](https://github.com/blueberryapps/react-svg-icon-generator/blob/master/examples/simple/components/Icon.js) so in production you are without any dependencies at all.\n\n## Instalation\n\nyou need to add this just to development, because it will generate self contained react component directly to your codebase\n```bash\nnpm install --save-dev react-svg-icon-generator\n```\n\n## Setup gulp task simple\n\n\n```js\nconst configureSvgIcon = require('react-svg-icon-generator').default;\n\nconfigureSvgIcon({\n  destination: path.join(__dirname, 'components', 'Icon.js'),\n  svgDir: './icons',\n});\n```\n\n- **svgDir** (required) - path to your directory with svg files. Can be relative path but it is better to use `path.join(__dirname, 'icons')` absolute path so it will work in any directory of project\n- **destination** (required) -  path.join(__dirname, 'components', 'Icon.js')\n\nrun it by `gulp svg-icon`\n\n## Setup gulp task full\n\n```js\nconst configureSvgIcon = require('react-svg-icon-generator').default;\n\nconfigureSvgIcon({\n  comment: 'Generated by gulp svg-icon, if you add new icon run gulp svg-icon',\n  componentName: 'Icon',\n  destination: path.join(__dirname, 'components', 'Icon.js'),\n  keepFillColor: false,\n  native: false,\n  radium: true,\n  reactPureRender: true,\n  svgDir: path.join(__dirname, 'icons'),\n  template: path.join(__dirname, 'template', 'icon.nunjucks'),\n});\n```\n\n\n- **comment** (optional) - it will be added to generated component, so other developer will know what to do\n- **componentName** (optional) - it will change the name of the component, default to 'Icon'\n- **keepFillColor** (optional) - it will keep the original fill color from imported SVG in case you want to use multiple colors in your icon, therefore you will not be able to use `color` prop\n- **native** (optional) - it will generate component that can be used in React Native projects. This functionality depends on [react-native-svg](https://github.com/react-native-community/react-native-svg) library that has to be installed separately (it is not included in dependencies). You can easily overwrite [default native template](template/icon_native.nunjucks) using *template* option\n- **reactPureRender** (optional) - it will use `import {PureComponent} from 'react';` instead of `import {Component} from 'react';`. If you use this, make sure you use React \u003e= v15.3.0.\n- **radium** (optional) - it will import radium and wrap Icon component with Radium wrapper. In order to use Radium it has to be installed separately (it is not part of dependencies).\n- **template** (optional) - provide path to your custom template, you can look at example at [Icon.template](template/icon.nunjucks)\n\n\nrun it by `gulp svg-icon`\n\n## Setup gulp task own name\n\n```js\nconst {configureGenerator} = require('react-svg-icon-generator').default;\n\nconst config = {\n  comment: 'Generated by gulp svg-icon, if you add new icon run gulp svg-icon-whatever',\n  destination: path.join(__dirname, 'components', 'Icon.js'),\n  reactPureRender: true,\n  svgDir: path.join(__dirname, 'icons'),\n  template: path.join(__dirname, 'template', 'icon.nunjucks'),\n}\n\ngulp.task('svg-icon-whatever', configureGenerator(config));\n```\n\n\nsame as previous + your own task name\n\n\n## Use generate Icon component\n\n```js\nimport React, {Component} from 'react';\nimport Icon from './Icon';\n\nexport default class App extends Component {\n  render() {\n    return (\n      \u003cdiv\u003e\n        Simple possible usage\n        \u003cIcon kind='clock' /\u003e\n\n        Setup color and bounding width and height\n        \u003cIcon kind='close' color='#748' width={500} height={100} /\u003e\n\n        Setup color and bounding width and height to size (square)\n        \u003cIcon kind='close' color='red' size={600} /\u003e\n\n        Setup custom style and className\n        \u003cIcon kind=\"arrow_left\" style={{transform: 'scaleX(-1)'}} className=\"custom-class\" /\u003e\n\n        Setup onClick behavior\n        \u003cIcon kind='close' onClick={() =\u003e alert('clicked on icon')} /\u003e\n\n        Show all icons at once with description (for finding right icon)\n        \u003cIcon preview /\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n```\n\nany prop which is not listed will be passed directly to svg as rest props.\n\n## Development\n\n```bash\ngit clone git@github.com:blueberryapps/react-svg-icon-generator.git\ncd react-svg-icon\nnpm i\nnpm link\ncd examples/simple\nnpm link react-svg-icon-generator\nnpm i\ngulp svg-icon\nnpm start\nopen http://127.0.0.1:3000\n```\n\n## Thanks\nThis package was build upon [Library Boilerplate](https://github.com/gaearon/library-boilerplate) from [Dan Abramov](https://github.com/gaearon)\n\n## Made with love by\n[![](https://camo.githubusercontent.com/d88ee6842f3ff2be96d11488aa0d878793aa67cd/68747470733a2f2f7777772e676f6f676c652e636f6d2f612f626c75656265727279617070732e636f6d2f696d616765732f6c6f676f2e676966)](https://www.blueberry.io)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblueberryapps%2Freact-svg-icon-generator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fblueberryapps%2Freact-svg-icon-generator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblueberryapps%2Freact-svg-icon-generator/lists"}