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

# Install Monicon with Next.js

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

If you want to use Monicon with Next.js, you’ll need to configure Next.js.

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

const nextConfig = {
  webpack: (config) => {
    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;
  },
};

module.exports = nextConfig;
```

<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/page.tsx"
import { Monicon } from "@monicon/react";

function App() {
  return (
    <main>
      <Monicon name="mdi:home" />
      <Monicon name="logos:active-campaign" size={32} />
      <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 Next.js! You can now explore more icon sets and customize your usage further.

</Steps>
