React (Webpack)

Installation

Install Monicon and its Webpack plugin in your project:

npm install @monicon/core @monicon/webpack

Configuration

1. Create Monicon Config

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

monicon.config.js

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", : "jsx" }),
  ],
} satisfies ;

2. Configure Webpack

Add the Monicon plugin to your webpack.config.js:

webpack.config.js

const { MoniconPlugin } = require("@monicon/webpack");

module.exports = {
  // ... your webpack config
  plugins: [
    new MoniconPlugin({ watch: process.env.NODE_ENV === "development" }),
    // ... other plugins
  ],
};

The watch: true 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:

src/App.jsx

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" />
      {/* If you don't want to use the className prop, you can use the svg props */}
      <HomeIcon width={40} height={40} color="blue" />
    </main>
  );
}