docs(docs): add tutorial for loading collections

apps/docs/pages/installation/nextjs.mdx

@@ -40,6 +40,8 @@ const nextConfig = {
           "logos:active-campaign",
           "lucide:badge-check",
         ],
+        // Load all icons from the listed collections
+        collections: ["radix-icons"],
       })
     );
 
@@ -54,6 +56,7 @@ module.exports = nextConfig;
 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
@@ -80,4 +83,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>
+
+</Steps>

apps/docs/pages/installation/nuxt.mdx

@@ -35,15 +35,19 @@ export default defineNuxtConfig({
       "mdi:home",
       "feather:activity",
       "logos:active-campaign",
-      "lucide:badge-check"
+      "lucide:badge-check",
     ],
+    // Load all icons from the listed collections
+    collections: ["radix-icons"],
   },
 });
-
 ```
 
 <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 `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
@@ -52,15 +56,16 @@ You can now use Monicon in your Vue components. Here’s an example of how to us
 
 ```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

@@ -41,7 +41,10 @@ const configWithMonicon = withMonicon(config, {
     "mdi:home",
     "feather:activity",
     "logos:active-campaign",
+    "lucide:badge-check",
   ],
+  // Load all icons from the listed collections
+  collections: ["radix-icons"],
 });
 
 module.exports = configWithMonicon;
@@ -51,6 +54,7 @@ module.exports = configWithMonicon;
 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
@@ -84,7 +88,7 @@ module.exports = async function (env, argv) {
         "mdi:home",
         "feather:activity",
         "logos:active-campaign",
-        "lucide:badge-check"
+        "lucide:badge-check",
       ],
     })
   );
@@ -118,4 +122,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>
+
+</Steps>

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

@@ -37,8 +37,10 @@ export default {
         "mdi:home",
         "feather:activity",
         "logos:active-campaign",
-        "lucide:badge-check"
+        "lucide:badge-check",
       ],
+      // Load all icons from the listed collections
+      collections: ["radix-icons"],
     }),
   ],
 };
@@ -48,6 +50,7 @@ export default {
 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
@@ -74,4 +77,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>
+
+</Steps>

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

@@ -38,17 +38,20 @@ export default defineConfig({
         "mdi:home",
         "feather:activity",
         "logos:active-campaign",
-        "lucide:badge-check"
+        "lucide:badge-check",
       ],
+      // Load all icons from the listed collections
+      collections: ["radix-icons"],
     }),
-  ]
+  ],
 });
 ```
 
 <Callout>
 The `icons` array in the `monicon` plugin configuration specifies the icon sets you want to use in your project. You can add more icon sets as needed.
 
 For a complete list of available icon sets, refer to the [Icones](https://icones.js.org/) website.
+
 </Callout>
 
 ## Usage
@@ -75,4 +78,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>
+
+</Steps>

apps/docs/pages/installation/react.mdx

@@ -40,8 +40,10 @@ export default defineConfig({
         "mdi:home",
         "feather:activity",
         "logos:active-campaign",
-        "lucide:badge-check"
+        "lucide:badge-check",
       ],
+      // Load all icons from the listed collections
+      collections: ["radix-icons"],
     }),
   ],
 });
@@ -51,6 +53,7 @@ export default defineConfig({
 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
@@ -77,4 +80,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>
+
+</Steps>

apps/docs/pages/installation/remix.mdx

@@ -40,8 +40,10 @@ export default defineConfig({
         "mdi:home",
         "feather:activity",
         "logos:active-campaign",
-        "lucide:badge-check"
+        "lucide:badge-check",
       ],
+      // Load all icons from the listed collections
+      collections: ["radix-icons"],
     }),
   ],
 });
@@ -51,6 +53,7 @@ export default defineConfig({
 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
@@ -77,4 +80,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>
+
+</Steps>

apps/docs/pages/installation/svelte.mdx

@@ -40,8 +40,10 @@ export default defineConfig({
         "mdi:home",
         "feather:activity",
         "logos:active-campaign",
-        "lucide:badge-check"
+        "lucide:badge-check",
       ],
+      // Load all icons from the listed collections
+      collections: ["radix-icons"],
     }),
   ],
 });
@@ -51,6 +53,7 @@ export default defineConfig({
 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
@@ -73,4 +76,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>
+
+</Steps>

apps/docs/pages/installation/vue.mdx

@@ -39,18 +39,22 @@ export default defineConfig({
         "mdi:home",
         "feather:activity",
         "logos:active-campaign",
-        "lucide:badge-check"
+        "lucide:badge-check",
       ],
+      // Load all icons from the listed collections
+      collections: ["radix-icons"],
     }),
   ],
 });
 ```
 
 <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 `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.
@@ -74,14 +78,15 @@ 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>

packages/core/src/index.ts

@@ -9,9 +9,37 @@ import { fileURLToPath } from "url";
 import { toPx } from "./utils";
 
 export type MoniconOptions = {
+  /**
+   * The names of the icons to load.
+   *
+   * The icon names should be in the format `collection:icon-name`.
+   *
+   * For example, `mdi:home`.
+   *
+   * You can explore available icons at https://icones.js.org
+   */
   icons: string[];
+  /**
+   * The names of the collections to load. All icons from the collections will be loaded.
+   *
+   * For example, `mdi`.
+   *
+   * You can explore available collections at https://icones.js.org
+   */
   collections?: string[];
+  /**
+   * The name of the file to output the icons to. The file extension will be added automatically based on the type.
+   */
   outputFileName?: string;
+  /**
+   * The type of output file to generate.
+   *
+   * - `cjs` - CommonJS module
+   *
+   * - `esm` - ECMAScript module
+   *
+   * Details: https://monicon-docs.vercel.app/troubleshooting/module-resolution
+   */
   type?: "cjs" | "esm";
 };