From 9013a4c84eb121f6c918fe4dd8bc2381f018504c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oktay=20=C5=9Eenkan?= <oktay.senkan@gmail.com>
Date: Fri, 17 Jan 2025 00:56:04 +0300
Subject: [PATCH] docs(docs): add react + esbuild installation guide

---
 apps/docs/pages/installation/_meta.tsx        |  1 +
 .../docs/pages/installation/react-esbuild.mdx | 91 +++++++++++++++++++
 2 files changed, 92 insertions(+)
 create mode 100644 apps/docs/pages/installation/react-esbuild.mdx

diff --git a/apps/docs/pages/installation/_meta.tsx b/apps/docs/pages/installation/_meta.tsx
index a64640d..fe91ba5 100644
--- a/apps/docs/pages/installation/_meta.tsx
+++ b/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)",
 };
diff --git a/apps/docs/pages/installation/react-esbuild.mdx b/apps/docs/pages/installation/react-esbuild.mdx
new file mode 100644
index 0000000..f92914e
--- /dev/null
+++ b/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>