Installation
React
Learn how to install and use Monicon in your React (Vite) project
Installation
Install Monicon and its Vite plugin in your React 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:heart"],
// 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 React components for your icons. You can import and use them in your components:
import BadgeCheckIcon from "./components/icons/lucide/badge-check";
import CloudDownloadIcon from "./components/icons/lucide/cloud-download";
import HomeIcon from "./components/icons/mdi/home";
import HeartIcon from "./components/icons/feather/heart";
function App() {
return (
<main className="flex gap-4 items-center justify-center min-h-screen">
<BadgeCheckIcon className="size-10" />
<CloudDownloadIcon className="size-10" />
<HeartIcon className="size-10" />
<HomeIcon className="size-10" />
{/* if you don't want to use the className prop, you can use the svg props */}
<HomeIcon height={40} />
</main>
);
}
export default App;