https://github.com/moser-jose/mo-icon-react-native
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`.
https://github.com/moser-jose/mo-icon-react-native
icons mo react-native svg
Last synced: 5 months ago
JSON representation
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`.
- Host: GitHub
- URL: https://github.com/moser-jose/mo-icon-react-native
- Owner: moser-jose
- Created: 2025-09-03T17:47:33.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-09-05T00:16:21.000Z (10 months ago)
- Last Synced: 2025-09-05T01:23:44.419Z (10 months ago)
- Topics: icons, mo, react-native, svg
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@mosmmy/mo-icon-react-native
- Size: 211 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## @mosmmy/mo-icon-react-native
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`.
[](http://opensource.org/licenses/MIT)
[](https://github.com/moser-jose/mo-icon-react-native)
[](https://www.npmjs.com/package/@mosmmy/mo-icon-react-native)
[](https://www.npmjs.com/package/@mosmmy/mo-icon-react-native)
[](https://bundlephobia.com/package/@mosmmy/mo-icon-react-native)
[](https://www.typescriptlang.org/)
[](https://prettier.io/)
[](https://jestjs.io/)
[](https://github.com/moser-jose/mo-icon-react-native)
[](http://makeapullrequest.com)
[](https://github.com/moser-jose/mo-icon-react-native/stargazers)
## Installation
```bash
npm install @mosmmy/mo-icon-react-native react-native-svg
# or
yarn add @mosmmy/mo-icon-react-native react-native-svg
```
> Note: `react` (>=17), `react-native` (>=0.71.0) and `react-native-svg` (>=13) are peerDependencies.
## Basic usage
```tsx
import React from 'react';
import { View } from 'react-native';
import { Icon } from '@mosmmy/mo-icon-react-native';
export default function Example() {
return (
);
}
```
### Available variants
- bold --> (e.g., 
)
- bold-duotone --> (e.g., 
)
- broken --> (e.g., 
)
- outline --> (e.g., 
)
- outline-duotone --> (e.g., 
)
### `Icon` props
- `name` (string): icon name (see the generated list in [icon-names.json](/src/icon-names.json)).
- `type` (optional): icon variant; default: `"outline"`.
- `size` (optional): size in px; default: `24`.
- `color` (optional): color (stroke/fill) in HEX; default: `#1C274C`.
## Project structure
- `src/icons/img//...`: input SVGs (organize as you prefer; e.g., bell.svg`).
- `src/icons/svg//...`: generated TSX components from the SVGs.
- `src/registry.ts`: generated registry mapping `{ [variant]: { [name]: Component } }`.
- `src/types/Icon.d.ts`: types generated from the discovered names.
- `src/icon-names.json`: JSON with names grouped by variant.
- `src/Icon.tsx`: `Icon` component that resolves and renders the corresponding component.
## Generating icons from SVGs
1. Add/update your `.svg` files in `src/icons/img///...`.
> 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.
> You need to add the SVGs according to the variant, e.g., **bold**, **bold-duotone**, **outline**, **outline-duotone**, and **broken**.
2. Run the generation script:
```bash
npm run generate:icons
```
3. Run the tests to ensure everything is OK:
```bash
npm run test
npm run test:ci #coverage
```
The script:
- Optimizes SVGs via SVGO;
- Generates TSX components that use `SvgXml` and accept `size` and `color`;
- Updates `registry.ts`, `types.d.ts` and `icon-names.json` based on what was found in `img/`.
## Best practices and notes
- Use kebab-case file names (e.g., `bell-bing.svg`). These names will be used as `name` in the `Icon`.
- If you add new variants, include the SVGs in `src/icons/img//...` and run the generator.
## License
This project is governed by the [MIT](/LICENSE.md). Just remember to be a nice person and send back any modifications, corrections or improvements. ✌️
## Author
| [
@moser-jose](https://github.com/moser-jose) |
| :----------------------------------------------------------------------------------------------------------------------------------: |