From 6cd548611224a204b6e72c8bf5ec1e4818fa1634 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oktay=20=C5=9Eenkan?= <oktay.senkan@gmail.com>
Date: Sun, 6 Oct 2024 03:07:19 +0300
Subject: [PATCH] docs(docs): add installation doc for react and vite app

---
 apps/docs/pages/installation/react.mdx | 78 ++++++++++++++++++++++++++
 1 file changed, 78 insertions(+)
 create mode 100644 apps/docs/pages/installation/react.mdx

diff --git a/apps/docs/pages/installation/react.mdx b/apps/docs/pages/installation/react.mdx
new file mode 100644
index 0000000..9644811
--- /dev/null
+++ b/apps/docs/pages/installation/react.mdx
@@ -0,0 +1,78 @@
+import { Steps, Callout } from "nextra/components";
+
+# Install Monicon with React (Vite)
+
+Setting up Monicon with React and Vite is a straightforward process. This guide will walk you through the installation and configuration steps to get started with Monicon in your React project.
+
+<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/vite
+```
+
+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 Vite
+
+Now that the dependencies are installed, you’ll need to configure Vite to use Monicon.
+
+```tsx filename="vite.config.ts"
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import monicon from "@monicon/vite";
+
+export default defineConfig({
+  plugins: [
+    react(),
+    monicon({
+      icons: [
+        "mdi:home",
+        "feather:activity",
+        "logos:active-campaign",
+      ],
+    }),
+  ],
+});
+```
+
+<Callout>
+The `icons` array in the `monicon` plugin 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" />
+    </main>
+  );
+}
+
+export default App;
+```
+
+## Next Steps
+
+You’ve successfully set up Monicon with React and Vite! You can now explore more icon sets and customize your usage further.
+</Steps>
\ No newline at end of file