feat(Icon): switch to nuxt-icon with dynamic prop or app config (#862)

docs/content/2.elements/7.icon.md

@@ -1,5 +1,5 @@
 ---
-description: Display an icon from Iconify library.
+description: Display any icon (100,000+) from Iconify.
 links:
   - label: GitHub
     icon: i-simple-icons-github
@@ -8,6 +8,8 @@ links:
 
 ## Usage
 
+Use the `name` prop by following this pattern: `i-{collection_name}-{icon_name}`. You can search any icon from [Iconify](https://iconify.design/) using https://icones.js.org.
+
 ::component-card
 ---
 props:
@@ -16,9 +18,35 @@ props:
 ::
 
 ::callout{icon="i-heroicons-exclamation-triangle"}
-When playing with the `name` prop above, you won't be able to use any icon you want as icons are bundled on build as explained in the [theming section](/getting-started/theming#icons).
+You won't be able to use any icon in the `name` prop here as icons are bundled using [egoist/tailwindcss-icons](https://github.com/egoist/tailwindcss-icons), read more about this in [Theming](/getting-started/theming#icons).
 ::
 
+### Dynamic :u-badge{label="New" class="align-middle ml-2 !rounded-full" variant="subtle"}
+
+You can use the `dynamic` prop to enable dynamic icon loading. This will use [`nuxt-icon`](https://github.com/nuxt-modules/icon) instead and allow you to use any icon from [Iconify](https://iconify.design/) as well as the `{collection_name}:{icon_name}` pattern.
+
+This can be quite useful when using [dynamic class names](https://tailwindcss.com/docs/content-configuration#dynamic-class-names) or for icons that are not bundled by default (fetched from a database for example).
+
+::component-card
+---
+props:
+  name: 'i-ph-rocket-launch'
+  dynamic: true
+---
+::
+
+You can also change the default behavior of the `dynamic` prop by setting the `ui.icons.dynamic` option in your `app.config.ts`.
+
+```ts [app.config.ts]
+export default defineAppConfig({
+  ui: {
+    icons: {
+      dynamic: true
+    }
+  }
+})
+```
+
 ## Props
 
 :component-props

package.json

@@ -48,6 +48,7 @@
     "@vueuse/math": "^10.5.0",
     "defu": "^6.1.3",
     "fuse.js": "^6.6.2",
+    "nuxt-icon": "^0.6.3",
     "ohash": "^1.1.3",
     "pathe": "^1.1.1",
     "scule": "^1.0.0",

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 } from '@egoist/tailwindcss-icons'
+import { iconsPlugin, getIconCollections, type CollectionNames } 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: string[] | string
+  icons: CollectionNames[] | 'all'
 
   safelistColors?: string[]
 }
@@ -142,6 +142,7 @@ export default defineNuxtModule<ModuleOptions>({
 
     // Modules
 
+    await installModule('nuxt-icon')
     await installModule('@nuxtjs/color-mode', { classSuffix: '' })
     await installModule('@nuxtjs/tailwindcss', {
       exposeConfig: true,

src/runtime/components/elements/Icon.vue

@@ -1,15 +1,22 @@
 <template>
-  <span :class="name" />
+  <Icon v-if="dynamic" :name="name" />
+  <span v-else :class="name" />
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue'
+// @ts-expect-error
+import appConfig from '#build/app.config'
 
 export default defineComponent({
   props: {
     name: {
       type: String,
       required: true
+    },
+    dynamic: {
+      type: Boolean,
+      default: () => !!appConfig.ui?.icons?.dynamic
     }
   }
 })