Revert "feat: implement watch config file"

This reverts commit 20067dd.

apps/docs/pages/_meta.tsx

@@ -1,6 +1,7 @@
 export default {
   index: "Introduction",
   installation: "Installation",
+  troubleshooting: "Troubleshooting",
   contact: {
     title: "Contact ↗",
     type: "page",

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 copy
-npm i @monicon/core @monicon/react @monicon/webpack
+```sh npm2yarn
+npm i @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 copy
+```sh npm2yarn
 npm i -D @iconify/json
 
 # or specific icon sets
@@ -27,12 +27,21 @@ 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" copy
+```js filename="next.config.js"
 const { MoniconPlugin } = require("@monicon/webpack");
 
 const nextConfig = {
   webpack: (config) => {
-    config.plugins.push(new MoniconPlugin());
+    config.plugins.push(
+      new MoniconPlugin({
+        icons: [
+          "mdi:home",
+          "feather:activity",
+          "logos:active-campaign",
+          "lucide:badge-check",
+        ],
+      })
+    );
 
     return config;
   },
@@ -41,35 +50,17 @@ 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 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 `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/page.tsx" copy
+```tsx filename="src/app/page.tsx"
 import { Monicon } from "@monicon/react";
 
 function App() {
@@ -89,5 +80,4 @@ 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>
+</Steps>

apps/docs/pages/installation/nuxt.mdx

@@ -5,18 +5,17 @@ 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 copy
-npm i @monicon/core @monicon/vue @monicon/nuxt
+```sh npm2yarn
+npm i @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 copy
+```sh npm2yarn
 npm i -D @iconify/json
 
 # or specific icon sets
@@ -27,52 +26,41 @@ 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" copy
+```ts filename="nuxt.config.ts"
 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 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 `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 Vue components. Here’s an example of how to use Monicon in a Vue component.
 
-```vue filename="src/app.vue" copy
+```vue filename="src/app.vue"
 <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>
+</Steps>

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

@@ -10,16 +10,16 @@ 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 copy
-npm i @monicon/core @monicon/native @monicon/metro @monicon/babel-plugin
+```sh npm2yarn
+npm i @monicon/native @monicon/metro @monicon/babel-plugin
 
 # if you want react-native-web support
 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 copy
+```sh npm2yarn
 npm i -D @iconify/json
 
 # or specific icon sets
@@ -30,22 +30,34 @@ 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" copy
+```js filename="metro.config.js"
 const { getDefaultConfig } = require("expo/metro-config");
 const { withMonicon } = require("@monicon/metro");
 
 const config = getDefaultConfig(__dirname);
 
-const configWithMonicon = withMonicon(config);
+const configWithMonicon = withMonicon(config, {
+  icons: [
+    "mdi:home",
+    "feather:activity",
+    "logos:active-campaign",
+  ],
+});
 
 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="babel.config.js" copy
+```ts filename="vite.config.ts"
 module.exports = function (api) {
   api.cache(true);
   return {
@@ -59,54 +71,39 @@ 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" copy
+```js filename="webpack.config.js"
 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());
+  config.plugins.push(
+    new MoniconPlugin({
+      icons: [
+        "mdi:home",
+        "feather:activity",
+        "logos:active-campaign",
+        "lucide:badge-check"
+      ],
+    })
+  );
 
   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" copy
+```tsx filename="src/App.tsx"
 import { View } from "react-native";
 import { Monicon } from "@monicon/native";
 
 function App() {
   return (
-    <View>
+    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
       <Monicon name="mdi:home" />
       <Monicon name="logos:active-campaign" size={30} />
       <Monicon name="feather:activity" color="red" />
@@ -121,5 +118,4 @@ 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>
+</Steps>