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

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
     }
   }
 })