From 238bfcfd70e90e159ae54a9013c94bacede7758a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oktay=20=C5=9Eenkan?= <oktay.senkan@gmail.com>
Date: Thu, 17 Oct 2024 06:43:19 +0300
Subject: [PATCH] Revert "docs(docs): add troubleshooting docs"

This reverts commit 787cc11578006e4d3b7cb14e907736183e254237.
---
 apps/docs/pages/_meta.tsx                     |  1 -
 apps/docs/pages/installation/nextjs.mdx       | 44 +++++++-----
 apps/docs/pages/installation/nuxt.mdx         | 54 +++++++++------
 apps/docs/pages/installation/react-native.mdx | 68 ++++++++++---------
 apps/docs/pages/installation/react-rollup.mdx | 44 +++++++-----
 apps/docs/pages/installation/react-rspack.mdx | 44 +++++++-----
 apps/docs/pages/installation/react.mdx        | 45 +++++++-----
 apps/docs/pages/installation/remix.mdx        | 45 +++++++-----
 apps/docs/pages/installation/svelte.mdx       | 45 +++++++-----
 apps/docs/pages/installation/vue.mdx          | 59 +++++++++-------
 apps/docs/pages/troubleshooting/_meta.tsx     |  4 --
 .../troubleshooting/module-resolution.mdx     | 18 -----
 apps/docs/pages/troubleshooting/monorepo.mdx  | 17 -----
 13 files changed, 266 insertions(+), 222 deletions(-)
 delete mode 100644 apps/docs/pages/troubleshooting/_meta.tsx
 delete mode 100644 apps/docs/pages/troubleshooting/module-resolution.mdx
 delete mode 100644 apps/docs/pages/troubleshooting/monorepo.mdx

diff --git a/apps/docs/pages/_meta.tsx b/apps/docs/pages/_meta.tsx
index 5e8a645..43816cd 100644
--- a/apps/docs/pages/_meta.tsx
+++ b/apps/docs/pages/_meta.tsx
@@ -1,7 +1,6 @@
 export default {
   index: "Introduction",
   installation: "Installation",
-  troubleshooting: "Troubleshooting",
   contact: {
     title: "Contact ↗",
     type: "page",
diff --git a/apps/docs/pages/installation/nextjs.mdx b/apps/docs/pages/installation/nextjs.mdx
index c36b748..f2d6525 100644
--- a/apps/docs/pages/installation/nextjs.mdx
+++ b/apps/docs/pages/installation/nextjs.mdx
@@ -10,13 +10,13 @@ Setting up Monicon with Next.js is a straightforward process. This guide will wa
 
 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/webpack
+```sh npm2yarn copy
+npm i @monicon/core @monicon/react @monicon/webpack
 ```
 
 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
+```sh npm2yarn copy
 npm i -D @iconify/json
 
 # or specific icon sets
@@ -27,21 +27,12 @@ npm i -D @iconify-json/mdi @iconify-json/feather
 
 If you want to use Monicon with Next.js, you’ll need to configure Next.js.
 
-```js filename="next.config.js"
+```js filename="next.config.js" copy
 const { MoniconPlugin } = require("@monicon/webpack");
 
 const nextConfig = {
   webpack: (config) => {
-    config.plugins.push(
-      new MoniconPlugin({
-        icons: [
-          "mdi:home",
-          "feather:activity",
-          "logos:active-campaign",
-          "lucide:badge-check",
-        ],
-      })
-    );
+    config.plugins.push(new MoniconPlugin());
 
     return config;
   },
@@ -50,17 +41,35 @@ const nextConfig = {
 module.exports = nextConfig;
 ```
 
+## Configure Monicon
+
+Now you need to configure Monicon to use the icon sets you want in your project. Also you can use `monicon.config.js` file to configure Monicon.
+
+```ts filename="monicon.config.ts" copy
+import type { MoniconOptions } from "@monicon/core";
+
+export default {
+  icons: [
+    "mdi:home",
+    "feather:activity",
+    "logos:active-campaign",
+    "lucide:badge-check",
+  ],
+} satisfies MoniconOptions;
+```
+
 <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.
+The `icons` array in the 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/page.tsx"
+```tsx filename="src/app/page.tsx" copy
 import { Monicon } from "@monicon/react";
 
 function App() {
@@ -80,4 +89,5 @@ export default App;
 ## Next Steps
 
 You’ve successfully set up Monicon with Next.js! You can now explore more icon sets and customize your usage further.
-</Steps>
\ No newline at end of file
+
+</Steps>
diff --git a/apps/docs/pages/installation/nuxt.mdx b/apps/docs/pages/installation/nuxt.mdx
index 6774969..e881c44 100644
--- a/apps/docs/pages/installation/nuxt.mdx
+++ b/apps/docs/pages/installation/nuxt.mdx
@@ -5,17 +5,18 @@ import { Steps, Callout } from "nextra/components";
 Setting up Monicon with Nuxt is a straightforward process. This guide will walk you through the installation and configuration steps to get started with Monicon in your Nuxt project.
 
 <Steps>
+
 ## Install
 
 First, you’ll need to install the necessary dependencies for Monicon. In your project directory, run the following command.
 
-```sh npm2yarn
-npm i @monicon/vue @monicon/nuxt
+```sh npm2yarn copy
+npm i @monicon/core @monicon/vue @monicon/nuxt
 ```
 
 Next, install the development dependency @iconify/json for icon sets. This package provides a comprehensive collection of icons that you can easily integrate into your project.
 
-```sh npm2yarn
+```sh npm2yarn copy
 npm i -D @iconify/json
 
 # or specific icon sets
@@ -26,41 +27,52 @@ npm i -D @iconify-json/mdi @iconify-json/feather
 
 Now that the dependencies are installed, you’ll need to configure Nuxt to use Monicon.
 
-```ts filename="nuxt.config.ts"
+```ts filename="nuxt.config.ts" copy
 export default defineNuxtConfig({
-  devtools: { enabled: true },
   modules: ["@monicon/nuxt"],
-  monicon: {
-    icons: [
-      "mdi:home",
-      "feather:activity",
-      "logos:active-campaign",
-      "lucide:badge-check"
-    ],
-  },
 });
+```
+
+## Configure Monicon
+
+Now you need to configure Monicon to use the icon sets you want in your project. Also you can use `monicon.config.js` file to configure Monicon.
 
+```ts filename="monicon.config.ts" copy
+import type { MoniconOptions } from "@monicon/core";
+
+export default {
+  icons: [
+    "mdi:home",
+    "feather:activity",
+    "logos:active-campaign",
+    "lucide:badge-check",
+  ],
+} satisfies MoniconOptions;
 ```
 
 <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.
+The `icons` array in the 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 Vue components. Here’s an example of how to use Monicon in a Vue component.
 
-```vue filename="src/app.vue"
+```vue filename="src/app.vue" copy
 <template>
-    <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" />
-    <monicon name="mdi:home" />
+  <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" />
+  <monicon name="mdi:home" />
 </template>
 ```
 
 ## Next Steps
 
 You’ve successfully set up Monicon! You can now explore more icon sets and customize your usage further.
-</Steps>
\ No newline at end of file
+
+</Steps>
diff --git a/apps/docs/pages/installation/react-native.mdx b/apps/docs/pages/installation/react-native.mdx
index 7485b75..6778363 100644
--- a/apps/docs/pages/installation/react-native.mdx
+++ b/apps/docs/pages/installation/react-native.mdx
@@ -10,8 +10,8 @@ Setting up Monicon with React Native is a straightforward process. This guide wi
 
 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/native @monicon/metro @monicon/babel-plugin
+```sh npm2yarn copy
+npm i @monicon/core @monicon/native @monicon/metro @monicon/babel-plugin
 
 # if you want react-native-web support
 npm i @monicon/webpack
@@ -19,7 +19,7 @@ npm i @monicon/webpack
 
 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
+```sh npm2yarn copy
 npm i -D @iconify/json
 
 # or specific icon sets
@@ -30,34 +30,22 @@ npm i -D @iconify-json/mdi @iconify-json/feather
 
 Now that the dependencies are installed, you’ll need to configure Metro to use Monicon.
 
-```js filename="metro.config.js"
+```js filename="metro.config.js" copy
 const { getDefaultConfig } = require("expo/metro-config");
 const { withMonicon } = require("@monicon/metro");
 
 const config = getDefaultConfig(__dirname);
 
-const configWithMonicon = withMonicon(config, {
-  icons: [
-    "mdi:home",
-    "feather:activity",
-    "logos:active-campaign",
-  ],
-});
+const configWithMonicon = withMonicon(config);
 
 module.exports = configWithMonicon;
 ```
 
-<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>
-
 ## Configure Babel
 
 Now you’ll need to configure Babel.
 
-```ts filename="vite.config.ts"
+```ts filename="babel.config.js" copy
 module.exports = function (api) {
   api.cache(true);
   return {
@@ -71,39 +59,54 @@ module.exports = function (api) {
 
 If you want to use Monicon with React Native Web, you’ll need to configure Webpack.
 
-```js filename="webpack.config.js"
+```js filename="webpack.config.js" copy
 const createExpoWebpackConfigAsync = require("@expo/webpack-config");
 const { MoniconPlugin } = require("@monicon/webpack");
 
 module.exports = async function (env, argv) {
   const config = await createExpoWebpackConfigAsync(env, argv);
 
-  config.plugins.push(
-    new MoniconPlugin({
-      icons: [
-        "mdi:home",
-        "feather:activity",
-        "logos:active-campaign",
-        "lucide:badge-check"
-      ],
-    })
-  );
+  config.plugins.push(new MoniconPlugin());
 
   return config;
 };
 ```
 
+## Configure Monicon
+
+Now you need to configure Monicon to use the icon sets you want in your project. Also you can use `monicon.config.js` file to configure Monicon.
+
+```ts filename="monicon.config.ts" copy
+import type { MoniconOptions } from "@monicon/core";
+
+export default {
+  icons: [
+    "mdi:home",
+    "feather:activity",
+    "logos:active-campaign",
+    "lucide:badge-check",
+  ],
+} satisfies MoniconOptions;
+```
+
+<Callout>
+The `icons` array in the 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"
+```tsx filename="src/App.tsx" copy
 import { View } from "react-native";
 import { Monicon } from "@monicon/native";
 
 function App() {
   return (
-    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
+    <View>
       <Monicon name="mdi:home" />
       <Monicon name="logos:active-campaign" size={30} />
       <Monicon name="feather:activity" color="red" />
@@ -118,4 +121,5 @@ export default App;
 ## Next Steps
 
 You’ve successfully set up Monicon with React Native! You can now explore more icon sets and customize your usage further.
-</Steps>
\ No newline at end of file
+
+</Steps>
diff --git a/apps/docs/pages/installation/react-rollup.mdx b/apps/docs/pages/installation/react-rollup.mdx
index 923e73a..aaeb781 100644
--- a/apps/docs/pages/installation/react-rollup.mdx
+++ b/apps/docs/pages/installation/react-rollup.mdx
@@ -10,13 +10,13 @@ Setting up Monicon with React and Rollup is a straightforward process. This guid
 
 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/rollup
+```sh npm2yarn copy
+npm i @monicon/core @monicon/react @monicon/rollup
 ```
 
 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
+```sh npm2yarn copy
 npm i -D @iconify/json
 
 # or specific icon sets
@@ -27,34 +27,43 @@ npm i -D @iconify-json/mdi @iconify-json/feather
 
 Now that the dependencies are installed, you’ll need to configure Rollup to use Monicon.
 
-```ts filename="rollup.config.mjs"
+```ts filename="rollup.config.mjs" copy
 import monicon from "@monicon/rollup";
 
 export default {
-  plugins: [
-    monicon({
-      icons: [
-        "mdi:home",
-        "feather:activity",
-        "logos:active-campaign",
-        "lucide:badge-check"
-      ],
-    }),
-  ],
+  plugins: [monicon()],
 };
 ```
 
+## Configure Monicon
+
+Now you need to configure Monicon to use the icon sets you want in your project. Also you can use `monicon.config.js` file to configure Monicon.
+
+```ts filename="monicon.config.ts" copy
+import type { MoniconOptions } from "@monicon/core";
+
+export default {
+  icons: [
+    "mdi:home",
+    "feather:activity",
+    "logos:active-campaign",
+    "lucide:badge-check",
+  ],
+} satisfies MoniconOptions;
+```
+
 <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.
+The `icons` array in the 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"
+```tsx filename="src/App.tsx" copy
 import { Monicon } from "@monicon/react";
 
 function App() {
@@ -74,4 +83,5 @@ export default App;
 ## Next Steps
 
 You’ve successfully set up Monicon with React and Rollup! You can now explore more icon sets and customize your usage further.
-</Steps>
\ No newline at end of file
+
+</Steps>
diff --git a/apps/docs/pages/installation/react-rspack.mdx b/apps/docs/pages/installation/react-rspack.mdx
index 860fb2c..cbfe7a3 100644
--- a/apps/docs/pages/installation/react-rspack.mdx
+++ b/apps/docs/pages/installation/react-rspack.mdx
@@ -10,13 +10,13 @@ Setting up Monicon with React and Rspack is a straightforward process. This guid
 
 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/rspack
+```sh npm2yarn copy
+npm i @monicon/core @monicon/react @monicon/rspack
 ```
 
 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
+```sh npm2yarn copy
 npm i -D @iconify/json
 
 # or specific icon sets
@@ -27,35 +27,44 @@ npm i -D @iconify-json/mdi @iconify-json/feather
 
 Now that the dependencies are installed, you’ll need to configure Rollup to use Monicon.
 
-```ts filename="rspack.config.mjs"
+```ts filename="rspack.config.mjs" copy
 import { defineConfig } from "@rspack/cli";
 import MoniconPlugin from "@monicon/rspack";
 
 export default defineConfig({
-  plugins: [
-    new MoniconPlugin({
-      icons: [
-        "mdi:home",
-        "feather:activity",
-        "logos:active-campaign",
-        "lucide:badge-check"
-      ],
-    }),
-  ]
+  plugins: [new MoniconPlugin()],
 });
 ```
 
+## Configure Monicon
+
+Now you need to configure Monicon to use the icon sets you want in your project. Also you can use `monicon.config.js` file to configure Monicon.
+
+```ts filename="monicon.config.ts" copy
+import type { MoniconOptions } from "@monicon/core";
+
+export default {
+  icons: [
+    "mdi:home",
+    "feather:activity",
+    "logos:active-campaign",
+    "lucide:badge-check",
+  ],
+} satisfies MoniconOptions;
+```
+
 <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.
+The `icons` array in the 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"
+```tsx filename="src/App.tsx" copy
 import { Monicon } from "@monicon/react";
 
 function App() {
@@ -75,4 +84,5 @@ export default App;
 ## Next Steps
 
 You’ve successfully set up Monicon with React and Rspack! You can now explore more icon sets and customize your usage further.
-</Steps>
\ No newline at end of file
+
+</Steps>
diff --git a/apps/docs/pages/installation/react.mdx b/apps/docs/pages/installation/react.mdx
index 24a31c1..8129f3d 100644
--- a/apps/docs/pages/installation/react.mdx
+++ b/apps/docs/pages/installation/react.mdx
@@ -10,13 +10,13 @@ Setting up Monicon with React and Vite is a straightforward process. This guide
 
 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
+```sh npm2yarn copy
+npm i @monicon/core @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
+```sh npm2yarn copy
 npm i -D @iconify/json
 
 # or specific icon sets
@@ -27,37 +27,45 @@ npm i -D @iconify-json/mdi @iconify-json/feather
 
 Now that the dependencies are installed, you’ll need to configure Vite to use Monicon.
 
-```ts filename="vite.config.ts"
+```ts filename="vite.config.ts" copy
 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",
-        "lucide:badge-check"
-      ],
-    }),
-  ],
+  plugins: [react(), monicon()],
 });
 ```
 
+## Configure Monicon
+
+Now you need to configure Monicon to use the icon sets you want in your project. Also you can use `monicon.config.js` file to configure Monicon.
+
+```ts filename="monicon.config.ts" copy
+import type { MoniconOptions } from "@monicon/core";
+
+export default {
+  icons: [
+    "mdi:home",
+    "feather:activity",
+    "logos:active-campaign",
+    "lucide:badge-check",
+  ],
+} satisfies MoniconOptions;
+```
+
 <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.
+The `icons` array in the 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"
+```tsx filename="src/App.tsx" copy
 import { Monicon } from "@monicon/react";
 
 function App() {
@@ -77,4 +85,5 @@ 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
+
+</Steps>
diff --git a/apps/docs/pages/installation/remix.mdx b/apps/docs/pages/installation/remix.mdx
index c2c4f2d..8bb599e 100644
--- a/apps/docs/pages/installation/remix.mdx
+++ b/apps/docs/pages/installation/remix.mdx
@@ -10,13 +10,13 @@ Setting up Monicon with Remix and Vite is a straightforward process. This guide
 
 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
+```sh npm2yarn copy
+npm i @monicon/core @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
+```sh npm2yarn copy
 npm i -D @iconify/json
 
 # or specific icon sets
@@ -27,37 +27,45 @@ npm i -D @iconify-json/mdi @iconify-json/feather
 
 Now that the dependencies are installed, you’ll need to configure Vite to use Monicon.
 
-```ts filename="vite.config.ts"
+```ts filename="vite.config.ts" copy
 import { vitePlugin as remix } from "@remix-run/dev";
 import { defineConfig } from "vite";
 import monicon from "@monicon/vite";
 
 export default defineConfig({
-  plugins: [
-    remix(),
-    monicon({
-      icons: [
-        "mdi:home",
-        "feather:activity",
-        "logos:active-campaign",
-        "lucide:badge-check"
-      ],
-    }),
-  ],
+  plugins: [remix(), monicon()],
 });
 ```
 
+## Configure Monicon
+
+Now you need to configure Monicon to use the icon sets you want in your project. Also you can use `monicon.config.js` file to configure Monicon.
+
+```ts filename="monicon.config.ts" copy
+import type { MoniconOptions } from "@monicon/core";
+
+export default {
+  icons: [
+    "mdi:home",
+    "feather:activity",
+    "logos:active-campaign",
+    "lucide:badge-check",
+  ],
+} satisfies MoniconOptions;
+```
+
 <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.
+The `icons` array in the 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="app/routes/_index.tsx"
+```tsx filename="app/routes/_index.tsx" copy
 import { Monicon } from "@monicon/react";
 
 function App() {
@@ -77,4 +85,5 @@ export default App;
 ## Next Steps
 
 You’ve successfully set up Monicon with Remix! You can now explore more icon sets and customize your usage further.
-</Steps>
\ No newline at end of file
+
+</Steps>
diff --git a/apps/docs/pages/installation/svelte.mdx b/apps/docs/pages/installation/svelte.mdx
index a06a93e..e7109fd 100644
--- a/apps/docs/pages/installation/svelte.mdx
+++ b/apps/docs/pages/installation/svelte.mdx
@@ -10,13 +10,13 @@ Setting up Monicon with Svelte is a straightforward process. This guide will wal
 
 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/svelte @monicon/vite
+```sh npm2yarn copy
+npm i @monicon/core @monicon/svelte @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
+```sh npm2yarn copy
 npm i -D @iconify/json
 
 # or specific icon sets
@@ -27,37 +27,45 @@ npm i -D @iconify-json/mdi @iconify-json/feather
 
 Now that the dependencies are installed, you’ll need to configure Vite to use Monicon.
 
-```tsx filename="vite.config.ts"
+```tsx filename="vite.config.ts" copy
 import { defineConfig } from "vite";
 import { svelte } from "@sveltejs/vite-plugin-svelte";
 import monicon from "@monicon/vite";
 
 export default defineConfig({
-  plugins: [
-    svelte(),
-    monicon({
-      icons: [
-        "mdi:home",
-        "feather:activity",
-        "logos:active-campaign",
-        "lucide:badge-check"
-      ],
-    }),
-  ],
+  plugins: [svelte(), monicon()],
 });
 ```
 
+## Configure Monicon
+
+Now you need to configure Monicon to use the icon sets you want in your project. Also you can use `monicon.config.js` file to configure Monicon.
+
+```ts filename="monicon.config.ts" copy
+import type { MoniconOptions } from "@monicon/core";
+
+export default {
+  icons: [
+    "mdi:home",
+    "feather:activity",
+    "logos:active-campaign",
+    "lucide:badge-check",
+  ],
+} satisfies MoniconOptions;
+```
+
 <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.
+The `icons` array in the 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 Svelte components. Here’s an example of how to use Monicon in a Svelte component.
 
-```svelte filename="src/App.svelte"
+```svelte filename="src/App.svelte" copy
   <script>
     import { Monicon } from "@monicon/svelte";
   </script>
@@ -73,4 +81,5 @@ You can now use Monicon in your Svelte components. Here’s an example of how to
 ## Next Steps
 
 You’ve successfully set up Monicon with Svelte! You can now explore more icon sets and customize your usage further.
-</Steps>
\ No newline at end of file
+
+</Steps>
diff --git a/apps/docs/pages/installation/vue.mdx b/apps/docs/pages/installation/vue.mdx
index 36d9fdc..95b4dd0 100644
--- a/apps/docs/pages/installation/vue.mdx
+++ b/apps/docs/pages/installation/vue.mdx
@@ -5,17 +5,18 @@ import { Steps, Callout } from "nextra/components";
 Setting up Monicon with Vue is a straightforward process. This guide will walk you through the installation and configuration steps to get started with Monicon in your Vue project.
 
 <Steps>
+
 ## Install
 
 First, you’ll need to install the necessary dependencies for Monicon. In your project directory, run the following command.
 
-```sh npm2yarn
-npm i @monicon/vue @monicon/vite
+```sh npm2yarn copy
+npm i @monicon/core @monicon/vue @monicon/vite
 ```
 
 Next, install the development dependency @iconify/json for icon sets. This package provides a comprehensive collection of icons that you can easily integrate into your project.
 
-```sh npm2yarn
+```sh npm2yarn copy
 npm i -D @iconify/json
 
 # or specific icon sets
@@ -26,36 +27,45 @@ npm i -D @iconify-json/mdi @iconify-json/feather
 
 Now that the dependencies are installed, you’ll need to configure Vite to use Monicon.
 
-```ts filename="vite.config.ts"
+```ts filename="vite.config.ts" copy
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
 import monicon from "@monicon/vite";
 
 export default defineConfig({
-  plugins: [
-    vue(),
-    monicon({
-      icons: [
-        "mdi:home",
-        "feather:activity",
-        "logos:active-campaign",
-        "lucide:badge-check"
-      ],
-    }),
-  ],
+  plugins: [vue(), monicon()],
 });
 ```
 
+## Configure Monicon
+
+Now you need to configure Monicon to use the icon sets you want in your project. Also you can use `monicon.config.js` file to configure Monicon.
+
+```ts filename="monicon.config.ts" copy
+import type { MoniconOptions } from "@monicon/core";
+
+export default {
+  icons: [
+    "mdi:home",
+    "feather:activity",
+    "logos:active-campaign",
+    "lucide:badge-check",
+  ],
+} satisfies MoniconOptions;
+```
+
 <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>
+The `icons` array in the 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>
 
 ## Global Import (Optional)
 
 If you want to use Monicon globally in your Vue project, add the following code to your main.ts file.
 
-```ts filename="main.ts"
+```ts filename="main.ts" copy
 import Monicon from "@monicon/vue";
 
 const app = createApp(App);
@@ -67,21 +77,22 @@ app.use(Monicon);
 
 You can now use Monicon in your Vue components. Here’s an example of how to use Monicon in a Vue component.
 
-```vue filename="src/App.vue"
+```vue filename="src/App.vue" copy
 <script setup lang="ts">
 // If you've added app.use(Monicon) in main.ts, you don't need to import Monicon here, also you can use the lower cased `monicon` tag
 import { Monicon } from "@monicon/vue";
 </script>
 
 <template>
-    <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} />
+  <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}" />
 </template>
 ```
 
 ## Next Steps
 
 You’ve successfully set up Monicon! You can now explore more icon sets and customize your usage further.
-</Steps>
\ No newline at end of file
+
+</Steps>
diff --git a/apps/docs/pages/troubleshooting/_meta.tsx b/apps/docs/pages/troubleshooting/_meta.tsx
deleted file mode 100644
index 59491b4..0000000
--- a/apps/docs/pages/troubleshooting/_meta.tsx
+++ /dev/null
@@ -1,4 +0,0 @@
-export default {
-  monorepo: "Monorepo",
-  "module-resolution": "Module Resolution",
-};
diff --git a/apps/docs/pages/troubleshooting/module-resolution.mdx b/apps/docs/pages/troubleshooting/module-resolution.mdx
deleted file mode 100644
index c6e7e7d..0000000
--- a/apps/docs/pages/troubleshooting/module-resolution.mdx
+++ /dev/null
@@ -1,18 +0,0 @@
-# Module Resolution
-
-Here, module resolution ensures that the correct version and format of the module are loaded, making sure everything works together smoothly. You can specify different formats like "esm" for modern JavaScript or "cjs" for older CommonJS modules.
-
-```ts filename="apps/web/vite.config.ts" copy {10}
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
-import monicon from "@monicon/vite";
-
-export default defineConfig({
-  plugins: [
-    react(),
-    // The format option makes sure outfile is in ESM format
-    // You can also use "cjs" for CommonJS format but Vite does not support it
-    monicon({ format: "esm" }),
-  ],
-});
-```
diff --git a/apps/docs/pages/troubleshooting/monorepo.mdx b/apps/docs/pages/troubleshooting/monorepo.mdx
deleted file mode 100644
index fcdff39..0000000
--- a/apps/docs/pages/troubleshooting/monorepo.mdx
+++ /dev/null
@@ -1,17 +0,0 @@
-# Monorepo Configuration
-
-This monorepo configuration each app has a unique output file, so you can use Monicon in multiple apps without conflicts.
-
-```ts filename="apps/web/vite.config.ts" copy {9}
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
-import monicon from "@monicon/vite";
-
-export default defineConfig({
-  plugins: [
-    react(),
-    // The outputFileName option makes sure each app has a unique file name
-    monicon({ outputFileName: "web" }),
-  ],
-});
-```