{"id":19020368,"url":"https://github.com/ambar/reiconify","last_synced_at":"2025-09-01T01:06:07.739Z","repository":{"id":25794908,"uuid":"106535396","full_name":"ambar/reiconify","owner":"ambar","description":"Convert SVG icons to React components eg.: https://ambar.li/reiconify/md.icons/#/Browse","archived":false,"fork":false,"pushed_at":"2025-02-11T10:51:38.000Z","size":2925,"stargazers_count":17,"open_issues_count":2,"forks_count":7,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-23T05:57:54.114Z","etag":null,"topics":["icons","material","mdi","react","react-icons","svg","svg-to-react","svg2react","svgo","svgr"],"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/ambar.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-10-11T09:44:19.000Z","updated_at":"2025-01-22T10:36:29.000Z","dependencies_parsed_at":"2024-02-21T11:26:44.280Z","dependency_job_id":"3e3f8ace-8160-4db6-ade6-7fd70067d7c0","html_url":"https://github.com/ambar/reiconify","commit_stats":{"total_commits":165,"total_committers":6,"mean_commits":27.5,"dds":0.06060606060606055,"last_synced_commit":"a2b88afd7e53a197a2d460514b31bdc54aee0c19"},"previous_names":[],"tags_count":77,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ambar%2Freiconify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ambar%2Freiconify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ambar%2Freiconify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ambar%2Freiconify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ambar","download_url":"https://codeload.github.com/ambar/reiconify/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250379787,"owners_count":21420841,"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":["icons","material","mdi","react","react-icons","svg","svg-to-react","svg2react","svgo","svgr"],"created_at":"2024-11-08T20:16:58.318Z","updated_at":"2025-04-23T05:57:59.416Z","avatar_url":"https://github.com/ambar.png","language":"JavaScript","readme":"# reiconify\n\n[![test workflow](https://github.com/ambar/reiconify/actions/workflows/test.yml/badge.svg)](https://github.com/ambar/reiconify/actions/workflows/test.yml)\n\nConvert SVG icons to React components.\n\n## Features\n\n- Custom component templates, including base class/template.\n- Export both ES modules and CommonJS modules.\n- Provide `center` prop for aligning the icon with text, see also [react-inline-center](https://www.npmjs.com/package/react-inline-center).\n- Provide dev tool for generating static icon site.\n- Generate unique IDs for SVG elements if needed.\n- Format codes with [Prettier](https://github.com/prettier/prettier)\n- Transpile by [esbuild](https://github.com/evanw/esbuild)\n- Support webpack (via [reiconify-loader](./packages/reiconify-loader)), Vite (via [vite-plugin-reiconify](./packages/vite-plugin-reiconify))\n\n## Install\n\n```bash\nnpm install reiconify --save-dev\n# optional serving icons\nnpm install reiconify-serve --save-dev\n```\n\n## CLI Options\n\n```bash\n# reiconify -h\n\nreiconify [options] [files]\n\nOptions:\n      --version     Show version number                                [boolean]\n      --src         Whether to output JSX files       [boolean] [default: false]\n      --src-dir     JSX output directory               [string] [default: \"src\"]\n      --es          Whether to output ES module files [boolean] [default: false]\n      --es-dir      ES output directory                 [string] [default: \"es\"]\n      --cjs         Whether to output CommonJS files  [boolean] [default: false]\n      --cjs-dir     CommonJS output directory          [string] [default: \"cjs\"]\n      --svg         Whether to output optimized SVG files\n                                                      [boolean] [default: false]\n      --svg-dir     Optimized SVG output directory     [string] [default: \"svg\"]\n      --svg-rename  Whether to rename optimized SVG files (based on filename\n                    template)                          [boolean] [default: true]\n  -h                Show help                                          [boolean]\n\n# reiconify-serve -h\n\nOptions:\n      --version  Show version number                                   [boolean]\n      --src-dir  JSX output directory                  [string] [default: \"src\"]\n      --build    Build static site                    [boolean] [default: false]\n  -h             Show help                                             [boolean]\n```\n\n## Configuration File\n\nAdd `reiconify.config.js`(optional) to your project:\n\n```js\nmodule.exports = {\n  template: Function,\n  baseTemplate: Function,\n  filenameTemplate: Function,\n  defaultProps: {},\n  baseDefaultProps: {\n    viewBox: '0 0 24 24',\n  },\n  svgoPlugins: [\n    {\n      removeAttrs: {attrs: ['fill', 'svg:(viewBox)']},\n    },\n  ],\n}\n```\n\n## CLI Usage\n\nAdd npm scripts:\n\n```json\n{\n  \"name\": \"my-icons\",\n  \"main\": \"cjs/index.js\",\n  \"module\": \"es/index.js\",\n  \"files\": [\"src\", \"es\", \"cjs\"],\n  \"scripts\": {\n    \"start\": \"reiconify-serve\",\n    \"build\": \"reiconify --src --es --cjs icons/*.svg\"\n  }\n}\n```\n\nStructure SVG files:\n\n```\nicons\n├── check.svg\n├── thumb-up.svg\n└── ...\n```\n\nBuild icons:\n\n```\nnpm run build\n```\n\nImport icons:\n\n```js\nimport * as Icons from 'my-icons'\n\n\u003cIcons.Check /\u003e\n\u003cIcons.ThumbUp size={20} fill={'#rgb'} /\u003e\n```\n\n## API Usage\n\n```js\nimport {transform} from 'reiconify'\n\nconst code = transform(svg, {format: 'esm', baseName: 'base-icon'})\n```\n\n## Use with Vite\n\nSee [vite-plugin-reiconify](./packages/vite-plugin-reiconify/README.md)\n\n## Use with webpack\n\nSee [reiconify-loader](./packages/reiconify-loader/README.md)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fambar%2Freiconify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fambar%2Freiconify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fambar%2Freiconify/lists"}