图标

图标化nuxt/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://iconify.design集合中的任何名称。在https://icones.js.org上轻松浏览它们，或使用search-icons MCP工具直接从AI助手进行搜索。

组件道具

一些组件也有一个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 UI在构建时将其使用的图标嵌入到客户端包中，因此它们在第一次渲染时可用，而不是在运行时按需加载。默认情况下，Nuxt UI自己的图标来自lucide集合，会自动执行此操作。要捆绑其他图标，例如您在应用中覆盖或使用的图标，请执行以下操作：将它们添加到nuxt.config.ts中的@nuxt/icon的clientBundle.icons选项：

nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  icon: {
    clientBundle: {
      icons: ['lucide:heart', 'simple-icons:github']
    }
  }
})

或者启用clientBundle.scan，通过扫描您的源代码来捆绑应用中使用的每个图标，这样您就不必逐个列出它们：

nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  icon: {
    clientBundle: {
      scan: true
    }
  }
})

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

nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  icon: {
    clientBundle: {
      scan: {
        globInclude: ['**/*.{vue,jsx,tsx,md,mdc,mdx,yml,yaml,ts,js}']
      }
    }
  }
})

如果您在构建时就知道了整个动态名称集，则仍然可以通过在clientBundle.icons中列出动态名称来进行绑定。仅在运行时存在的名称（例如来自API的图标）根本无法进行绑定。当您的应用是服务器渲染时，它们会根据需要从/api/_nuxt_icon路由加载，并使用Iconify API作为后备，而当您使用nuxt generate或ssr: false时，则直接从Iconify API加载。

在@nuxt/icon文档中阅读更多关于此的信息。

自定义本地集合

您可以使用本地SVG文件创建自定义Iconify集合。

例如，将图标的SVG文件放置在您选择的文件夹下，例如./app/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: './app/assets/icons'
    }]
  }
})

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

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

Theme

您可以更改app.config.ts中组件使用的默认图标：

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'
        }
      }
    })
  ]
})
在app.config.ts中覆盖的图标在运行时按需加载，而不是嵌入到客户端包中。要将它们捆绑在一起，请将它们以{collection}:{name}形式（例如lucide:rocket）添加到nuxt.config.ts中的@nuxt/icon的clientBundle.icons中。

Components

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

Fonts

Nuxt UI integrates with Nuxt Fonts to provide plug-and-play font optimization.