import { Steps, Callout } from "nextra/components";

# Install Monicon with React Native

Setting up Monicon with React Native is a straightforward process. This guide will walk you through the installation and configuration steps to get started with Monicon in your React Native project.

<Steps>

## Install

To get started, you’ll need to install the necessary dependencies for Monicon. In your project directory, run the following command to install the dependencies.

```sh npm2yarn
npm i @monicon/native @monicon/metro react-native-svg

# if you want react-native-web support
npm i @monicon/webpack
```

Now you should install the development dependency `@iconify/json` for the icon sets. This package provides a comprehensive collection of icons that can be easily integrated into your project.

```sh npm2yarn
npm i -D @iconify/json

# or specific icon sets
npm i -D @iconify-json/mdi @iconify-json/feather
```

## Configure Metro

Now that the dependencies are installed, you’ll need to configure Metro to use Monicon.

```js filename="metro.config.js"
const { getDefaultConfig } = require("expo/metro-config");
const { withMonicon } = require("@monicon/metro");

const config = getDefaultConfig(__dirname);

const configWithMonicon = withMonicon(config, {
  icons: [
    "mdi:home",
    "feather:activity",
    "logos:active-campaign",
    "lucide:badge-check",
  ],
  // Load all icons from the listed collections
  collections: ["radix-icons"],
});

module.exports = configWithMonicon;
```

<Callout>
The `icons` array in the `monicon` plugin configuration specifies the icon sets you want to use in your project. You can add more icon sets as needed.

For a complete list of available icon sets, refer to the [Icones](https://icones.js.org/) website.

</Callout>

## Configure Webpack (Optional)

<Callout type="info">If you are using Expo Router, skip this step.</Callout>

If you want to use Monicon with React Native Web, you’ll need to configure Webpack.

```js filename="webpack.config.js"
const createExpoWebpackConfigAsync = require("@expo/webpack-config");
const { MoniconPlugin } = require("@monicon/webpack");

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);

  config.plugins.push(
    new MoniconPlugin({
      icons: [
        "mdi:home",
        "feather:activity",
        "logos:active-campaign",
        "lucide:badge-check",
      ],
      // Load all icons from the listed collections
      collections: ["radix-icons"],
    })
  );

  return config;
};
```

For **bare React Native** projects, you can use the `@monicon/webpack` plugin to configure Webpack.

```js filename="webpack.config.js"
module.exports = {
  plugins: [
    new MoniconPlugin({
      icons: [
        "mdi:home",
        "feather:activity",
        "logos:active-campaign",
        "lucide:badge-check",
      ],
      // Load all icons from the listed collections
      collections: ["radix-icons"],
    }),
  ],
};
```

## Usage

You can now use Monicon in your React components. Here’s an example of how to use Monicon in a React component.

```tsx filename="src/App.tsx"
import { View } from "react-native";
import { Monicon } from "@monicon/native";

function App() {
  return (
    <View>
      <Monicon name="mdi:home" />
      <Monicon name="logos:active-campaign" size={30} />
      <Monicon name="feather:activity" color="red" />
      <Monicon name="lucide:badge-check" size={24} strokeWidth={4} />
    </View>
  );
}

export default App;
```

## Configure .gitignore

Add the following to your `.gitignore` file to prevent icons from being committed to your repository.

```
# monicon
.monicon
```

## Next Steps

You’ve successfully set up Monicon with React Native! You can now explore more icon sets and customize your usage further.

</Steps>
