Installation
Svelte
Learn how to install and use Monicon in your Svelte (SvelteKit) project
Installation
Install Monicon and its Vite plugin in your Svelte 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/lib/components/icons
* - src/components/icons
*/
({ : ["src/lib/components/icons"] }),
({ : "src/lib/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 Svelte components for your icons. You can import and use them in your routes and components:
<script>
import BadgeCheckIcon from "$lib/components/icons/lucide/badge-check.svelte";
import CloudDownloadIcon from "$lib/components/icons/lucide/cloud-download.svelte";
import HomeIcon from "$lib/components/icons/mdi/home.svelte";
import ActivityIcon from "$lib/components/icons/feather/activity.svelte";
</script>
<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>