{"id":13472940,"url":"https://github.com/jrgarciadev/react-iconly","last_synced_at":"2025-03-26T17:31:33.468Z","repository":{"id":39879977,"uuid":"313426067","full_name":"jrgarciadev/react-iconly","owner":"jrgarciadev","description":"🌈    React component for Iconly icons","archived":true,"fork":false,"pushed_at":"2023-04-12T00:38:14.000Z","size":2157,"stargazers_count":221,"open_issues_count":9,"forks_count":45,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-21T20:05:29.122Z","etag":null,"topics":["iconly","icons","react","react-components","react-icon-kit","react-icons","svg-icons"],"latest_commit_sha":null,"homepage":"https://react-iconly.jrgarciadev.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/jrgarciadev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","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}},"created_at":"2020-11-16T21:01:39.000Z","updated_at":"2025-02-11T21:35:11.000Z","dependencies_parsed_at":"2024-01-15T03:42:49.668Z","dependency_job_id":null,"html_url":"https://github.com/jrgarciadev/react-iconly","commit_stats":{"total_commits":88,"total_committers":7,"mean_commits":"12.571428571428571","dds":"0.15909090909090906","last_synced_commit":"5cebf6e6f79a0c06f8c1de97b2b30fa9115325b1"},"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jrgarciadev%2Freact-iconly","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jrgarciadev%2Freact-iconly/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jrgarciadev%2Freact-iconly/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jrgarciadev%2Freact-iconly/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jrgarciadev","download_url":"https://codeload.github.com/jrgarciadev/react-iconly/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245702285,"owners_count":20658581,"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":["iconly","icons","react","react-components","react-icon-kit","react-icons","svg-icons"],"created_at":"2024-07-31T16:00:59.381Z","updated_at":"2025-03-26T17:31:32.882Z","avatar_url":"https://github.com/jrgarciadev.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# 🌈 React Iconly Icons\n\n[![NPM](https://img.shields.io/npm/v/react-iconly.svg)](https://www.npmjs.com/package/react-iconly)\n[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n[![npm downloads](https://img.shields.io/npm/dm/react-iconly.svg?style=flat-round)](https://www.npmjs.com/package/react-iconly)\n\n\u003e React component for Iconly icons\n\n**react-iconly** is a collection of simply beautiful open source icons for React.js. Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency and readability.\n\n## Based on Iconly Essential Icons [Iconly v2](https://ui8.net/piqodesign/products/iconly-essential-icons)\n\n🌐 [Website](https://react-iconly.jrgarciadev.com/)\n\n### Sets\n\n- Bold\n- Bulk\n- Light Border\n- Broken\n- Two Tone\n- Curved (New)\n\n### Installation\n\n    yarn add react-iconly\n\nor\n\n    npm i react-iconly\n\n### Usage\n\n```jsx\nimport React from 'react'\nimport { Home } from 'react-iconly'\n\nconst App = () =\u003e {\n  return \u003cHome /\u003e\n}\n\nexport default App\n```\n\nYou can also wrap your app inside a `IconlyProvider` component, this will make all the icons that are within the context use the Provider properties\n\nIf you set specific props for each Icon the Provider properties will be overwritten\n\n```jsx\nimport React from 'react'\nimport { IconlyProvider, Home, Notification } from 'react-iconly'\n\nconst App = () =\u003e {\n  return (\n    \u003cIconlyProvider\n      set='bulk'\n      primaryColor='blueviolet'\n      secondaryColor='blue'\n      stroke='bold'\n      size='xlarge'\n    \u003e\n      \u003cHome /\u003e\n      \u003cNotification primaryColor='yellow' /\u003e\n    \u003c/IconlyProvider\u003e\n  )\n}\n\nexport default App\n```\n\nYou can also use Iconly component and then set then icon name you prefer:\n\n```jsx\nimport React from 'react'\nimport { Iconly } from 'react-iconly'\n\nconst App = () =\u003e {\n  return (\n    \u003cIconly name='Search' set='bulk' primaryColor='blueviolet' size='xlarge' /\u003e\n  )\n}\n\nexport default App\n```\n\nIcons can be configured with inline props:\n\n```jsx\n\u003cHome\n  set='curved'\n  primaryColor='blueviolet'\n  secondaryColor='blue'\n  stroke='bold'\n  size='xlarge'\n/\u003e\n```\n\nYou can also include the whole icon pack:\n\n```jsx\nimport React from 'react'\nimport * as IconlyPack from 'react-iconly'\n\nconst App = () =\u003e {\n  return (\n    \u003cIconlyPack.Home\n      set='bulk'\n      primaryColor='blueviolet'\n      secondaryColor='blue'\n      stroke='bold'\n      size='xlarge'\n    /\u003e\n  )\n}\n\nexport default App\n```\n\nCustom style example\n\n```jsx\nimport React from 'react'\nimport { Send } from 'react-iconly'\n\nconst App = () =\u003e {\n  return (\n    \u003cSend\n      style={{ transform: 'rotate(45deg)' }}\n      primaryColor='red'\n      stroke='bold'\n      size='xlarge'\n    /\u003e\n  )\n}\n\nexport default App\n```\n\n## Props\n\n| Prop             | Type                                               | Default                           | Note                                                                                                                                             |\n| ---------------- | -------------------------------------------------- | --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `label`          | `string`                                           |                                   | String to use as the aria-label for the icon. Use an empty string when you already have readable text around the icon,like text inside a button. |\n| `filled`         | `boolean`                                          | `false`                           | Set de icons sets to 'bold'.                                                                                                                     |\n| `primaryColor`   | `string`                                           | `currentColor`                    | Primary colour for icons.                                                                                                                        |\n| `secondaryColor` | `string`                                           | `currentColor`                    | Secondary colour for **two-tone** and **bulk** icons set.                                                                                        |\n| `size`           | `number`                                           | `small` `medium` `large` `xlarge` | `medium`                                                                                                                                         | Control the size of the icon, you can set a custom **number** size |\n| `set`            | `light` `bold` `two-tone` `bulk` `broken` `curved` | `light`                           | Iconly set option.                                                                                                                               |\n| `stroke`         | `light` `regular` `bold`                           | `regular`                         | Sets the line stroke for **light** and **two-tone** icons set.                                                                                   |\n| `style`          | `object`                                           |                                   | Custom styles property.                                                                                                                          |\n\n---\n\n## Contributing\n\nContributions are always welcome!\n\nSee `CONTRIBUTING.md` for ways to get started.\n\nPlease adhere to this project's `CODE_OF_CONDUCT`.\n\n## License\n\nMIT © [jrgarciadev](https://github.com/jrgarciadev)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjrgarciadev%2Freact-iconly","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjrgarciadev%2Freact-iconly","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjrgarciadev%2Freact-iconly/lists"}