react-icomoon

To use react-icomoon in a React Native environment, you must install react-native-svg alongside it and configure the component with specific native props.

npm install react-icomoon react-native-svg
# or
yarn add react-icomoon react-native-svg

When using React Native, you must pass the native flag and provide the Svg and Path components from react-native-svg to the IcoMoon component.

import IcoMoon from "react-icomoon";
import { Svg, Path } from "react-native-svg";
import iconSet from "./selection.json";

const Icon = (props) => (
  <IcoMoon
    native
    SvgComponent={Svg}
    PathComponent={Path}
    iconSet={iconSet}
    {...props}
  />
);

export default Icon;

To use react-icomoon, you must first provide an iconSet (typically a selection.json file generated from IcoMoon or svgps.app).

1. Declare the Icon component: Create a wrapper component that passes your selection.json to the IcoMoon component.
2. Use the component: Pass the icon name and styling props like size and color to your wrapper.

// Icon.jsx
import IcoMoon from "react-icomoon";
import iconSet from "./selection.json";

const Icon = (props) => <IcoMoon iconSet={iconSet} {...props} />;

export default Icon;

// Usage
import Icon from "./Icon";
<Icon icon="pencil" size={20} color="orange" />

Install the package using npm or yarn to use SVG icons in your React or React Native projects.

npm install react-icomoon
# or
yarn add react-icomoon

When the native prop is set to true, the component applies a specific set of styles to the root element to enable a flexbox layout. This is useful when you want the icon to behave more like a layout container rather than a standard inline-block SVG.

Applied styles when native={true}:

• display: "flex"
• flex-direction: "row"
• flex-wrap: "wrap"

You can override the default HTML elements used for rendering by providing custom components via SvgComponent and PathComponent.

• SvgComponent: The element used for the root container (defaults to "svg").
• PathComponent: The element used for each path in the icon (defaults to "path").

<IcoMoon 
  iconSet={myIconSet} 
  icon="home" 
  SvgComponent="foreignObject" 
  PathComponent="g" 
/>

When using TypeScript, import the IconProps type to ensure type safety for your icon wrapper.

// Icon.tsx
import IcoMoon, { IconProps } from "react-icomoon";
import iconSet from "./selection.json";

const Icon = (props: IconProps) => <IcoMoon iconSet={iconSet} {...props} />;

export default Icon;

Use the iconList function to retrieve an array of all available icon names within a specific iconSet.

import IcoMoon, { iconList } from "react-icomoon";

// Returns an array of strings
const names = iconList(iconSet);
// sample output: ["document", "camera", "genius", ...]

The following props are available on the IcoMoon component:

When using the native mode in React Native, these additional props are available:

The IcoMoon component renders icons from an IcoMoon icon set. It requires an iconSet object (following the IcoMoon JSON format) and the icon name string. It automatically calculates the viewBox based on the icon's width and renders the icon using SVG elements.

import IcoMoon from 'react-icomoon';

// iconSet should be the JSON object exported from IcoMoon
const MyIcon = () => (
  <IcoMoon 
    iconSet={myIconSet} 
    icon="my-icon-name" 
    size={24} 
  />
);

The iconList utility function extracts an array of all available icon names from a provided IconSet object. This is useful for debugging or generating menus/lists of available icons.

import { iconList } from 'react-icomoon';

const names = iconList(myIconSet);
// returns e.g. ['home', 'user', 'settings']