{"id":3917,"url":"https://github.com/aykutkardas/react-icomoon","last_synced_at":"2025-04-04T07:05:29.920Z","repository":{"id":32602139,"uuid":"137885126","full_name":"aykutkardas/react-icomoon","owner":"aykutkardas","description":"It makes it very simple to use SVG icons in your React and React-Native projects.","archived":false,"fork":false,"pushed_at":"2023-10-23T12:23:59.000Z","size":751,"stargazers_count":216,"open_issues_count":3,"forks_count":22,"subscribers_count":6,"default_branch":"main","last_synced_at":"2024-05-01T15:06:18.660Z","etag":null,"topics":["hacktoberfest","icomoon","icon","icons","react","react-native","reactjs","svg","svg-icons"],"latest_commit_sha":null,"homepage":"https://svgps.app","language":"TypeScript","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/aykutkardas.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":"aykutkardas"}},"created_at":"2018-06-19T11:55:49.000Z","updated_at":"2024-06-18T13:34:32.473Z","dependencies_parsed_at":"2024-06-18T13:34:00.407Z","dependency_job_id":"b2fb4ed3-c4f6-4271-a6b1-6e2053eaf5b2","html_url":"https://github.com/aykutkardas/react-icomoon","commit_stats":{"total_commits":155,"total_committers":7,"mean_commits":"22.142857142857142","dds":0.06451612903225812,"last_synced_commit":"6e1a4039f6bbcd6eb6341984e501037ab3e1204d"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aykutkardas%2Freact-icomoon","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aykutkardas%2Freact-icomoon/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aykutkardas%2Freact-icomoon/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aykutkardas%2Freact-icomoon/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aykutkardas","download_url":"https://codeload.github.com/aykutkardas/react-icomoon/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247135142,"owners_count":20889420,"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":["hacktoberfest","icomoon","icon","icons","react","react-native","reactjs","svg","svg-icons"],"created_at":"2024-01-05T20:16:55.273Z","updated_at":"2025-04-04T07:05:29.904Z","avatar_url":"https://github.com/aykutkardas.png","language":"TypeScript","funding_links":["https://github.com/sponsors/aykutkardas","https://www.buymeacoffee.com/aykutkardas"],"categories":["Components","UI Components"],"sub_categories":["UI","Icons","Icon"],"readme":"![React-Icomoon Logo](/banner.png)\n\n[![Build Status](https://github.com/aykutkardas/react-icomoon/workflows/build/badge.svg?color=%234fc921)](https://github.com/aykutkardas/react-icomoon/actions)\n[![npm](https://img.shields.io/npm/v/react-icomoon?color=%234fc921)](https://www.npmjs.com/package/react-icomoon)\n![npm](https://img.shields.io/npm/dw/react-icomoon)\n[![License](https://img.shields.io/badge/License-MIT-green.svg?color=%234fc921)](https://opensource.org/licenses/MIT)\n\nIt makes it very simple to use SVG icons in your `React` and `React-Native` projects.\n\n### [Cheatsheet](https://cig2vx.csb.app/) - [Interactive Demo](https://codesandbox.io/s/react-icomoon-demo-13pce) - [Buy Me a Coffee](https://www.buymeacoffee.com/aykutkardas)\n\n## Install\n\n```\nnpm install react-icomoon\n```\n\n```\nyarn add react-icomoon\n```\n\n## Usage\n\nYou can use [svgps.app](https://svgps.app/) to access over `40,000` free icons and convert your own icons into `selection.json`.\n\nOr you can use [IcoMoon](https://icomoon.io/app/) to generate the `selection.json` file.\n\n### Declare\n\n```js\n// Icon.jsx\nimport IcoMoon from \"react-icomoon\";\nimport iconSet from \"./selection.json\";\n\nconst Icon = (props) =\u003e \u003cIcoMoon iconSet={iconSet} {...props} /\u003e;\n\nexport default Icon;\n```\n\n#### With TypeScript\n\n```tsx\n// Icon.tsx\nimport IcoMoon, { IconProps } from \"react-icomoon\";\nimport iconSet from \"./selection.json\";\n\nconst Icon = (props: IconProps) =\u003e \u003cIcoMoon iconSet={iconSet} {...props} /\u003e;\n\nexport default Icon;\n```\n\n### Use\n\n```js\nimport Icon from \"./Icon\";\n\n\u003cIcon icon=\"pencil\" size={20} color=\"orange\" /\u003e;\n```\n\n## Props List\n\n| Name              | Type          | Default | Sample                        |\n| ----------------- | ------------- | ------- | ----------------------------- |\n| iconSet           | Object        | -       | \"selection.json file content\" |\n| icon              | String        | -       | \"home\"                        |\n| size              | Number,String | -       | \"1em\", 10, \"100px\"            |\n| color             | String        | -       | \"red\", \"#f00\", \"rgb(0,0,0)\"   |\n| style             | Object        | {...}   | { color: '#ff0'}              |\n| title             | String        | -       | \"Icon Title\"                  |\n| className         | String        | -       | \"icomoon\"                     |\n| disableFill       | Boolean       | -       | true                          |\n| removeInlineStyle | Boolean       | -       | true                          |\n\n### Default Style\n\n```js\n{\n  display: \"inline-block\",\n  stroke: \"currentColor\",\n  fill: \"currentColor\",\n}\n```\n\n## iconList\n\nYou can use the iconList method to see a complete list of icons you can use.\n\n```js\nimport IcoMoon, { iconList } from \"react-icomoon\";\n\niconList(iconSet);\n\n// sample output\n[\n  \"document\",\n  \"camera\",\n  \"genius\",\n  \"chat\",\n  \"heart1\",\n  \"alarmclock\",\n  \"star-full\",\n  \"heart\",\n  \"play3\",\n  \"pause2\",\n  \"bin1\",\n];\n```\n\n## React Native 🎉 • [Demo](https://snack.expo.io/@aykutkardas/react-icomoon)\n\n### **Step 1:** Install Dependencies\n\n```\nnpm install react-icomoon react-native-svg\n```\n\n```\nyarn add react-icomoon react-native-svg\n```\n\n### **Step 2:** Declare\n\n#### Additional props for React Native\n\n| Name          | Type            | Default | Sample        |\n| ------------- | --------------- | ------- | ------------- |\n| native        | Boolean         | -       | true          |\n| SvgComponent  | React.Component | -       | SvgComponent  |\n| PathComponent | React.Component | -       | PathComponent |\n\n```js\n// Icon.jsx\nimport IcoMoon from \"react-icomoon\";\nimport { Svg, Path } from \"react-native-svg\";\nimport iconSet from \"./selection.json\";\n\nconst Icon = (props) =\u003e (\n  \u003cIcoMoon\n    native\n    SvgComponent={Svg}\n    PathComponent={Path}\n    iconSet={iconSet}\n    {...props}\n  /\u003e\n);\n\nexport default Icon;\n```\n\n**Step 3:** Use\n\n```js\nimport Icon from \"./Icon\";\n\n\u003cIcon icon=\"pencil\" size={20} color=\"orange\" /\u003e;\n```\n\n### Related Links\n\n- [vue-icomoon](https://github.com/aykutkardas/vue-icomoon)\n- [svelte-icomoon](https://github.com/aykutkardas/svelte-icomoon)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faykutkardas%2Freact-icomoon","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faykutkardas%2Freact-icomoon","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faykutkardas%2Freact-icomoon/lists"}