diff --git a/apps/docs/pages/_meta.tsx b/apps/docs/pages/_meta.tsx
index 43816cd..5e8a645 100644
--- a/apps/docs/pages/_meta.tsx
+++ b/apps/docs/pages/_meta.tsx
@@ -1,6 +1,7 @@
 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 f2d6525..c36b748 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 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>
\ No newline at end of file
diff --git a/apps/docs/pages/installation/nuxt.mdx b/apps/docs/pages/installation/nuxt.mdx
index e881c44..6774969 100644
--- a/apps/docs/pages/installation/nuxt.mdx
+++ b/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>
\ No newline at end of file
diff --git a/apps/docs/pages/installation/react-native.mdx b/apps/docs/pages/installation/react-native.mdx
index 6778363..7485b75 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 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
@@ -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 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>
\ No newline at end of file
diff --git a/apps/docs/pages/installation/react-rollup.mdx b/apps/docs/pages/installation/react-rollup.mdx
index aaeb781..923e73a 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 copy
-npm i @monicon/core @monicon/react @monicon/rollup
+```sh npm2yarn
+npm i @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 copy
+```sh npm2yarn
 npm i -D @iconify/json
 
 # or specific icon sets
@@ -27,43 +27,34 @@ 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" copy
+```ts filename="rollup.config.mjs"
 import monicon from "@monicon/rollup";
 
 export default {
-  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",
+  plugins: [
+    monicon({
+      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.tsx" copy
+```tsx filename="src/App.tsx"
 import { Monicon } from "@monicon/react";
 
 function App() {
@@ -83,5 +74,4 @@ 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>
+</Steps>
\ No newline at end of file
diff --git a/apps/docs/pages/installation/react-rspack.mdx b/apps/docs/pages/installation/react-rspack.mdx
index cbfe7a3..860fb2c 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 copy
-npm i @monicon/core @monicon/react @monicon/rspack
+```sh npm2yarn
+npm i @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 copy
+```sh npm2yarn
 npm i -D @iconify/json
 
 # or specific icon sets
@@ -27,44 +27,35 @@ 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" copy
+```ts filename="rspack.config.mjs"
 import { defineConfig } from "@rspack/cli";
 import MoniconPlugin from "@monicon/rspack";
 
 export default defineConfig({
-  plugins: [new MoniconPlugin()],
+  plugins: [
+    new MoniconPlugin({
+      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.
+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" copy
+```tsx filename="src/App.tsx"
 import { Monicon } from "@monicon/react";
 
 function App() {
@@ -84,5 +75,4 @@ 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>
+</Steps>
\ No newline at end of file
diff --git a/apps/docs/pages/installation/react.mdx b/apps/docs/pages/installation/react.mdx
index 8129f3d..24a31c1 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 copy
-npm i @monicon/core @monicon/react @monicon/vite
+```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 copy
+```sh npm2yarn
 npm i -D @iconify/json
 
 # or specific icon sets
@@ -27,45 +27,37 @@ 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" copy
+```ts 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()],
-});
-```
-
-## 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",
+  plugins: [
+    react(),
+    monicon({
+      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.tsx" copy
+```tsx filename="src/App.tsx"
 import { Monicon } from "@monicon/react";
 
 function App() {
@@ -85,5 +77,4 @@ 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>
+</Steps>
\ No newline at end of file
diff --git a/apps/docs/pages/installation/remix.mdx b/apps/docs/pages/installation/remix.mdx
index 8bb599e..c2c4f2d 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 copy
-npm i @monicon/core @monicon/react @monicon/vite
+```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 copy
+```sh npm2yarn
 npm i -D @iconify/json
 
 # or specific icon sets
@@ -27,45 +27,37 @@ 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" copy
+```ts filename="vite.config.ts"
 import { vitePlugin as remix } from "@remix-run/dev";
 import { defineConfig } from "vite";
 import monicon from "@monicon/vite";
 
 export default defineConfig({
-  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",
+  plugins: [
+    remix(),
+    monicon({
+      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="app/routes/_index.tsx" copy
+```tsx filename="app/routes/_index.tsx"
 import { Monicon } from "@monicon/react";
 
 function App() {
@@ -85,5 +77,4 @@ 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>
+</Steps>
\ No newline at end of file
diff --git a/apps/docs/pages/installation/svelte.mdx b/apps/docs/pages/installation/svelte.mdx
index e7109fd..a06a93e 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 copy
-npm i @monicon/core @monicon/svelte @monicon/vite
+```sh npm2yarn
+npm i @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 copy
+```sh npm2yarn
 npm i -D @iconify/json
 
 # or specific icon sets
@@ -27,45 +27,37 @@ 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" copy
+```tsx filename="vite.config.ts"
 import { defineConfig } from "vite";
 import { svelte } from "@sveltejs/vite-plugin-svelte";
 import monicon from "@monicon/vite";
 
 export default defineConfig({
-  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",
+  plugins: [
+    svelte(),
+    monicon({
+      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 Svelte components. Here’s an example of how to use Monicon in a Svelte component.
 
-```svelte filename="src/App.svelte" copy
+```svelte filename="src/App.svelte"
   <script>
     import { Monicon } from "@monicon/svelte";
   </script>
@@ -81,5 +73,4 @@ 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>
+</Steps>
\ No newline at end of file
diff --git a/apps/docs/pages/installation/vue.mdx b/apps/docs/pages/installation/vue.mdx
index 95b4dd0..36d9fdc 100644
--- a/apps/docs/pages/installation/vue.mdx
+++ b/apps/docs/pages/installation/vue.mdx
@@ -5,18 +5,17 @@ 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 copy
-npm i @monicon/core @monicon/vue @monicon/vite
+```sh npm2yarn
+npm i @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 copy
+```sh npm2yarn
 npm i -D @iconify/json
 
 # or specific icon sets
@@ -27,45 +26,36 @@ 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" copy
+```ts filename="vite.config.ts"
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
 import monicon from "@monicon/vite";
 
 export default defineConfig({
-  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",
+  plugins: [
+    vue(),
+    monicon({
+      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>
 
+
 ## 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" copy
+```ts filename="main.ts"
 import Monicon from "@monicon/vue";
 
 const app = createApp(App);
@@ -77,22 +67,21 @@ 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" copy
+```vue filename="src/App.vue"
 <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>
+</Steps>
\ No newline at end of file
diff --git a/apps/docs/pages/troubleshooting/_meta.tsx b/apps/docs/pages/troubleshooting/_meta.tsx
new file mode 100644
index 0000000..59491b4
--- /dev/null
+++ b/apps/docs/pages/troubleshooting/_meta.tsx
@@ -0,0 +1,4 @@
+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
new file mode 100644
index 0000000..c6e7e7d
--- /dev/null
+++ b/apps/docs/pages/troubleshooting/module-resolution.mdx
@@ -0,0 +1,18 @@
+# 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
new file mode 100644
index 0000000..fcdff39
--- /dev/null
+++ b/apps/docs/pages/troubleshooting/monorepo.mdx
@@ -0,0 +1,17 @@
+# 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" }),
+  ],
+});
+```
diff --git a/apps/next/monicon.config.ts b/apps/next/monicon.config.ts
deleted file mode 100644
index 21346ea..0000000
--- a/apps/next/monicon.config.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { MoniconOptions } from "@monicon/core";
-
-export default {
-  icons: [
-    "mdi:home",
-    "mdi:account",
-    "mdi:account-badge-outline",
-    "feather:activity",
-    "feather:alert-circle",
-    "logos:active-campaign",
-    "logos:apache-superset-icon",
-    "lucide:badge-check",
-  ],
-} satisfies MoniconOptions;
diff --git a/apps/next/next.config.js b/apps/next/next.config.js
index bd98387..ac7f484 100644
--- a/apps/next/next.config.js
+++ b/apps/next/next.config.js
@@ -17,7 +17,20 @@ module.exports = {
       ...config.resolve.extensions,
     ];
 
-    config.plugins.push(new MoniconPlugin({ outputFileName: "next" }));
+    config.plugins.push(
+      new MoniconPlugin({
+        icons: [
+          "mdi:home",
+          "mdi:account",
+          "mdi:account-badge-outline",
+          "feather:activity",
+          "feather:alert-circle",
+          "logos:active-campaign",
+          "logos:apache-superset-icon",
+        ],
+        outputFileName: "next",
+      })
+    );
 
     return config;
   },
diff --git a/apps/nuxt-app/monicon.config.ts b/apps/nuxt-app/monicon.config.ts
deleted file mode 100644
index a532fcf..0000000
--- a/apps/nuxt-app/monicon.config.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import type { MoniconOptions } from "@monicon/core";
-
-export default {
-  icons: [
-    "mdi:home",
-    "mdi:account",
-    "mdi:account-badge-outline",
-    "feather:activity",
-    "feather:alert-circle",
-    "logos:active-campaign",
-    "logos:apache-superset-icon",
-    "lucide:badge-check",
-  ],
-} satisfies MoniconOptions;
diff --git a/apps/nuxt-app/nuxt.config.ts b/apps/nuxt-app/nuxt.config.ts
index 64b42f1..6a95fc0 100644
--- a/apps/nuxt-app/nuxt.config.ts
+++ b/apps/nuxt-app/nuxt.config.ts
@@ -3,6 +3,16 @@ export default defineNuxtConfig({
   compatibilityDate: "2024-10-05",
   modules: ["@monicon/nuxt"],
   monicon: {
+    icons: [
+      "mdi:home",
+      "mdi:account",
+      "mdi:account-badge-outline",
+      "feather:activity",
+      "feather:alert-circle",
+      "logos:active-campaign",
+      "logos:apache-superset-icon",
+      "lucide:badge-check",
+    ],
     outputFileName: "nuxt",
   },
 });
diff --git a/apps/react-native-app/metro.config.js b/apps/react-native-app/metro.config.js
index 38093c9..78f044c 100644
--- a/apps/react-native-app/metro.config.js
+++ b/apps/react-native-app/metro.config.js
@@ -10,6 +10,16 @@ const projectRoot = __dirname;
 const config = getDefaultConfig(projectRoot);
 
 const configWithMonicon = withMonicon(config, {
+  icons: [
+    "mdi:home",
+    "mdi:account",
+    "mdi:account-badge-outline",
+    "feather:activity",
+    "feather:alert-circle",
+    "logos:active-campaign",
+    "logos:apache-superset-icon",
+    "icon-park-outline:arrow-circle-right",
+  ],
   outputFileName: "react-native-app",
 });
 
diff --git a/apps/react-native-app/monicon.config.ts b/apps/react-native-app/monicon.config.ts
deleted file mode 100644
index 21346ea..0000000
--- a/apps/react-native-app/monicon.config.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { MoniconOptions } from "@monicon/core";
-
-export default {
-  icons: [
-    "mdi:home",
-    "mdi:account",
-    "mdi:account-badge-outline",
-    "feather:activity",
-    "feather:alert-circle",
-    "logos:active-campaign",
-    "logos:apache-superset-icon",
-    "lucide:badge-check",
-  ],
-} satisfies MoniconOptions;
diff --git a/apps/react-native-app/webpack.config.js b/apps/react-native-app/webpack.config.js
index a6e423a..0918b4b 100644
--- a/apps/react-native-app/webpack.config.js
+++ b/apps/react-native-app/webpack.config.js
@@ -5,7 +5,19 @@ module.exports = async function (env, argv) {
   const config = await createExpoWebpackConfigAsync(env, argv);
 
   config.plugins.push(
-    new MoniconPlugin({ outputFileName: "react-native-app" })
+    new MoniconPlugin({
+      icons: [
+        "mdi:home",
+        "mdi:account",
+        "mdi:account-badge-outline",
+        "feather:activity",
+        "feather:alert-circle",
+        "logos:active-campaign",
+        "logos:apache-superset-icon",
+        "icon-park-outline:arrow-circle-right",
+      ],
+      outputFileName: "react-native-app",
+    })
   );
 
   return config;
diff --git a/apps/remix/monicon.config.ts b/apps/remix/monicon.config.ts
deleted file mode 100644
index 21346ea..0000000
--- a/apps/remix/monicon.config.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { MoniconOptions } from "@monicon/core";
-
-export default {
-  icons: [
-    "mdi:home",
-    "mdi:account",
-    "mdi:account-badge-outline",
-    "feather:activity",
-    "feather:alert-circle",
-    "logos:active-campaign",
-    "logos:apache-superset-icon",
-    "lucide:badge-check",
-  ],
-} satisfies MoniconOptions;
diff --git a/apps/remix/vite.config.ts b/apps/remix/vite.config.ts
index d86c6a4..ed53556 100644
--- a/apps/remix/vite.config.ts
+++ b/apps/remix/vite.config.ts
@@ -13,6 +13,9 @@ export default defineConfig({
       },
     }),
     tsconfigPaths(),
-    monicon({ outputFileName: "remix" }),
+    monicon({
+      icons: ["mdi:home", "mdi:account"],
+      outputFileName: "remix",
+    })
   ],
 });
diff --git a/apps/rollup-react/monicon.config.ts b/apps/rollup-react/monicon.config.ts
deleted file mode 100644
index 21346ea..0000000
--- a/apps/rollup-react/monicon.config.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { MoniconOptions } from "@monicon/core";
-
-export default {
-  icons: [
-    "mdi:home",
-    "mdi:account",
-    "mdi:account-badge-outline",
-    "feather:activity",
-    "feather:alert-circle",
-    "logos:active-campaign",
-    "logos:apache-superset-icon",
-    "lucide:badge-check",
-  ],
-} satisfies MoniconOptions;
diff --git a/apps/rollup-react/rollup.config.mjs b/apps/rollup-react/rollup.config.mjs
index 537a8cb..e907426 100644
--- a/apps/rollup-react/rollup.config.mjs
+++ b/apps/rollup-react/rollup.config.mjs
@@ -19,13 +19,16 @@ export default {
     nodeResolve({
       extensions: [".js", ".jsx"],
     }),
-    monicon({ outputFileName: "rollup-react" }),
+    monicon({
+      outputFileName: "rollup-react",
+      icons: ["mdi:home"],
+    }),
     babel(),
     commonjs(),
     replace({
       preventAssignment: false,
       "process.env.NODE_ENV": '"development"',
     }),
-    ...(isDev ? [serve(["public", "dist"])] : []),
+    ...(isDev ? [serve("public")] : []),
   ],
 };
diff --git a/apps/rollup-react/src/App.jsx b/apps/rollup-react/src/App.jsx
index fc7dc96..3f10346 100644
--- a/apps/rollup-react/src/App.jsx
+++ b/apps/rollup-react/src/App.jsx
@@ -13,7 +13,6 @@ const App = () => {
       }}
     >
       <Monicon name="mdi:home" size={32} />
-      <Monicon name="lucide:badge-check" size={32} />
     </main>
   );
 };
diff --git a/apps/rspack-react/monicon.config.ts b/apps/rspack-react/monicon.config.ts
deleted file mode 100644
index 21346ea..0000000
--- a/apps/rspack-react/monicon.config.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { MoniconOptions } from "@monicon/core";
-
-export default {
-  icons: [
-    "mdi:home",
-    "mdi:account",
-    "mdi:account-badge-outline",
-    "feather:activity",
-    "feather:alert-circle",
-    "logos:active-campaign",
-    "logos:apache-superset-icon",
-    "lucide:badge-check",
-  ],
-} satisfies MoniconOptions;
diff --git a/apps/rspack-react/package.json b/apps/rspack-react/package.json
index cc272cd..d7d5597 100644
--- a/apps/rspack-react/package.json
+++ b/apps/rspack-react/package.json
@@ -7,18 +7,18 @@
     "build": "cross-env NODE_ENV=production rspack build"
   },
   "dependencies": {
-    "@monicon/react": "*",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "@monicon/react": "*"
   },
   "devDependencies": {
-    "@monicon/rspack": "*",
+    "@rspack/plugin-react-refresh": "1.0.0",
     "@rspack/cli": "^1.0.8",
     "@rspack/core": "^1.0.8",
-    "@rspack/plugin-react-refresh": "1.0.0",
     "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
     "cross-env": "^7.0.3",
-    "react-refresh": "^0.14.0"
+    "react-refresh": "^0.14.0",
+    "@monicon/rspack": "*"
   }
 }
diff --git a/apps/rspack-react/rspack.config.mjs b/apps/rspack-react/rspack.config.mjs
index cb0599c..c00e114 100644
--- a/apps/rspack-react/rspack.config.mjs
+++ b/apps/rspack-react/rspack.config.mjs
@@ -56,7 +56,10 @@ export default defineConfig({
       template: "./index.html",
     }),
     isDev ? new RefreshPlugin() : null,
-    new MoniconPlugin({ outputFileName: "rspack-react" }),
+    new MoniconPlugin({
+      icons: ["mdi:home"],
+      outputFileName: "rspack-react",
+    }),
   ].filter(Boolean),
   optimization: {
     minimizer: [
diff --git a/apps/svelte-app/monicon.config.ts b/apps/svelte-app/monicon.config.ts
deleted file mode 100644
index 21346ea..0000000
--- a/apps/svelte-app/monicon.config.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { MoniconOptions } from "@monicon/core";
-
-export default {
-  icons: [
-    "mdi:home",
-    "mdi:account",
-    "mdi:account-badge-outline",
-    "feather:activity",
-    "feather:alert-circle",
-    "logos:active-campaign",
-    "logos:apache-superset-icon",
-    "lucide:badge-check",
-  ],
-} satisfies MoniconOptions;
diff --git a/apps/svelte-app/vite.config.ts b/apps/svelte-app/vite.config.ts
index ff32041..124c4d1 100644
--- a/apps/svelte-app/vite.config.ts
+++ b/apps/svelte-app/vite.config.ts
@@ -3,5 +3,19 @@ import { defineConfig } from "vite";
 import monicon from "@monicon/vite";
 
 export default defineConfig({
-  plugins: [sveltekit(), monicon({ outputFileName: "svelte-app" })],
+  plugins: [
+    sveltekit(),
+    monicon({
+      icons: [
+        "mdi:home",
+        "mdi:account",
+        "mdi:account-badge-outline",
+        "feather:activity",
+        "feather:alert-circle",
+        "logos:active-campaign",
+        "logos:apache-superset-icon",
+      ],
+      outputFileName: "svelte-app",
+    }),
+  ],
 });
diff --git a/apps/vite-react/monicon.config.ts b/apps/vite-react/monicon.config.ts
deleted file mode 100644
index 21346ea..0000000
--- a/apps/vite-react/monicon.config.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { MoniconOptions } from "@monicon/core";
-
-export default {
-  icons: [
-    "mdi:home",
-    "mdi:account",
-    "mdi:account-badge-outline",
-    "feather:activity",
-    "feather:alert-circle",
-    "logos:active-campaign",
-    "logos:apache-superset-icon",
-    "lucide:badge-check",
-  ],
-} satisfies MoniconOptions;
diff --git a/apps/vite-react/vite.config.ts b/apps/vite-react/vite.config.ts
index c76134a..ef29116 100644
--- a/apps/vite-react/vite.config.ts
+++ b/apps/vite-react/vite.config.ts
@@ -4,5 +4,20 @@ import monicon from "@monicon/vite";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react(), monicon({ outputFileName: "vite-react" })],
+  plugins: [
+    react(),
+    monicon({
+      icons: [
+        "mdi:home",
+        "mdi:account",
+        "mdi:account-badge-outline",
+        "feather:activity",
+        "feather:alert-circle",
+        "logos:active-campaign",
+        "logos:apache-superset-icon",
+        "lucide:badge-check",
+      ],
+      outputFileName: "vite-react",
+    }),
+  ],
 });
diff --git a/apps/vite-vue/monicon.config.ts b/apps/vite-vue/monicon.config.ts
deleted file mode 100644
index 21346ea..0000000
--- a/apps/vite-vue/monicon.config.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { MoniconOptions } from "@monicon/core";
-
-export default {
-  icons: [
-    "mdi:home",
-    "mdi:account",
-    "mdi:account-badge-outline",
-    "feather:activity",
-    "feather:alert-circle",
-    "logos:active-campaign",
-    "logos:apache-superset-icon",
-    "lucide:badge-check",
-  ],
-} satisfies MoniconOptions;
diff --git a/apps/vite-vue/vite.config.ts b/apps/vite-vue/vite.config.ts
index 938bf3c..304549c 100644
--- a/apps/vite-vue/vite.config.ts
+++ b/apps/vite-vue/vite.config.ts
@@ -4,5 +4,19 @@ import monicon from "@monicon/vite";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue(), monicon({ outputFileName: "vite-vue" })],
+  plugins: [
+    vue(),
+    monicon({
+      icons: [
+        "mdi:home",
+        "mdi:account",
+        "mdi:account-badge-outline",
+        "feather:activity",
+        "feather:alert-circle",
+        "logos:active-campaign",
+        "logos:apache-superset-icon",
+      ],
+      outputFileName: "vite-vue",
+    }),
+  ],
 });
diff --git a/packages/babel-plugin/src/index.ts b/packages/babel-plugin/src/index.ts
index a1ed01b..322514d 100644
--- a/packages/babel-plugin/src/index.ts
+++ b/packages/babel-plugin/src/index.ts
@@ -2,7 +2,7 @@ import type * as b from "@babel/core";
 import {
   getIconsFilePath,
   getResolveAlias,
-  MoniconBundlerOptions,
+  MoniconOptions,
 } from "@monicon/core";
 
 const alias = getResolveAlias();
@@ -12,10 +12,9 @@ export default ({ types: t }: typeof b): b.PluginObj => {
     visitor: {
       ImportDeclaration(path) {
         if (path.node.source.value === alias) {
-          path.node.source.value = getIconsFilePath({
-            type: "cjs",
-            ...(this.opts as MoniconBundlerOptions),
-          });
+          path.node.source.value = getIconsFilePath(
+            this.opts as MoniconOptions
+          );
         }
       },
       CallExpression(path) {
@@ -34,10 +33,7 @@ export default ({ types: t }: typeof b): b.PluginObj => {
           firstArg.value === alias;
 
         if (isFunctionImport && isImportingIcons && firstArg) {
-          firstArg.value = getIconsFilePath({
-            type: "cjs",
-            ...(this.opts as MoniconBundlerOptions),
-          });
+          firstArg.value = getIconsFilePath(this.opts as MoniconOptions);
         }
       },
     },
diff --git a/packages/core/package.json b/packages/core/package.json
index ecbac26..a32e4e8 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -27,13 +27,13 @@
     "clean": "rm -rf dist"
   },
   "devDependencies": {
-    "@iconify/types": "^2.0.0",
     "@monicon/typescript-config": "0.0.140",
     "tsup": "^8.0.1",
-    "typescript": "^5.3.3"
+    "typescript": "^5.3.3",
+    "@iconify/types": "^2.0.0",
+    "@iconify/json": "^2.2.251"
   },
   "dependencies": {
-    "@iconify/utils": "^2.1.33",
-    "c12": "^2.0.1"
+    "@iconify/utils": "^2.1.33"
   }
 }
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index 2611819..528a851 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -1,6 +1,5 @@
 import { stringToIcon } from "@iconify/utils/lib/icon/name";
 import { loadNodeIcon } from "@iconify/utils/lib/loader/node-loader";
-import * as c from "c12";
 import fs from "fs";
 import path, { dirname } from "path";
 import { fileURLToPath } from "url";
@@ -9,10 +8,6 @@ import { toPx } from "./utils";
 
 export type MoniconOptions = {
   icons: string[];
-  watch?: boolean;
-};
-
-export type MoniconBundlerOptions = {
   outputFileName?: string;
   type?: "cjs" | "esm";
 };
@@ -24,12 +19,9 @@ export type Icon = {
 };
 
 const defaultOptions: MoniconOptions = {
-  icons: [],
-};
-
-const defaultBundlerOptions: MoniconBundlerOptions = {
   outputFileName: "icons",
   type: "cjs",
+  icons: [],
 };
 
 export const getResolveAlias = () => {
@@ -41,7 +33,7 @@ export const getResolveExtensions = () => {
 };
 
 const getIconsFilePathEsm = (
-  fileName: MoniconBundlerOptions["outputFileName"] = "icons"
+  fileName: MoniconOptions["outputFileName"] = "icons"
 ) => {
   // @ts-ignore
   const currentFileName = fileURLToPath(import.meta.url);
@@ -51,13 +43,13 @@ const getIconsFilePathEsm = (
 };
 
 const getIconsFilePathCjs = (
-  fileName: MoniconBundlerOptions["outputFileName"] = "icons"
+  fileName: MoniconOptions["outputFileName"] = "icons"
 ) => {
   return path.resolve(__dirname, `${fileName}.js`);
 };
 
-export const getIconsFilePath = (opts?: MoniconBundlerOptions) => {
-  const options: MoniconBundlerOptions = { ...defaultBundlerOptions, ...opts };
+export const getIconsFilePath = (opts?: MoniconOptions) => {
+  const options: MoniconOptions = { ...defaultOptions, ...opts };
 
   if (options.type === "esm")
     return getIconsFilePathEsm(options.outputFileName);
@@ -97,12 +89,9 @@ export const loadIcon = async (iconName: string) => {
   } satisfies Icon;
 };
 
-export const loadIcons = async (
-  opts?: MoniconOptions & MoniconBundlerOptions
-) => {
-  const options: MoniconOptions & MoniconBundlerOptions = {
+export const loadIcons = async (opts?: MoniconOptions) => {
+  const options: MoniconOptions = {
     ...defaultOptions,
-    ...defaultBundlerOptions,
     ...opts,
   };
 
@@ -124,30 +113,10 @@ export const loadIcons = async (
 const writeIcons = (
   icons: Record<string, Icon>,
   outputPath: string,
-  type: MoniconBundlerOptions["type"] = "cjs"
+  type: MoniconOptions["type"] = "cjs"
 ) => {
   const commonjsCode = `module.exports = ${JSON.stringify(icons, null, 2)};`;
   const esmCode = `export default ${JSON.stringify(icons, null, 2)};`;
 
   fs.writeFileSync(outputPath, type === "cjs" ? commonjsCode : esmCode);
 };
-
-export const watchConfig = async (
-  defaultConfig: Partial<
-    MoniconOptions & MoniconBundlerOptions
-  > = defaultOptions
-) => {
-  const { config, unwatch } = await c.watchConfig<MoniconOptions>({
-    name: "monicon",
-    defaultConfig: { ...defaultOptions, ...defaultConfig },
-    onUpdate: (context) => {
-      context.newConfig.config && loadIcons(context.newConfig.config);
-    },
-  });
-
-  await loadIcons(config);
-
-  const shouldWatch = config.watch || process.env.NODE_ENV === "development";
-
-  !shouldWatch && unwatch();
-};
diff --git a/packages/esbuild/src/index.ts b/packages/esbuild/src/index.ts
index 1b7493d..3162240 100644
--- a/packages/esbuild/src/index.ts
+++ b/packages/esbuild/src/index.ts
@@ -1,8 +1,8 @@
 import {
+  loadIcons,
   getIconsFilePath,
+  MoniconOptions,
   getResolveAlias,
-  MoniconBundlerOptions,
-  watchConfig,
 } from "@monicon/core";
 import { Plugin } from "esbuild";
 
@@ -10,16 +10,16 @@ const alias = getResolveAlias();
 
 const name = "esbuild-monicon";
 
-export const monicon = (options?: MoniconBundlerOptions): Plugin => {
+export const monicon = (options: MoniconOptions): Plugin => {
   return {
     name,
     setup(build) {
-      build.onResolve({ filter: new RegExp(`^${alias}$`) }, async () => {
+      build.onResolve({ filter: new RegExp(`^${alias}$`) }, (args) => {
         return { path: getIconsFilePath({ type: "esm", ...options }) };
       });
 
       build.onStart(async () => {
-        await watchConfig({ type: "esm", ...options });
+        await loadIcons({ type: "esm", ...options });
       });
     },
   };
diff --git a/packages/metro/src/index.ts b/packages/metro/src/index.ts
index adad6fd..5d544c1 100644
--- a/packages/metro/src/index.ts
+++ b/packages/metro/src/index.ts
@@ -1,22 +1,22 @@
 import { type IntermediateConfigT } from "metro-config";
 import {
+  loadIcons,
   getIconsFilePath,
   getResolveAlias,
-  MoniconBundlerOptions,
-  watchConfig,
+  MoniconOptions,
 } from "@monicon/core";
 
 export const withMonicon = (
   metroConfig: IntermediateConfigT,
-  options?: MoniconBundlerOptions
+  options?: MoniconOptions
 ): IntermediateConfigT => {
   const alias = getResolveAlias();
 
-  void watchConfig({ type: "cjs", ...options });
+  void loadIcons(options);
 
   metroConfig.resolver.extraNodeModules = {
     ...metroConfig.resolver.extraNodeModules,
-    [alias]: getIconsFilePath({ type: "cjs", ...options }),
+    [alias]: getIconsFilePath(options),
   };
 
   return metroConfig;
diff --git a/packages/nuxt/src/index.ts b/packages/nuxt/src/index.ts
index d819132..6e07cdf 100644
--- a/packages/nuxt/src/index.ts
+++ b/packages/nuxt/src/index.ts
@@ -1,13 +1,14 @@
 import { addComponent, defineNuxtModule } from "@nuxt/kit";
-import { MoniconBundlerOptions } from "@monicon/core";
+import { MoniconOptions } from "@monicon/core";
 import moniconVitePlugin from "@monicon/vite";
 import MoniconWebpackPlugin from "@monicon/webpack";
 
-const defaultOptions: MoniconBundlerOptions = {
+const defaultOptions: MoniconOptions = {
+  icons: [],
   type: "esm",
 };
 
-export default defineNuxtModule<MoniconBundlerOptions>({
+export default defineNuxtModule<MoniconOptions>({
   meta: {
     name: "nuxt-monicon",
     configKey: "monicon",
diff --git a/packages/rspack/src/index.ts b/packages/rspack/src/index.ts
index 3a4219b..3b628e3 100644
--- a/packages/rspack/src/index.ts
+++ b/packages/rspack/src/index.ts
@@ -1,4 +1,4 @@
-import { MoniconBundlerOptions } from "@monicon/core";
+import { MoniconOptions } from "@monicon/core";
 import { MoniconPlugin as MoniconWebpackPlugin } from "@monicon/webpack";
 
 const pluginName = "rspack-monicon";
@@ -6,8 +6,8 @@ const pluginName = "rspack-monicon";
 export class MoniconPlugin extends MoniconWebpackPlugin {
   name = pluginName;
 
-  constructor(options?: MoniconBundlerOptions) {
-    const opts: MoniconBundlerOptions = {
+  constructor(options: MoniconOptions) {
+    const opts: MoniconOptions = {
       type: "esm",
       ...options,
     };
diff --git a/packages/svelte/vite.config.ts b/packages/svelte/vite.config.ts
index aadb572..2da7696 100644
--- a/packages/svelte/vite.config.ts
+++ b/packages/svelte/vite.config.ts
@@ -3,5 +3,19 @@ import { defineConfig } from "vite";
 import { monicon } from "@monicon/vite";
 
 export default defineConfig({
-  plugins: [sveltekit(), monicon({ outputFileName: "svelte-library" })],
+  plugins: [
+    sveltekit(),
+    monicon({
+      icons: [
+        "mdi:home",
+        "mdi:account",
+        "mdi:account-badge-outline",
+        "feather:activity",
+        "feather:alert-circle",
+        "logos:active-campaign",
+        "logos:apache-superset-icon",
+      ],
+      outputFileName: "svelte-library",
+    }),
+  ],
 });
diff --git a/packages/vite/src/index.ts b/packages/vite/src/index.ts
index 9f9ffd2..d7dbb2d 100644
--- a/packages/vite/src/index.ts
+++ b/packages/vite/src/index.ts
@@ -1,22 +1,22 @@
 import { PluginOption } from "vite";
 import {
+  loadIcons,
   getIconsFilePath,
+  MoniconOptions,
   getResolveAlias,
-  watchConfig,
-  MoniconBundlerOptions,
 } from "@monicon/core";
 
 const alias = getResolveAlias();
 
 const name = "vite-monicon";
 
-export const monicon = (options?: MoniconBundlerOptions): PluginOption[] => [
+export const monicon = (options: MoniconOptions): PluginOption[] => [
   {
     name,
     async buildStart() {
-      await watchConfig({ type: "esm", ...options });
+      await loadIcons({ type: "esm", ...options });
     },
-    async resolveId(source) {
+    resolveId(source) {
       if (source === alias)
         return getIconsFilePath({ type: "esm", ...options });
 
diff --git a/packages/webpack/src/index.ts b/packages/webpack/src/index.ts
index 4dfe549..76ba5fc 100644
--- a/packages/webpack/src/index.ts
+++ b/packages/webpack/src/index.ts
@@ -1,35 +1,38 @@
 import {
+  loadIcons,
   getIconsFilePath,
+  MoniconOptions,
   getResolveAlias,
-  watchConfig,
-  MoniconBundlerOptions,
 } from "@monicon/core";
 import { Compiler } from "webpack";
 
 const pluginName = "webpack-monicon";
 
-let watchStarted = false;
+let iconsLoaded = false;
 
 export class MoniconPlugin {
   name = pluginName;
 
-  options: MoniconBundlerOptions | undefined;
+  private options!: MoniconOptions;
 
-  constructor(options?: MoniconBundlerOptions) {
-    this.options = { type: "cjs", ...options };
+  constructor(options: MoniconOptions) {
+    this.options = options;
   }
 
   async apply(compiler: Compiler) {
     const alias = getResolveAlias();
 
-    compiler.hooks.beforeCompile.tapAsync(this.name, async (_, callback) => {
-      if (!watchStarted) {
-        await watchConfig(this.options);
-        watchStarted = true;
-      }
+    compiler.hooks.beforeCompile.tapAsync(
+      this.name,
+      async (params, callback) => {
+        if (!iconsLoaded) {
+          await loadIcons(this.options);
+          iconsLoaded = true;
+        }
 
-      callback();
-    });
+        callback();
+      }
+    );
 
     compiler.options.resolve = {
       ...compiler.options.resolve,
diff --git a/yarn.lock b/yarn.lock
index 722d2dd..c8151e3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3806,6 +3806,14 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/retry/-/retry-0.3.1.tgz#c72a5c76a9fbaf3488e231b13dc52c0da7bab42a"
   integrity sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA==
 
+"@iconify/json@^2.2.251":
+  version "2.2.251"
+  resolved "https://registry.npmjs.org/@iconify/json/-/json-2.2.251.tgz"
+  integrity sha512-QltbOmMpDbjHG7F7shvkmnLu7UTEmf96Vuz+Mt7iWnr8V6bUTv9KSv5fuaZaYWL7zUN5FM4AZlY68/8JgQlRWg==
+  dependencies:
+    "@iconify/types" "*"
+    pathe "^1.1.2"
+
 "@iconify/json@^2.2.256":
   version "2.2.256"
   resolved "https://registry.yarnpkg.com/@iconify/json/-/json-2.2.256.tgz#6f009b53cb7faba17fcfa4074b7507d36367dd87"
@@ -5714,9 +5722,9 @@
     "@rspack/binding-win32-x64-msvc" "1.0.8"
 
 "@rspack/cli@^1.0.8":
-  version "1.0.11"
-  resolved "https://registry.yarnpkg.com/@rspack/cli/-/cli-1.0.11.tgz#1c9304c442c57d2820d3dc855a8e2852b771add5"
-  integrity sha512-bED5kWJ7v0roTkOtfxfP01k9DgTAosmExAs7/zlX21ZApnIObabERd475g0kBDqEbyr/X+t5Plekhul1Nwei0A==
+  version "1.0.8"
+  resolved "https://registry.npmjs.org/@rspack/cli/-/cli-1.0.8.tgz"
+  integrity sha512-aDekCzwhn8OWFeibCZ62lXs7ocjIc1ebDD2eiufA3hDXa03Ewm4IRx5LAKAPoF077R7Hble1pjat6tu+SWXNfQ==
   dependencies:
     "@discoveryjs/json-ext" "^0.5.7"
     "@rspack/dev-server" "1.0.5"
@@ -8291,24 +8299,6 @@ c12@^1.11.1, c12@^1.11.2:
     pkg-types "^1.2.0"
     rc9 "^2.1.2"
 
-c12@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/c12/-/c12-2.0.1.tgz#5702d280b31a08abba39833494c9b1202f0f5aec"
-  integrity sha512-Z4JgsKXHG37C6PYUtIxCfLJZvo6FyhHJoClwwb9ftUkLpPSkuYqn6Tr+vnaN8hymm0kIbcg6Ey3kv/Q71k5w/A==
-  dependencies:
-    chokidar "^4.0.1"
-    confbox "^0.1.7"
-    defu "^6.1.4"
-    dotenv "^16.4.5"
-    giget "^1.2.3"
-    jiti "^2.3.0"
-    mlly "^1.7.1"
-    ohash "^1.1.4"
-    pathe "^1.1.2"
-    perfect-debounce "^1.0.0"
-    pkg-types "^1.2.0"
-    rc9 "^2.1.2"
-
 cac@^6.7.12, cac@^6.7.14:
   version "6.7.14"
   resolved "https://registry.npmjs.org/cac/-/cac-6.7.14.tgz"
@@ -14043,11 +14033,6 @@ jiti@^2.0.0, jiti@^2.1.2:
   resolved "https://registry.yarnpkg.com/jiti/-/jiti-2.2.1.tgz#0c968cd6c9b4baeb4074abd2f2f2dc42f6537a09"
   integrity sha512-weIl/Bv3G0J3UKamLxEA2G+FfQ33Z1ZkQJGPjKFV21zQdKWu2Pi6o4elpj2uEl5XdFJZ9xzn1fsanWTFSt45zw==
 
-jiti@^2.3.0:
-  version "2.3.3"
-  resolved "https://registry.yarnpkg.com/jiti/-/jiti-2.3.3.tgz#39c66fc77476b92a694e65dfe04b294070e2e096"
-  integrity sha512-EX4oNDwcXSivPrw2qKH2LB5PoFxEvgtv2JgwW0bU858HoLQ+kutSvjLMUqBd0PeJYEinLWhoI9Ol0eYMqj/wNQ==
-
 jju@~1.4.0:
   version "1.4.0"
   resolved "https://registry.npmjs.org/jju/-/jju-1.4.0.tgz"