Installation
Qwik
Learn how to install and use Monicon in your Qwik project
Installation
Install Monicon and its Vite plugin in your Qwik 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 { , type UserConfig } from "vite";
import { } from "@monicon/vite";
export default ((): UserConfig => {
return {
: [
// ... other plugins
(),
],
};
});Usage
After configuration, Monicon will automatically generate Qwik components for your icons. You can import and use them in your routes and components:
import { component$ } from "@builder.io/qwik";
import type { DocumentHead } from "@builder.io/qwik-city";
import BadgeCheckIcon from "~/components/icons/lucide/badge-check";
import CloudDownloadIcon from "~/components/icons/lucide/cloud-download";
import HomeIcon from "~/components/icons/mdi/home";
import ActivityIcon from "~/components/icons/feather/activity";
export default component$(() => {
return (
<div class="flex h-screen items-center justify-center gap-4">
<BadgeCheckIcon color="white" width={50} />
<CloudDownloadIcon color="white" width={50} />
<ActivityIcon color="white" width={50} />
<HomeIcon color="white" width={50} />
{/* you can use standard SVG props */}
<HomeIcon width={40} height={40} color="blue" />
</div>
);
});
export const head: DocumentHead = {
title: "Welcome to Qwik",
meta: [
{
name: "description",
content: "Qwik site description",
},
],
};