{"id":22706798,"url":"https://github.com/bigbinary/neeto-icons","last_synced_at":"2025-04-13T12:12:52.402Z","repository":{"id":260187000,"uuid":"378813460","full_name":"bigbinary/neeto-icons","owner":"bigbinary","description":null,"archived":false,"fork":false,"pushed_at":"2025-04-05T05:06:49.000Z","size":3595,"stargazers_count":1,"open_issues_count":3,"forks_count":0,"subscribers_count":11,"default_branch":"main","last_synced_at":"2025-04-13T12:12:40.645Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://neeto-icons.neeto.com","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/bigbinary.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":"2021-06-21T05:11:13.000Z","updated_at":"2025-04-05T05:06:42.000Z","dependencies_parsed_at":null,"dependency_job_id":"b7a63459-a157-4579-8359-589f6b33e4a7","html_url":"https://github.com/bigbinary/neeto-icons","commit_stats":null,"previous_names":["bigbinary/neeto-icons"],"tags_count":76,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bigbinary%2Fneeto-icons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bigbinary%2Fneeto-icons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bigbinary%2Fneeto-icons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bigbinary%2Fneeto-icons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bigbinary","download_url":"https://codeload.github.com/bigbinary/neeto-icons/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248710448,"owners_count":21149191,"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":[],"created_at":"2024-12-10T10:09:45.829Z","updated_at":"2025-04-13T12:12:52.388Z","avatar_url":"https://github.com/bigbinary.png","language":"JavaScript","readme":"# neetoIcons\n\nThe neetoIcons and neetoIconsRN library are a collection of SVG React component icons that drives\nthe experience in the neeto products built at BigBinary.\n\n## Contents\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [How it works](#how-it-works)\n- [Instructions for publishing](#instructions-for-publishing)\n\n## Installation\n\nWeb:\n\n```\nyarn add @bigbinary/neeto-icons\n```\n\nReact Native:\n\n```\nyarn add @bigbinary/neeto-icons-rn\n```\n\n### Instructions for development\n\nCheck the [Frontend package development guide](https://neeto-engineering.neetokb.com/p/a-d34cb4b0) for step-by-step instructions to develop the frontend package.\n\n#### Adding a new icon to the library\n\n1. **Add the SVG file -**\n   Place the SVG file for the new icon in the appropriate folder under the `source` directory. For example:\n   - `icons/` for normal icons\n   - `logos/` for product logos\n   - `typefaceLogos/` for product typeface logos\n   - `appIcons/` for app icons\n   - `misc/` for miscellaneous icons\n   - `elements/` for elements\n\n2. **Name the file appropriately -**\n   Use PascalCase for the file name (e.g., `NewIcon.svg`).\n\n3. **Verify the icon -**\n   Run the `yarn start` command to verify the React component for the new icon:\n\n### Usage\n\nWeb:\n\n```javascript\nimport { Clock } from \"@bigbinary/neeto-icons\";\n```\n\nReact Native:\n\n```javascript\nimport { Clock } from \"@bigbinary/neeto-icons-rn\";\n```\n\nAnywhere in your React file\n\n```jsx\n\u003cClock color=\"#1e1e20\" size={24} /\u003e\n```\n\n### Product logos\n\n```javascript\nimport { Neeto } from \"@bigbinary/neeto-icons/logos\";\n```\n\n### App icons\n\n```javascript\nimport { NeetoSite } from \"@bigbinary/neeto-icons/app-icons\";\n```\n\n### Props\n\n| Name      | Type           | Default      | Description                                                   |\n| :-------- | :------------- | :----------- | :------------------------------------------------------------ |\n| color     | string         | currentColor | CSS color value for the icon.                                 |\n| size      | string, number | 24           | Value supplied to height and width attributes of SVG element. |\n| className | string         |              | Classes supplied to the SVG element.                          |\n\n\n### Misc icons\n\n```javascript\nimport { Windows } from \"@bigbinary/neeto-icons/misc\";\n\u003cWindows  size={36} /\u003e\n```\n\n```javascript\nimport { Razorpay } from \"@bigbinary/neeto-icons/misc\";\n\u003cRazorpay  width={100}  height={32} /\u003e\n\u003cRazorpay  width={100}  /\u003e\n```\n\n\n### Props\n\n| Name      | Type           | Default      | Description                                                   |\n| :-------- | :------------- | :----------- | :------------------------------------------------------------ |\n| size      | string, number | 24           | Value supplied to height and width attributes of SVG element. |\n| height    | string, number | -            | Value supplied to height attribute of SVG element.            |\n| width     | string, number | -            | Value supplied to width attribute of SVG element.             |\n| className | string         |              | Classes supplied to the SVG element.                          |\n\n\n### Typeface logos\n\n```javascript\nimport { Neeto } from \"@bigbinary/neeto-icons/typeface-logos\";\n```\n\nAnywhere in your React file\n\n```jsx\n\u003cNeeto height={24} width={48} /\u003e\n```\n\n| Name      | Type           | Default | Description                                        |\n| :-------- | :------------- | :------ | :------------------------------------------------- |\n| height    | string, number | 20      | Value supplied to height attribute of SVG element. |\n| width     | string, number | 100%    | Value supplied to width attribute of SVG element.  |\n| className | string         |         | Classes supplied to the SVG element.               |\n\n\n\n### Elements\n\n```javascript\nimport { Keyboard } from \"@bigbinary/neeto-icons/elements\";\n```\n\nAnywhere in your React file\n\n```jsx\n\u003cKeyboard height={80} width={41} /\u003e\n```\n\n| Name      | Type           | Default | Description                                        |\n| :-------- | :------------- | :------ | :------------------------------------------------- |\n| height    | string, number | 26      | Value supplied to height attribute of SVG element. |\n| width     | string, number | 80      | Value supplied to width attribute of SVG element.  |\n| className | string         |         | Classes supplied to the SVG element.               |\n\n\n\n## How it works\n\n- We use a custom rollup plugin (which can be found in `build/index.mjs`) to\n  take all the `.svg` files from the `source` folder and convert them to React\n  components that render the respective SVG icon.\n- The plugin accepts a configuration object as an argument which can contain the\n  following keys:\n\n  | Name                    | Type       | Description                                                                                                              |\n  | ----------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------ |\n  | options                 | `object`   | Options passed to the transform function from react-svgr. (See [full opions list](https://react-svgr.com/docs/options/)) |\n  | additionTransformations | `function` | Additional string transformation that can be applied to the generated React code.                                        |\n  | source                  | `string`   | Path to the folder where the SVG files are located                                                                       |\n  | destination             | `string`   | Path to the folder to place the generated react code                                                                     |\n\n- For each icon, a React icon file will be generated in `generate/icons` folder.\n- From there babel through rollup takes the wheel and generates the bundles.\n\n## Instructions for Publishing\n\nConsult the [building and releasing packages](https://neeto-engineering.neetokb.com/articles/building-and-releasing-packages) guide for details on how to publish.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbigbinary%2Fneeto-icons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbigbinary%2Fneeto-icons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbigbinary%2Fneeto-icons/lists"}