{"id":22200401,"url":"https://github.com/iaseth/redicons","last_synced_at":"2026-04-11T07:43:58.152Z","repository":{"id":210909954,"uuid":"727740518","full_name":"iaseth/redicons","owner":"iaseth","description":"RedIcons makes it easy to use SVG Bootstrap Icons in your React projects.","archived":false,"fork":false,"pushed_at":"2024-01-04T13:22:46.000Z","size":2091,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-08-09T14:53:21.066Z","etag":null,"topics":["bootstrap","bootstrap-icons","icons","react","react-icons","redicons","svg-icons","typescript"],"latest_commit_sha":null,"homepage":"https://redicons.redpapr.com/","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/iaseth.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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":"2023-12-05T13:33:58.000Z","updated_at":"2023-12-13T18:34:15.000Z","dependencies_parsed_at":"2023-12-20T12:23:57.423Z","dependency_job_id":"64970974-e499-4a58-b891-48946c73190e","html_url":"https://github.com/iaseth/redicons","commit_stats":null,"previous_names":["iaseth/redicons"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/iaseth/redicons","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iaseth%2Fredicons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iaseth%2Fredicons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iaseth%2Fredicons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iaseth%2Fredicons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/iaseth","download_url":"https://codeload.github.com/iaseth/redicons/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iaseth%2Fredicons/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31673067,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-10T17:19:37.612Z","status":"online","status_checked_at":"2026-04-11T02:00:05.776Z","response_time":54,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["bootstrap","bootstrap-icons","icons","react","react-icons","redicons","svg-icons","typescript"],"created_at":"2024-12-02T15:26:34.815Z","updated_at":"2026-04-11T07:43:58.119Z","avatar_url":"https://github.com/iaseth.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# RedIcons\n[RedIcons](https://redicons.redpapr.com/) provides you with an easy way to use\n[Bootstrap Icons](https://icons.getbootstrap.com/) in your React projects.\n\nI am using [`readmix`](https://github.com/iaseth/readmix) for generating this README.\nYou can view the source file [here](https://github.com/iaseth/redicons/blob/master/README.md.rx).\n\n\n\n## What is RedIcons\n[RedIcons](https://github.com/iaseth/redicons/) makes using Bootstrap icons in your project as easy as this:\n```jsx\n\u003cRedIcon name=\"bs-arrow-right\" /\u003e\n```\n\nYou can also pass optional props such as `size`, `className` and `fill`:\n```jsx\n\u003cRedIcon name=\"bs-arrow-right\" size={32} className=\"bg-green-500\" fill=\"white\" /\u003e\n```\n\n\n\n## Advantages of Redicons\n1. Icons get **bundled with your JavaScript**. No extra network request for each icon. No need to wait for the icons to load. No need for SplashScreens.\n2. Minimal size. Only about **0.2kB per icon** (1kb uncompressed). So if your project uses 50 icons, your bundle size will increase by only 10kB.\n3. **Better readability** (debatable, I know) than using SVGs directly or using font icons.\n4. You have **more control** over your icons with props such as `size`, `fill` and `className`. You can even use Tailwind classes.\n\n\n\n## How to use RedIcons\n\n#### Installation\nInstall the [`redicons`](https://www.npmjs.com/package/redicons) package:\n```\nnpm i redicons\n```\nYou can install the [`redicons-cli`](https://www.npmjs.com/package/redicons-cli) for managing `redicons` from your terminal:\n```\nnpm i -g redicons-cli@latest\n```\n\n#### Adding icons to your project\nImport `icons` from your `redicons.json`:\n```jsx\nimport rediconsJson from \"./redicons.json\";\nconst icons = rediconsJson.icons;\n```\n\nHere, `icons` is an array containing icons in JSON format.\n\nYou can generate your `redicons.json` with the [`redicons-cli`](https://www.npmjs.com/package/redicons-cli)\nor at [redicons.redpapr.com](https://redicons.redpapr.com/).\n\nAdd icons to the `red` object with `addIcons()`:\n```jsx\nimport { red } from \"redicons\";\nred.addIcons(icons);\n```\n\n#### Using the `RedIcon` component\nImport the `RedIcon` component:\n```\nimport { RedIcon } from \"redicons\";\n```\nUsing the component:\n```\n\u003cRedIcon name=\"bs-bug\" /\u003e\n```\n\n\n\n## `RedIcon` component\nThe `RedIcon` component accepts a mandatory `name` prop:\n```\n\u003cRedIcon name=\"bs-bug\" /\u003e\n```\n\nIf the specified icon is not found, then a default `bs-question-diamond` icon is displayed.\n```\n\u003cRedIcon name=\"some-unknown-icon\" /\u003e\n```\nThis will display the default icon.\n\nThe `RedIcon` component accepts an optional `size` prop:\n```\n\u003cRedIcon name=\"bs-bug\" size={32} /\u003e\n```\nThis will set the `height` and `width` of the icon.\nThe default value for `size` is `16`.\n\nThe `RedIcon` component accepts an optional `className` prop:\n```\n\u003cRedIcon name=\"bs-bug\" className=\"bg-zinc-500 text-yellow-500\" /\u003e\n```\nThese classes will be added to the `SVG` tag.\nYou can use Tailwind classes here.\n\nThe `RedIcon` component accepts an optional `fill` prop:\n```\n\u003cRedIcon name=\"bs-bug\" fill=\"red\" /\u003e\n```\nThis will set the `color` of the icon.\nThe default value for `fill` is `currentColor`.\n\nThe `RedIcon` component accepts an optional `hidden` prop:\n```\n\u003cRedIcon name=\"bs-bug\" fill=\"red\" hidden /\u003e\n```\nThis will be hidden.\n\n\n\n## Dependencies\nThis package has no dependencies.\n\n\n## Dev dependencies\n|     | `Package`                          | `Version`   |\n| --- | ---------------------------------- | ----------- |\n| 1   | `@rollup/plugin-commonjs`          | `^25.0.7`   |\n| 2   | `@rollup/plugin-json`              | `^6.0.1`    |\n| 3   | `@rollup/plugin-node-resolve`      | `^15.2.3`   |\n| 4   | `@rollup/plugin-terser`            | `^0.4.4`    |\n| 5   | `@rollup/plugin-typescript`        | `^11.1.5`   |\n| 6   | `@types/react`                     | `^18.2.42`  |\n| 7   | `react`                            | `^18.2.0`   |\n| 8   | `rollup`                           | `^4.6.1`    |\n| 9   | `rollup-plugin-dts`                | `^6.1.0`    |\n| 10  | `rollup-plugin-peer-deps-external` | `^2.2.4`    |\n| 11  | `tslib`                            | `^2.6.2`    |\n| 12  | `typescript`                       | `^5.3.2`    |\n\n\n\n## License\nMIT License\n\nCopyright (c) Ankur Seth.\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n\n\n## Credit\n\nThis file was generated using [`readmix`](https://github.com/iaseth/readmix).\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiaseth%2Fredicons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fiaseth%2Fredicons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiaseth%2Fredicons/lists"}