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

# Install Monicon with React (Webpack)

Setting up Monicon with React and Webpack is a straightforward process. This guide will walk you through the installation and configuration steps to get started with Monicon in your React 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/react @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 Webpack

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

```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"],
    }),
  ],
};
```

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

## 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 { Monicon } from "@monicon/react";

function App() {
  return (
    <main>
      <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} />
    </main>
  );
}

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 and Webpack! You can now explore more icon sets and customize your usage further.

</Steps>
