docs(docs): add react + esbuild installation guide

apps/docs/pages/installation/_meta.tsx

@@ -10,4 +10,5 @@ export default {
   "react-webpack": "React (Webpack)",
   "react-rollup": "React (Rollup)",
   "react-rspack": "React (Rspack)",
+  "react-esbuild": "React (esbuild)",
 };

apps/docs/pages/installation/react-esbuild.mdx

@@ -0,0 +1,91 @@
+import { Steps, Callout } from "nextra/components";
+
+# Install Monicon with React (esbuild)
+
+Setting up Monicon with React and esbuild is a straightforward process. This guide will walk you through the installation and configuration steps to get started with Monicon in your React project using esbuild as the bundler.
+
+<Steps>
+
+## Install
+
+To get started, you'll need to install the necessary dependencies for Monicon. In your project directory, run the following command to install the dependencies.
+
+```sh npm2yarn
+npm i @monicon/react @monicon/esbuild
+```
+
+Now you should install the development dependency `@iconify/json` for the icon sets. This package provides a comprehensive collection of icons that can be easily integrated into your project.
+
+```sh npm2yarn
+npm i -D @iconify/json
+
+# or specific icon sets
+npm i -D @iconify-json/mdi @iconify-json/feather
+```
+
+## Configure esbuild
+
+Now that the dependencies are installed, you'll need to configure esbuild to use Monicon. Create a build script that uses the Monicon esbuild plugin:
+
+```ts filename="build.ts"
+import * as esbuild from "esbuild";
+import monicon from "@monicon/esbuild";
+
+await esbuild.build({
+  plugins: [
+    monicon({
+      icons: [
+        "mdi:home",
+        "feather:activity",
+        "logos:active-campaign",
+        "lucide:badge-check",
+      ],
+      // Load all icons from the listed collections
+      collections: ["radix-icons"],
+    }),
+  ],
+});
+```
+
+<Callout>
+The `icons` array in the `moniconPlugin` configuration specifies the icon sets you want to use in your project. You can add more icon sets as needed.
+
+For a complete list of available icon sets, refer to the [Icones](https://icones.js.org/) website.
+
+</Callout>
+
+## Usage
+
+You can now use Monicon in your React components. Here's an example of how to use Monicon in a React component:
+
+```tsx filename="src/App.tsx"
+import { Monicon } from "@monicon/react";
+
+function App() {
+  return (
+    <main>
+      <Monicon name="mdi:home" />
+      <Monicon name="logos:active-campaign" size={30} />
+      <Monicon name="feather:activity" color="red" />
+      <Monicon name="lucide:badge-check" size={24} strokeWidth={4} />
+    </main>
+  );
+}
+
+export default App;
+```
+
+## Configure .gitignore
+
+Add the following to your `.gitignore` file to prevent icons from being committed to your repository:
+
+```
+# monicon
+.monicon
+```
+
+## Next Steps
+
+You've successfully set up Monicon with React and esbuild! You can now explore more icon sets and customize your usage further.
+
+</Steps>

packages/icon-loader/package.json

@@ -22,6 +22,7 @@
     "clean": "rm -rf dist"
   },
   "devDependencies": {
+    "@monicon/core": "*",
     "@monicon/typescript-config": "*",
     "@types/lodash": "^4.17.14",
     "tsup": "^8.0.1",