{"id":16581797,"url":"https://github.com/panr/icon2code","last_synced_at":"2025-03-23T14:31:03.589Z","repository":{"id":42991596,"uuid":"202113413","full_name":"panr/icon2code","owner":"panr","description":"Figma plugin for generating JSON from icons set","archived":false,"fork":false,"pushed_at":"2023-05-06T12:51:11.000Z","size":902,"stargazers_count":26,"open_issues_count":6,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-18T21:06:45.488Z","etag":null,"topics":["figma","figma-plugins","icons","json","plugin","react"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/panr.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":"2019-08-13T09:44:44.000Z","updated_at":"2025-02-24T18:31:22.000Z","dependencies_parsed_at":"2024-10-28T16:18:15.864Z","dependency_job_id":"ae0ccfbe-b8d1-4a9e-976b-e48fa84af001","html_url":"https://github.com/panr/icon2code","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/panr%2Ficon2code","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/panr%2Ficon2code/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/panr%2Ficon2code/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/panr%2Ficon2code/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/panr","download_url":"https://codeload.github.com/panr/icon2code/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245115689,"owners_count":20563210,"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":["figma","figma-plugins","icons","json","plugin","react"],"created_at":"2024-10-11T22:29:53.629Z","updated_at":"2025-03-23T14:31:03.175Z","avatar_url":"https://github.com/panr.png","language":"TypeScript","funding_links":["https://www.buymeacoffee.com/panr"],"categories":[],"sub_categories":[],"readme":"![Cover Image](https://www.dropbox.com/s/3z2oij3vsufpwa6/cover.png?raw=1)\n\n**For designers**: Easily create a JSON file for your fellow developers with everything they need to create a custom Icon component using their favorite framework or library (React, Angular, Vue etc.). No exports, copying and pasting files, no code cleaning or additional optimizations.\n\n**For developers**: Imagine that you receive a bunch of icons from your fellow designer. You have to extract needed data from all those SVG files... It's time consuming... Forget about it. Now you can easily export all icons data to a JSON file with one click! If you have a custom Icon component in React, Angular or Vue — that's all you need.\n\n**How it works:**\n1. Create frames / components / instances with unique names (plugin seeks for every frame / components / instances in a current page)\n2. Draw icons or paste them from your favorite tool (like IconJar)\n3. Flatten them (if they are not already)\n4. Use the plugin to create a JSON with needed data\n5. Use data with your custom Icon component\n6. 🎉\n\nTip! Hidden frames are skipped by the plugin\n\n---\n**Custom components \u0026 examples:**\n\n1. React — [https://codesandbox.io/s/react-icon-component-3giqg](https://codesandbox.io/s/react-icon-component-3giqg)\n2. Angular (by @foull) — [https://codesandbox.io/s/angular-icon-component-pg7py](https://codesandbox.io/s/angular-icon-component-pg7py)\n3. Vue — [https://codesandbox.io/s/vue-icon-component-neclt](https://codesandbox.io/s/vue-icon-component-neclt)\n4. Svelte — [https://codesandbox.io/s/svelte-icon-component-5qyr3](https://codesandbox.io/s/svelte-icon-component-5qyr3)\n---\n\n**Icon data model:**\n```\n{\n  name: string;\n  paths: { windingRule: string, data: string }[];\n  size: {\n    width: number;\n    height: number;\n  };\n  fill: {\n    rgb: string;\n    hsl: string;\n    hex: string;\n  };\n  translate: {\n    x: number;\n    y: number;\n  };\n  viewBox: string;\n}\n```\n\n### Contribution\n\nIf you have an idea how to improve this plugin, please raise a Pull Request 😎\n\n### How to run plugin locally\n\n1. Install `yarn` and dependencies.\n2. Run `yarn dev`.\n3. Link this plugin with Figma (Go to Plugins -\u003e Development -\u003e Create new plugin -\u003e Drag manifest.json)\n4. Do your magic 🤩\n\n## Sponsoring\n\nIf you like my work and want to support the development of the project, now you can! Just:\n\n\u003ca href=\"https://www.buymeacoffee.com/panr\" target=\"_blank\"\u003e\u003cimg src=\"https://res.cloudinary.com/panr/image/upload/v1579374705/buymeacoffee_y6yvov.svg\" alt=\"Buy Me A Coffee\" \u003e\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpanr%2Ficon2code","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpanr%2Ficon2code","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpanr%2Ficon2code/lists"}