React (esbuild)

Installation

Install Monicon and its esbuild plugin in your project:

npm install @monicon/core @monicon/esbuild

Configuration

1. Create Monicon Config

Create a monicon.config.ts file in your project root:

monicon.config.ts

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 esbuild

Add the Monicon plugin to your esbuild configuration:

build.js

import * as esbuild from "esbuild";
import { monicon } from "@monicon/esbuild";

await esbuild.build({
  plugins: [monicon()],
});

Usage

After configuration, Monicon will automatically generate React components for your icons. You can import and use them in your components:

src/App.tsx

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 function App() {
  return (
    <main className="flex gap-4 items-center justify-center min-h-screen">
      <BadgeCheckIcon className="size-10" />
      <CloudDownloadIcon className="size-10" />
      <ActivityIcon className="size-10" />
      <HomeIcon className="size-10" />
      {/* you can also use standard SVG props */}
      <HomeIcon width={40} height={40} color="blue" />
    </main>
  );
}