Installation
Vue
Learn how to install and use Monicon in your Vue (Vite) project
Installation
Install Monicon and its Vite plugin in your Vue project:
npm install @monicon/core @monicon/viteConfiguration
1. Create Monicon Config
Create a monicon.config.ts file in your project root:
import { , } from "@monicon/core/plugins";
import { } from "@monicon/core";
export default {
// Loads individual icons by icon name
: ["mdi:home", "feather:activity"],
// Loads all icons from the lucide collection
: ["lucide"],
: [
/**
* change the output path to your project config for example;
* - src/components/icons
* - components/icons
*/
({ : ["src/components/icons"] }),
({ : "src/components/icons" }),
],
} satisfies ;2. Configure Vite
Add the Monicon plugin to your vite.config.ts:
import { } from "vite";
import from "@monicon/vite";
export default ({
: [
// ... other plugins
(),
],
});Usage
After configuration, Monicon will automatically generate Vue components for your icons. You can import and use them in your components:
<script setup lang="ts">
import BadgeCheckIcon from "./components/icons/lucide/badge-check.vue";
import CloudDownloadIcon from "./components/icons/lucide/cloud-download.vue";
import HomeIcon from "./components/icons/mdi/home.vue";
import ActivityIcon from "./components/icons/feather/activity.vue";
</script>
<template>
<main class="flex h-screen items-center justify-center gap-4">
<BadgeCheckIcon class="size-10" />
<CloudDownloadIcon class="size-10" />
<ActivityIcon class="size-10" />
<!-- If you don't want to use the className prop, you can use the svg props -->
<HomeIcon width="40" height="40" />
</main>
</template>