InstallationVue

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.

Install

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

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.

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.

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

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

Global Import (Optional)

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

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.

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>

Next Steps

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

React NativeNuxt