feat(module): allow options override of @egoist/tailwindcss-icons plugin (#1013)

docs/content/1.getting-started/3.theming.md

@@ -265,6 +265,8 @@ You can also use the [Icon](/elements/icon) component to add an icon anywhere in
 </template>
 ```
 
+### Collections
+
 By default, the module uses [Heroicons](https://heroicons.com/) but you can change it from the module options in your `nuxt.config.ts`.
 
 ```ts [nuxt.config.ts]
@@ -309,6 +311,42 @@ export default defineNuxtConfig({
 })
 ```
 
+### Custom config
+
+If you have specific needs, like using a custom icon collection, you can use the `icons` option in your `nuxt.config.ts` as an object to override the config of the [egoist/tailwindcss-icons](https://github.com/egoist/tailwindcss-icons#plugin-options) plugin.
+
+```ts [nuxt.config.ts]
+import { getIconCollections } from '@egoist/tailwindcss-icons'
+
+export default defineNuxtConfig({
+  ui: {
+    icons: {
+      // might solve stretch bug on generate, see https://github.com/egoist/tailwindcss-icons/issues/23
+      extraProperties: {
+        '-webkit-mask-size': 'contain',
+        '-webkit-mask-position': 'center'
+      },
+      collections: {
+        foo: {
+          icons: {
+            'arrow-left': {
+              // svg body
+              body: '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />',
+              // svg width and height, optional
+              width: 24,
+              height: 24
+            }
+          }
+        },
+        ...getIconCollections(['heroicons', 'simple-icons'])
+      }
+    }
+  }
+})
+```
+
+---
+
 You can easily replace all the default icons of the components in your `app.config.ts`.
 
 ```ts [app.config.ts]