Installation
Next.js
Learn how to install and use Monicon in your Next.js project
Installation
Install Monicon and its Webpack plugin in your Next.js project:
npm install @monicon/core @monicon/webpackConfiguration
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;
* - components/icons
* - src/components/icons
*/
({ : ["components/icons"] }),
({ : "components/icons" }),
],
} satisfies ;2. Configure Next.js
Add the Monicon plugin to your next.config.mjs:
import { MoniconPlugin } from "@monicon/webpack";
const nextConfig = {
reactStrictMode: true,
webpack: (config, { dev }) => {
config.plugins.push(new MoniconPlugin({ watch: dev }));
return config;
},
};
export default nextConfig;The watch: dev option enables automatic icon regeneration during development
when your config changes.
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";
export default function Home() {
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 width={40} height={40} />
</main>
);
}