@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.

Installation

npm install @mosmmy/mo-icon-react-native react-native-svg
# or
yarn add @mosmmy/mo-icon-react-native react-native-svg
# or
pnpm 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

Using the Icon component (Recommended)

import React from 'react';
import { View } from 'react-native';
import { Icon } from '@mosmmy/mo-icon-react-native';

export default function Example() {
  return (
    <View>
      <Icon name="bell" type="outline" size={24} color="#333" />
      <Icon name="bell-off" type="bold" size={32} color="#E11D48" />
    </View>
  );
}

Using individual icon components

You can import and use individual icon components directly for better tree-shaking and type safety. There are three ways to import individual components:

Option 1: Direct import from component files (Recommended)

Import directly from the component file path for optimal tree-shaking:

import React from 'react';
import { View } from 'react-native';
import { BoldHome } from '@mosmmy/mo-icon-react-native/src/components/bold/home';
import { OutlineHome } from '@mosmmy/mo-icon-react-native/src/components/outline/home';
import { BoldBell } from '@mosmmy/mo-icon-react-native/src/components/bold/bell';

export default function Example() {
  return (
    <View>
      <BoldHome size={24} color="#333" />
      <OutlineHome size={32} color="#E11D48" />
      <BoldBell size={48} color="#10B981" />
    </View>
  );
}

Option 2: Import from components-exports

If you need multiple components, you can import them from the components-exports file:

import React from 'react';
import { View } from 'react-native';
import { BoldHome, OutlineHome, BoldBell } from '@mosmmy/mo-icon-react-native/components-exports';

export default function Example() {
  return (
    <View>
      <BoldHome size={24} color="#333" />
      <OutlineHome size={32} color="#E11D48" />
      <BoldBell size={48} color="#10B981" />
    </View>
  );
}

Benefits of individual imports:

• Better tree-shaking (only imported icons are bundled)
• Direct component access without registry lookup
• Full TypeScript autocomplete support
• Slightly better performance (no runtime component resolution)

Available variants

• bold --> (e.g., )
• bold-duotone --> (e.g., )
• broken --> (e.g., )
• outline --> (e.g., )
• outline-duotone --> (e.g., )

Icon component props

• name (string): icon name (see the generated list in 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.

Individual icon component props

When importing individual components (e.g., BoldHome, OutlineBell), they accept:

• size (optional): size in px; default: 24.
• color (optional): color (stroke/fill) in HEX; default: #1C274C.
• All other props from react-native-svg's SvgXml component (except width, height, and xml).

Generating icons from SVGs

1. Add/update your .svg files in src/icons/<variant>/<folder>/....

Note: Before adding new SVGs, make sure to check whether the name already exists in the list provided in 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.

1. Run the generation script:

npm run generate:icons
# or
yarn run generate:icons
# or
pnpm run generate:icons

3. Run the tests to ensure everything is OK:

npm run test
# or
yarn run test
# or
pnpm run test

npm run test:ci #coverage

Note: The project uses @testing-library/react-native for testing. All icon components are fully tested and support both the Icon component and individual component imports.

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 icons/;
• Generates components-exports.ts and components-exports.js with named exports for all individual icon components.

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/<your-variant>/... and run the generator.

License

This project is governed by the MIT. Just remember to be a nice person and send back any modifications, corrections or improvements. ✌️

Icon credits

Icons created by 480 Design. Instagram: @480_design

Author

| @moser-jose | | :----------------------------------------------------------------------------------------------------------------------------------: |