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]

src/module.ts

@@ -1,7 +1,7 @@
 import { defineNuxtModule, installModule, addComponentsDir, addImportsDir, createResolver, addPlugin } from '@nuxt/kit'
 import defaultColors from 'tailwindcss/colors.js'
 import { defaultExtractor as createDefaultExtractor } from 'tailwindcss/lib/lib/defaultExtractor.js'
-import { iconsPlugin, getIconCollections, type CollectionNames } from '@egoist/tailwindcss-icons'
+import { iconsPlugin, getIconCollections, type CollectionNames, type IconsPluginOptions } from '@egoist/tailwindcss-icons'
 import { name, version } from '../package.json'
 import { generateSafelist, excludeColors, customSafelistExtractor } from './colors'
 import createTemplates from './templates'
@@ -46,7 +46,7 @@ export interface ModuleOptions {
    */
   global?: boolean
 
-  icons: CollectionNames[] | 'all'
+  icons: CollectionNames[] | 'all' | IconsPluginOptions
 
   safelistColors?: string[]
 }
@@ -135,7 +135,7 @@ export default defineNuxtModule<ModuleOptions>({
       tailwindConfig.safelist.push(...generateSafelist(options.safelistColors, colors))
 
       tailwindConfig.plugins = tailwindConfig.plugins || []
-      tailwindConfig.plugins.push(iconsPlugin({ collections: getIconCollections(options.icons as any[]) }))
+      tailwindConfig.plugins.push(iconsPlugin(Array.isArray(options.icons) || options.icons === 'all' ? { collections: getIconCollections(options.icons) } : typeof options.icons === 'object' ? options.icons as IconsPluginOptions : {}))
     })
 
     createTemplates(nuxt)