Nuxt v-bind 不适用于 NuxtUI 图标和 util 文件

Question

我有一个 Nuxt 3 应用程序，使用 NuxtUI 作为 UI 框架。 为了重用图标并避免拼写错误，我创建了一个文件

/utils/Icon.ts

，如下所示：

export enum IconSet {
  HeroIcons = 'heroicons'
}

export class Icon {
   readonly set: IconSet
   readonly name: string

   constructor(set: IconSet, name: string) {
     this.set = set
     this.name = name
   }

   toString(): string {
     return `i-${this.set}-${this.name}`
   }

   static preConfigured = {
     home: new Icon(IconSet.HeroIcons, 'home').toString(),
     user: new Icon(IconSet.HeroIcons, 'user').toString(),
     lock_open: new Icon(IconSet.HeroIcons, 'lock-open').toString(),
     lock_closed: new Icon(IconSet.HeroIcons, 'lock-closed').toString(),
     gear: new Icon(IconSet.HeroIcons, 'cog-6-tooth').toString(),
   }
}

预配置的图标是我尝试使用的图标，如下所示：

<template>
  <UButton :ui="ui" :icon="Icon.preConfigured.user" />
</template>

<script setup lang="ts">
import { Icon } from '#imports';

defineProps({
  ui: Object
})
console.log(Icon.preConfigured)
</script>

但由于某种原因这不起作用。 记录的输出符合预期：

{
  home: 'i-heroicons-home',
  user: 'i-heroicons-user',
  lock_open: 'i-heroicons-lock-open',
  lock_closed: 'i-heroicons-lock-closed',
  gear: 'i-heroicons-cog-6-tooth'
}

我还测试了每个图标名称，如果我像这样使用它们，它就可以工作：

<template>
  <UButton :ui="ui" :icon="icon" />
  <UButton :ui="ui" icon="i-heroicons-user" />
</template>

<script setup lang="ts">
defineProps({
  ui: Object
})
const icon = 'i-heroicons-user'
</script>

当浏览器中期待图标元素时，无论图标是否存在，它总是看起来像这样：

<span class="i-heroicons-user flex-shrink-0 h-5 w-5" aria-hidden="true"></span>

它变得更奇怪，因为当我测试并从工作示例切换回我的

Icon

类时，图标仍然存在，但直到我重新启动开发服务器。 有谁知道，这可能是什么原因造成的？

Answer 1

它使用基于 Tailwind 引擎的 egoist/tailwindcss-icons，该引擎仅捆绑代码中声明的静态图标，如此处所述。因此，您需要对它们进行静态硬编码，然后使用文字对象或数组来访问它们。您可以使用 vscode-iconify 扩展直接在编辑器中显示有效图标。