图标

Iconifynuxt/icon
Nuxt UI 集成了 Nuxt Icon，可以访问 Iconify 的 200,000 多个图标。

用法

Nuxt UI 会自动注册@nuxt/icon模块，因此无需额外设置。

Icon 组件

你可以使用 Icon 组件，通过 name 属性来显示图标

<template>
  <UIcon name="i-lucide-lightbulb" class="size-5" />
</template>
你可以使用来自以下链接的任意名称：https://icones.js.org图标集。

组件属性

一些组件也具有 icon 属性来显示图标，例如 Button 组件

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

图标集

Iconify 数据集

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

pnpm i @iconify-json/{collection_name}

例如，要使用 i-uil-github 图标，请使用 @iconify-json/uil 安装其图标集。这样，图标可以在本地或从你的无服务器函数中提供，这在 SSR 和客户端都更快、更可靠。

在 @nuxt/icon 文档中阅读更多信息。

自定义本地图标集

你可以使用本地 SVG 文件创建自定义 Iconify 图标集。

例如，将你的图标 SVG 文件放在你选择的文件夹下，例如 ./assets/icons

assets/icons
├── add.svg
└── remove.svg

在你的 nuxt.config.ts 文件中，在 icon.customCollections 中添加一个项目

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  icon: {
    customCollections: [{
      prefix: 'custom',
      dir: './assets/icons'
    }]
  }
})

然后你可以像这样使用图标

<template>
  <UIcon name="i-custom-add" />
</template>
在 @nuxt/icon 文档中阅读更多信息。

主题

你可以在 app.config.ts 文件中更改组件使用的默认图标

app.config.ts
export default defineAppConfig({
  ui: {
    icons: {
      arrowLeft: 'i-lucide-arrow-left',
      arrowRight: 'i-lucide-arrow-right',
      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',
      ellipsis: 'i-lucide-ellipsis',
      external: 'i-lucide-arrow-up-right',
      folder: 'i-lucide-folder',
      folderOpen: 'i-lucide-folder-open',
      loading: 'i-lucide-refresh-cw',
      minus: 'i-lucide-minus',
      plus: 'i-lucide-plus',
      search: 'i-lucide-search'
    }
  }
})
app.config.ts
export default defineAppConfig({
  ui: {
    icons: {
      arrowUp: 'i-lucide-arrow-up',
      arrowDown: 'i-lucide-arrow-down',
      caution: 'i-lucide-circle-alert',
      copy: 'i-lucide-copy',
      copyCheck: 'i-lucide-copy-check',
      dark: 'i-lucide-moon',
      error: 'i-lucide-circle-x',
      eye: 'i-lucide-eye',
      eyeOff: 'i-lucide-eye-off',
      file: 'i-lucide-file-text',
      folder: 'i-lucide-folder',
      folderOpen: 'i-lucide-folder-open',
      hash: 'i-lucide-hash',
      info: 'i-lucide-info',
      light: 'i-lucide-sun',
      menu: 'i-lucide-menu',
      panelClose: 'i-lucide-panel-left-close',
      panelOpen: 'i-lucide-panel-left-open',
      reload: 'i-lucide-rotate-ccw',
      stop: 'i-lucide-square',
      success: 'i-lucide-circle-check',
      system: 'i-lucide-monitor',
      tip: 'i-lucide-lightbulb',
      warning: 'i-lucide-triangle-alert',
      arrowLeft: 'i-lucide-arrow-left',
      arrowRight: 'i-lucide-arrow-right',
      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',
      ellipsis: 'i-lucide-ellipsis',
      external: 'i-lucide-arrow-up-right',
      loading: 'i-lucide-refresh-cw',
      minus: 'i-lucide-minus',
      plus: 'i-lucide-plus',
      search: 'i-lucide-search'
    }
  }
})
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: {
          arrowLeft: 'i-lucide-arrow-left',
          arrowRight: 'i-lucide-arrow-right',
          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',
          ellipsis: 'i-lucide-ellipsis',
          external: 'i-lucide-arrow-up-right',
          folder: 'i-lucide-folder',
          folderOpen: 'i-lucide-folder-open',
          loading: 'i-lucide-refresh-cw',
          minus: 'i-lucide-minus',
          plus: 'i-lucide-plus',
          search: 'i-lucide-search'
        }
      }
    })
  ]
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'

export default defineConfig({
  plugins: [
    vue(),
    uiPro({
      ui: {
        icons: {
          arrowLeft: 'i-lucide-arrow-left',
          arrowRight: 'i-lucide-arrow-right',
          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',
          ellipsis: 'i-lucide-ellipsis',
          external: 'i-lucide-arrow-up-right',
          folder: 'i-lucide-folder',
          folderOpen: 'i-lucide-folder-open',
          loading: 'i-lucide-refresh-cw',
          minus: 'i-lucide-minus',
          plus: 'i-lucide-plus',
          search: 'i-lucide-search'
        }
      }
    })
  ]
})

主题

了解如何使用 Tailwind CSS v4、CSS 变量和 Tailwind Variants API 自定义 Nuxt UI 组件，以实现强大且灵活的主题设置。

字体

Nuxt UI 集成了 Nuxt Fonts，提供即插即用的字体优化。