React (Rspack)

import { react, clean } from "@monicon/core/plugins";

export default {
  // Loads individual icons by icon name
  icons: ["mdi:home", "feather:activity"],
  // Loads all icons from the lucide collection
  collections: ["lucide"],
  plugins: [
    /**
     * change the output path to your project config for example;
     * - src/components/icons
     * - components/icons
     */
    clean({ patterns: ["src/components/icons"] }),
    react({ outputPath: "src/components/icons", format: "jsx" }),
  ],
};

import { defineConfig } from "@rspack/cli";
import { rspack } from "@rspack/core";
import MoniconPlugin from "@monicon/rspack";

export default defineConfig({
  // ... your rspack config
  plugins: [
    // ... other plugins
    new MoniconPlugin(),
  ],
});

import React from "react";

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";

const App = () => {
  return (
    <div className="flex h-screen items-center justify-center gap-4">
      <BadgeCheckIcon className="size-10" />
      <CloudDownloadIcon className="size-10" />
      <ActivityIcon 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} />
    </div>
  );
};

export default App;