图标

图标化
Nuxt UI与Iconify集成，可访问超过200，000个图标。

用法

Nuxt UI提供了一个由@iconify/vue支持的Icon组件，因此无需额外的设置。

Icon组件

您可以使用Icon组件和name道具来显示图标：

<template>
  <UIcon name="i-lucide-lightbulb" class="size-5" />
</template>
您可以使用https://iconify.design集合中的任何名称。在https://icones.js.org上轻松浏览它们，或使用search-icons MCP工具直接从AI助手进行搜索。
当使用带破折号的集合（-）时，您需要用冒号（:）将图标名称与集合名称分开，因为@iconify/vue不像@nuxt/icon那样处理这种情况。例如，您需要编写i-simple-icons:github或simple-icons:github。了解有关Iconify命名约定的更多信息。

组件道具

一些组件也有一个icon道具来显示图标，例如Button：

<template>
  <UButton icon="i-lucide-sun" variant="subtle">Button</UButton>
</template>

系列

Iconify数据集

强烈建议使用以下命令在本地安装图标数据：

pnpm i @iconify-json/{collection_name}

例如，要使用i-lucide-lightbulb图标，请使用@iconify-json/lucide安装其集合。

安装该集合可以让Nuxt UI将其使用的图标嵌入到您的构建中，因此它们在SSR期间直接呈现并完全离线工作，而不是在运行时从Iconify API获取。这会自动为Nuxt UI自己的图标进行，默认情况下来自lucide集合。

要捆绑其他图标，例如您在应用中覆盖或在其他地方使用的图标，请将它们添加到vite.config.ts中的icon.clientBundle.icons选项：

vite.config.ts
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    ui({
      icon: {
        clientBundle: {
          icons: ['lucide:heart', 'simple-icons:github']
        }
      }
    })
  ]
})
您可以使用i-{collection}-{name}或{collection}:{name}表单，例如i-lucide-heart或lucide:heart，以及i-material-symbols-menu或material-symbols:menu。使用@iconify-json/{collection_name}安装您引用的每个集合。

要捆绑你使用的图标而不逐个列出它们，请启用scan。它会扫描你的源代码，从你安装的集合中查找图标使用情况并捆绑它们，与@nuxt/icon的clientBundle.scan的工作方式相同：

vite.config.ts
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    ui({
      icon: {
        clientBundle: {
          scan: true
        }
      }
    })
  ]
})

扫描只能读取.vue、.jsx、.tsx、.md、.mdc、.mdx、.yml和.yaml文件，并且它只匹配以文字字符串形式写入的图标名称。在.ts或.js文件中定义的图标，如导航链接列表，将丢失，像i-lucide-${name}这样的动态生成的名称。设置globInclude也扫描这些文件。它取代了默认列表，所以保留你仍然需要的扩展名：

vite.config.ts
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    ui({
      icon: {
        clientBundle: {
          scan: {
            globInclude: ['**/*.{vue,jsx,tsx,md,mdc,mdx,yml,yaml,ts,js}']
          }
        }
      }
    })
  ]
})

当您在构建时知道整个集合时，仍然可以通过在clientBundle.icons中列出动态名称来绑定它们。仅在运行时存在的名称（例如来自API的图标）根本不能绑定，而是根据需要从Iconify API加载。

未安装集合的图标在运行时仍从Iconify API加载，因此请安装与@iconify-json/{collection_name}一起使用的每个集合。要选择完全退出捆绑，请将icon.clientBundle设置为false。

Theme

您可以在vite.config.ts中更改Nuxt UI组件使用的默认图标：

app.config.ts
export default defineAppConfig({
  ui: {
    icons: {
      arrowDown: 'i-lucide-arrow-down',
      arrowLeft: 'i-lucide-arrow-left',
      arrowRight: 'i-lucide-arrow-right',
      arrowUp: 'i-lucide-arrow-up',
      caution: 'i-lucide-circle-alert',
      check: 'i-lucide-check',
      chevronDoubleLeft: 'i-lucide-chevrons-left',
      chevronDoubleRight: 'i-lucide-chevrons-right',
      chevronDown: 'i-lucide-chevron-down',
      chevronLeft: 'i-lucide-chevron-left',
      chevronRight: 'i-lucide-chevron-right',
      chevronUp: 'i-lucide-chevron-up',
      close: 'i-lucide-x',
      copy: 'i-lucide-copy',
      copyCheck: 'i-lucide-copy-check',
      dark: 'i-lucide-moon',
      drag: 'i-lucide-grip-vertical',
      ellipsis: 'i-lucide-ellipsis',
      error: 'i-lucide-circle-x',
      external: 'i-lucide-arrow-up-right',
      eye: 'i-lucide-eye',
      eyeOff: 'i-lucide-eye-off',
      file: 'i-lucide-file',
      folder: 'i-lucide-folder',
      folderOpen: 'i-lucide-folder-open',
      hash: 'i-lucide-hash',
      info: 'i-lucide-info',
      light: 'i-lucide-sun',
      loading: 'i-lucide-loader-circle',
      menu: 'i-lucide-menu',
      minus: 'i-lucide-minus',
      panelClose: 'i-lucide-panel-left-close',
      panelOpen: 'i-lucide-panel-left-open',
      plus: 'i-lucide-plus',
      reload: 'i-lucide-rotate-ccw',
      search: 'i-lucide-search',
      stop: 'i-lucide-square',
      star: 'i-lucide-star',
      success: 'i-lucide-circle-check',
      system: 'i-lucide-monitor',
      tip: 'i-lucide-lightbulb',
      upload: 'i-lucide-upload',
      warning: 'i-lucide-triangle-alert'
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        icons: {
          arrowDown: 'i-lucide-arrow-down',
          arrowLeft: 'i-lucide-arrow-left',
          arrowRight: 'i-lucide-arrow-right',
          arrowUp: 'i-lucide-arrow-up',
          caution: 'i-lucide-circle-alert',
          check: 'i-lucide-check',
          chevronDoubleLeft: 'i-lucide-chevrons-left',
          chevronDoubleRight: 'i-lucide-chevrons-right',
          chevronDown: 'i-lucide-chevron-down',
          chevronLeft: 'i-lucide-chevron-left',
          chevronRight: 'i-lucide-chevron-right',
          chevronUp: 'i-lucide-chevron-up',
          close: 'i-lucide-x',
          copy: 'i-lucide-copy',
          copyCheck: 'i-lucide-copy-check',
          dark: 'i-lucide-moon',
          drag: 'i-lucide-grip-vertical',
          ellipsis: 'i-lucide-ellipsis',
          error: 'i-lucide-circle-x',
          external: 'i-lucide-arrow-up-right',
          eye: 'i-lucide-eye',
          eyeOff: 'i-lucide-eye-off',
          file: 'i-lucide-file',
          folder: 'i-lucide-folder',
          folderOpen: 'i-lucide-folder-open',
          hash: 'i-lucide-hash',
          info: 'i-lucide-info',
          light: 'i-lucide-sun',
          loading: 'i-lucide-loader-circle',
          menu: 'i-lucide-menu',
          minus: 'i-lucide-minus',
          panelClose: 'i-lucide-panel-left-close',
          panelOpen: 'i-lucide-panel-left-open',
          plus: 'i-lucide-plus',
          reload: 'i-lucide-rotate-ccw',
          search: 'i-lucide-search',
          stop: 'i-lucide-square',
          star: 'i-lucide-star',
          success: 'i-lucide-circle-check',
          system: 'i-lucide-monitor',
          tip: 'i-lucide-lightbulb',
          upload: 'i-lucide-upload',
          warning: 'i-lucide-triangle-alert'
        }
      }
    })
  ]
})

Components

Learn how to customize Nuxt UI components with the Tailwind Variants API for advanced, flexible, and maintainable styling.

Color Mode

Nuxt UI integrates with VueUse to allow for easy switching between light and dark themes.