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

# Install Monicon with Vue

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

<Steps>
## Install

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

```sh npm2yarn
npm i @monicon/vue @monicon/vite
```

Next, install the development dependency @iconify/json for icon sets. This package provides a comprehensive collection of icons that you can easily integrate into your project.

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

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

## Configure Vite

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

```ts filename="vite.config.ts"
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import monicon from "@monicon/vite";

export default defineConfig({
  plugins: [
    vue(),
    monicon({
      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>

## Global Import (Optional)

If you want to use Monicon globally in your Vue project, add the following code to your main.ts file.

```ts filename="main.ts"
import Monicon from "@monicon/vue";

const app = createApp(App);

app.use(Monicon);
```

## Usage

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

```vue filename="src/App.vue"
<script setup lang="ts">
// If you've added app.use(Monicon) in main.ts, you don't need to import Monicon here, also you can use the lower cased `monicon` tag
import { Monicon } from "@monicon/vue";
</script>

<template>
  <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" />
</template>
```

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

</Steps>
