### Install react-icomoon with npm

Source: https://github.com/aykutkardas/react-icomoon/blob/main/README.md

Installs the react-icomoon package using npm. This is the first step to integrate the library into your project.

```bash
npm install react-icomoon
```

--------------------------------

### Install react-icomoon with yarn

Source: https://github.com/aykutkardas/react-icomoon/blob/main/README.md

Installs the react-icomoon package using yarn. This command is an alternative to npm for package management.

```bash
yarn add react-icomoon
```

--------------------------------

### Install Dependencies for React Native

Source: https://github.com/aykutkardas/react-icomoon/blob/main/README.md

Installs react-icomoon along with react-native-svg, which is a required dependency for using SVG components in React Native.

```bash
npm install react-icomoon react-native-svg
```

```bash
yarn add react-icomoon react-native-svg
```

--------------------------------

### Get List of Available Icons

Source: https://github.com/aykutkardas/react-icomoon/blob/main/README.md

Shows how to use the `iconList` utility function from the react-icomoon library to retrieve a list of all available icon names from the provided icon set.

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

iconList(iconSet);

// sample output
// [
//   "document",
//   "camera",
//   "genius",
//   "chat",
//   "heart1",
//   "alarmclock",
//   "star-full",
//   "heart",
//   "play3",
//   "pause2",
//   "bin1",
// ];
```

--------------------------------

### Use Icon Component in React

Source: https://github.com/aykutkardas/react-icomoon/blob/main/README.md

Demonstrates how to use the previously declared Icon component in a React application. It shows passing icon name, size, and color as props.

```jsx
import Icon from "./Icon";

<Icon icon="pencil" size={20} color="orange" />;
```

--------------------------------

### Render SVG Icons with IcoMoon Component (React)

Source: https://context7.com/aykutkardas/react-icomoon/llms.txt

Demonstrates basic usage of the IcoMoon component to render SVG icons in a React application. It shows how to import the icon set and customize icons using props like 'icon', 'size', and 'color'.

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

// Basic usage with size and color
function App() {
  return (
    <div>
      <IcoMoon
        iconSet={iconSet}
        icon="pencil"
        size={20}
        color="orange"
      />

      <IcoMoon
        iconSet={iconSet}
        icon="home"
        size="2em"
        color="#ff6b6b"
        className="my-icon"
        style={{ marginLeft: 10 }}
      />

      <IcoMoon
        iconSet={iconSet}
        icon="settings"
        size={32}
        color="rgb(100, 100, 200)"
        title="Settings Icon"
        disableFill={false}
      />
    </div>
  );
}

export default App;
```

--------------------------------

### Custom Styling and Props with IcoMoon

Source: https://context7.com/aykutkardas/react-icomoon/llms.txt

Demonstrates how to customize IcoMoon components using various props like `removeInlineStyle`, `disableFill`, `className`, and inline `style` objects. This allows for fine-grained control over icon appearance.

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

function CustomStyledIcons() {
  return (
    <div>
      {/* Remove default inline styles */}
      <IcoMoon
        iconSet={iconSet}
        icon="heart"
        size={30}
        removeInlineStyle={true}
        className="custom-icon"
        style={{
          fill: 'transparent',
          stroke: 'red',
          strokeWidth: 2
        }}
      />

      {/* Disable fill for multi-color icons */}
      <IcoMoon
        iconSet={iconSet}
        icon="logo"
        size={40}
        disableFill={true}
        style={{ opacity: 0.8 }}
      />

      {/* Complex styling with CSS-in-JS */}
      <IcoMoon
        iconSet={iconSet}
        icon="notification"
        size={28}
        style={{
          filter: 'drop-shadow(2px 2px 4px rgba(0,0,0,0.3))',
          transition: 'all 0.3s ease',
          cursor: 'pointer'
        }}
        onMouseEnter={(e) => e.currentTarget.style.transform = 'scale(1.2)'}
        onMouseLeave={(e) => e.currentTarget.style.transform = 'scale(1)'}
      />
    </div>
  );
}

export default CustomStyledIcons;
```

--------------------------------

### Declare Icon Component for React Native

Source: https://github.com/aykutkardas/react-icomoon/blob/main/README.md

Configures the Icon component for React Native usage by passing `native` prop and specifying `SvgComponent` and `PathComponent` from `react-native-svg`. This enables SVG rendering in a native environment.

```jsx
// Icon.jsx
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;
```

--------------------------------

### IcoMoon Icon Set JSON Structure

Source: https://context7.com/aykutkardas/react-icomoon/llms.txt

Illustrates the typical structure of an icon set JSON file generated by IcoMoon or svgps.app. It contains an 'icons' array, where each object represents an icon with its SVG paths, dimensions, and properties like name and code.

```json
{
  "icons": [
    {
      "icon": {
        "paths": [
          "M1140.864 448.736c-8.448-2.624-17.408 1.984-20.096 10.4-2.656 8.416 1.984 17.408 10.4 20.096..."
        ],
        "attrs": [],
        "width": 1344
      },
      "properties": {
        "name": "chat",
        "id": 74,
        "order": 1008,
        "code": 57417
      }
    },
    {
      "icon": {
        "paths": [
          "M512 0c-282.77 0-512 229.23-512 512s229.23 512 512 512..."
        ],
        "width": 1024
      },
      "properties": {
        "name": "heart",
        "id": 75
      }
    }
  ]
}
```

--------------------------------

### Declare Icon Component in React

Source: https://github.com/aykutkardas/react-icomoon/blob/main/README.md

Defines a reusable Icon component in React that imports the IcoMoon component and a selection.json file. This component can then be used throughout the application.

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

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

export default Icon;
```

--------------------------------

### Render SVG Icons in React Native with IcoMoon Component

Source: https://context7.com/aykutkardas/react-icomoon/llms.txt

Explains how to use the IcoMoon component for React Native applications. It requires the `native` prop and passing `Svg` and `Path` components from `react-native-svg` to enable rendering on iOS and Android platforms.

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

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

// Usage in React Native app
function HomeScreen() {
  return (
    <View style={{ flex: 1, padding: 20 }}>
      <TouchableOpacity
        onPress={() => console.log('Back pressed')}
        style={{ flexDirection: 'row', alignItems: 'center' }}
      >
        <Icon icon="arrow-left" size={20} color="#007AFF" />
        <Text style={{ marginLeft: 8 }}>Back</Text>
      </TouchableOpacity>

      <Icon icon="heart" size={48} color="#FF3B30" />
      <Icon icon="star" size={32} color="#FFCC00" />
    </View>
  );
}

export default HomeScreen;
```

--------------------------------

### Type-Safe SVG Icons with IcoMoon Component (TypeScript)

Source: https://context7.com/aykutkardas/react-icomoon/llms.txt

Illustrates a type-safe implementation of the IcoMoon component in TypeScript. It shows how to use the exported `IconProps` interface for compile-time prop validation and creating a typed icon wrapper for cleaner usage within TypeScript components.

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

// Create a typed icon wrapper
const Icon = (props: IconProps) => <IcoMoon iconSet={iconSet} {...props} />;

// Usage in a TypeScript component
interface HeaderProps {
  onMenuClick: () => void;
}

const Header: React.FC<HeaderProps> = ({ onMenuClick }) => {
  return (
    <header>
      <Icon
        icon="menu"
        size={24}
        color="#333"
        onClick={onMenuClick}
        style={{ cursor: 'pointer' }}
      />
      <h1>My App</h1>
      <Icon icon="user" size={24} color="#333" />
    </header>
  );
};

export default Header;
```

--------------------------------

### Declare Icon Component with TypeScript

Source: https://github.com/aykutkardas/react-icomoon/blob/main/README.md

Declares a reusable Icon component in TypeScript, including type definitions for props. This enhances type safety in React projects using TypeScript.

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

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

export default Icon;
```

--------------------------------

### Extract Icon Names using iconList

Source: https://context7.com/aykutkardas/react-icomoon/llms.txt

Utility function to extract all available icon names from an icon set. Useful for validation, debugging, or creating dynamic icon selectors. It takes an icon set object as input and returns an array of strings representing icon names.

```javascript
import { iconList } from "react-icomoon";
import iconSet from "./selection.json";

// Get all available icons
const availableIcons = iconList(iconSet);
console.log(availableIcons);
// Output: ["document", "camera", "genius", "chat", "heart", "alarmclock", "star-full", "play3", "pause2", "bin1"]
```

```javascript
// Validate icon exists before rendering
function IconWrapper({ iconName, ...props }) {
  const icons = iconList(iconSet);

  if (!icons || !icons.includes(iconName)) {
    console.warn(`Icon "${iconName}" not found in icon set`);
    return null;
  }

  return <IcoMoon iconSet={iconSet} icon={iconName} {...props} />;
}
```

```javascript
// Build dynamic icon selector
function IconPicker({ onSelect }) {
  const icons = iconList(iconSet);

  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 10 }}>
      {icons.map(icon => (
        <button
          key={icon}
          onClick={() => onSelect(icon)}
          style={{ padding: 10, border: '1px solid #ccc' }}
        >
          <IcoMoon iconSet={iconSet} icon={icon} size={24} />
          <div style={{ fontSize: 10 }}>{icon}</div>
        </button>
      ))}
    </div>
  );
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.