{"id":30873476,"url":"https://github.com/moser-jose/mo-icon-react-native","last_synced_at":"2026-01-20T17:34:51.384Z","repository":{"id":313276409,"uuid":"1049930927","full_name":"moser-jose/mo-icon-react-native","owner":"moser-jose","description":"Icon library for React Native based on SVG, with support for multiple variants (bold, bold-duotone, broken, outline, outline-duotone). Icons are generated from `.svg` files and rendered via `react-native-svg`.","archived":false,"fork":false,"pushed_at":"2025-09-05T00:16:21.000Z","size":216,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-05T01:23:44.419Z","etag":null,"topics":["icons","mo","react-native","svg"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@mosmmy/mo-icon-react-native","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/moser-jose.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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-09-03T17:47:33.000Z","updated_at":"2025-09-05T00:01:17.000Z","dependencies_parsed_at":"2025-09-05T01:23:47.533Z","dependency_job_id":"be42a1f9-dd6f-4b93-bc7a-2d17ac30f96e","html_url":"https://github.com/moser-jose/mo-icon-react-native","commit_stats":null,"previous_names":["moser-jose/mo-icon-react-native"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/moser-jose/mo-icon-react-native","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moser-jose%2Fmo-icon-react-native","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moser-jose%2Fmo-icon-react-native/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moser-jose%2Fmo-icon-react-native/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moser-jose%2Fmo-icon-react-native/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/moser-jose","download_url":"https://codeload.github.com/moser-jose/mo-icon-react-native/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moser-jose%2Fmo-icon-react-native/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274107977,"owners_count":25223473,"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","status":"online","status_checked_at":"2025-09-07T02:00:09.463Z","response_time":67,"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":["icons","mo","react-native","svg"],"created_at":"2025-09-07T23:11:03.571Z","updated_at":"2025-09-07T23:11:05.881Z","avatar_url":"https://github.com/moser-jose.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## @mosmmy/mo-icon-react-native\n\nIcon library for React Native based on SVG, with support for multiple variants (bold, bold-duotone, broken, outline, outline-duotone). Icons are generated from `.svg` files and rendered via `react-native-svg`.\n\n[![The MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](http://opensource.org/licenses/MIT)\n[![Version](https://img.shields.io/github/package-json/v/moser-jose/mo-icon-react-native)](https://github.com/moser-jose/mo-icon-react-native)\n[![npm](https://img.shields.io/npm/v/@mosmmy/mo-icon-react-native)](https://www.npmjs.com/package/@mosmmy/mo-icon-react-native)\n[![npm downloads](https://img.shields.io/npm/dm/@mosmmy/mo-icon-react-native)](https://www.npmjs.com/package/@mosmmy/mo-icon-react-native)\n[![npm bundle size](https://img.shields.io/bundlephobia/min/@mosmmy/mo-icon-react-native)](https://bundlephobia.com/package/@mosmmy/mo-icon-react-native)\n[![TypeScript](https://img.shields.io/badge/TypeScript-supported-blue)](https://www.typescriptlang.org/)\n[![Prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://prettier.io/)\n[![Jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://jestjs.io/)\n[![Coverage Status](https://img.shields.io/badge/coverage-100%25-brightgreen.svg)](https://github.com/moser-jose/mo-icon-react-native)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](http://makeapullrequest.com)\n[![GitHub stars](https://img.shields.io/github/stars/moser-jose/mo-icon-react-native?style=social)](https://github.com/moser-jose/mo-icon-react-native/stargazers)\n\n## Installation\n\n```bash\nnpm install @mosmmy/mo-icon-react-native react-native-svg\n# or\nyarn add @mosmmy/mo-icon-react-native react-native-svg\n```\n\n\u003e Note: `react` (\u003e=17), `react-native` (\u003e=0.71.0) and `react-native-svg` (\u003e=13) are peerDependencies.\n\n## Basic usage\n\n```tsx\nimport React from 'react';\nimport { View } from 'react-native';\nimport { Icon } from '@mosmmy/mo-icon-react-native';\n\nexport default function Example() {\n  return (\n    \u003cView\u003e\n      \u003cIcon name=\"bell\" type=\"outline\" size={24} color=\"#333\" /\u003e\n      \u003cIcon name=\"bell-off\" type=\"bold\" size={32} color=\"#E11D48\" /\u003e\n    \u003c/View\u003e\n  );\n}\n```\n\n### Available variants\n\n- bold --\u003e (e.g., \u003cimg src=\"src/icons/img/bold/notifications/bell.svg\" alt=\"bell bold icon\" width=\"18\"\u003e)\n- bold-duotone --\u003e (e.g., \u003cimg src=\"src/icons/img/bold-duotone/notifications/bell.svg\" alt=\"bell bold icon\" width=\"18\"\u003e)\n- broken --\u003e (e.g., \u003cimg src=\"src/icons/img/broken/notifications/bell.svg\" alt=\"bell bold icon\" width=\"18\"\u003e)\n- outline --\u003e (e.g., \u003cimg src=\"src/icons/img/outline/notifications/bell.svg\" alt=\"bell bold icon\" width=\"18\"\u003e)\n- outline-duotone --\u003e (e.g., \u003cimg src=\"src/icons/img/outline-duotone/notifications/bell.svg\" alt=\"bell bold icon\" width=\"18\"\u003e)\n\n### `Icon` props\n\n- `name` (string): icon name (see the generated list in [icon-names.json](/src/icon-names.json)).\n- `type` (optional): icon variant; default: `\"outline\"`.\n- `size` (optional): size in px; default: `24`.\n- `color` (optional): color (stroke/fill) in HEX; default: `#1C274C`.\n\n## Project structure\n\n- `src/icons/img/\u003cvariant\u003e/...`: input SVGs (organize as you prefer; e.g., bell.svg`).\n- `src/icons/svg/\u003cvariant\u003e/...`: generated TSX components from the SVGs.\n- `src/registry.ts`: generated registry mapping `{ [variant]: { [name]: Component } }`.\n- `src/types/Icon.d.ts`: types generated from the discovered names.\n- `src/icon-names.json`: JSON with names grouped by variant.\n- `src/Icon.tsx`: `Icon` component that resolves and renders the corresponding component.\n\n## Generating icons from SVGs\n\n1. Add/update your `.svg` files in `src/icons/img/\u003cvariant\u003e/\u003cfolder\u003e/...`.\n\n\u003e Note: Before adding new SVGs, make sure to check whether the name already exists in the list provided in [icon-names.json](/src/icon-names.json). If the name already exists, you **must rename** the SVG before including it.\n\u003e You need to add the SVGs according to the variant, e.g., **bold**, **bold-duotone**, **outline**, **outline-duotone**, and **broken**.\n\n\n\n2. Run the generation script:\n\n```bash\nnpm run generate:icons\n```\n\n3. Run the tests to ensure everything is OK:\n\n```bash\nnpm run test\n\nnpm run test:ci #coverage\n```\n\nThe script:\n\n- Optimizes SVGs via SVGO;\n- Generates TSX components that use `SvgXml` and accept `size` and `color`;\n- Updates `registry.ts`, `types.d.ts` and `icon-names.json` based on what was found in `img/`.\n\n## Best practices and notes\n\n- Use kebab-case file names (e.g., `bell-bing.svg`). These names will be used as `name` in the `Icon`.\n- If you add new variants, include the SVGs in `src/icons/img/\u003cyour-variant\u003e/...` and run the generator.\n\n## License\n\nThis project is governed by the [MIT](/LICENSE.md). Just remember to be a nice person and send back any modifications, corrections or improvements. ✌️\n\n## Author\n\n| [\u003cimg src=\"https://avatars0.githubusercontent.com/u/8234620?\" width=\"115\"\u003e\u003cbr\u003e\u003csub\u003e@moser-jose\u003c/sub\u003e](https://github.com/moser-jose) |\n| :----------------------------------------------------------------------------------------------------------------------------------: |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmoser-jose%2Fmo-icon-react-native","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmoser-jose%2Fmo-icon-react-native","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmoser-jose%2Fmo-icon-react-native/lists"}