图标 Icon

Nuxt UI 的图标走的是「图标名字符串」方案，不需要单独引入图标文件。组件里用 icon="i-集合-名字" 就能显示，本篇讲清楚怎么用、有哪些图标可挑。

本篇基于 /453.html 接好的环境。

图标名规则

Nuxt UI v4 默认接入 Lucide 图标集，图标名格式是 i-lucide-<图标英文>。

<template>
  <UIcon name="i-lucide-house" />
  <UButton icon="i-lucide-plus">新建</UButton>
</template>

UIcon 是纯图标组件，name 传图标名；大多数组件（如 UButton、UDropdownMenu）也都有 icon 属性直接接收图标名，不用单独写 UIcon。

去哪查图标名

最直接的办法是打开 Lucide 图标库，搜索中文或英文，点开某个图标后，名字就是页面上的标识（去掉空格、转小写、用连字符连接）。例如「Settings」对应 i-lucide-settings，「Trash」对应 i-lucide-trash。

本系列前面用到的几个。

在组件里组合使用

图标常和文字、菜单一起出现，前面几篇已经大量用到，这里汇总一个完整例子。

<template>
  <div class="flex gap-4 items-center">
    <UButton icon="i-lucide-download" variant="soft">下载</UButton>

    <UDropdownMenu :items="items">
      <UButton icon="i-lucide-ellipsis-vertical" color="neutral" variant="ghost" square />
    </UDropdownMenu>

    <UIcon name="i-lucide-star" class="text-amber-400 size-5" />
  </div>
</template>

<script setup>
const items = [
  { label: '编辑', icon: 'i-lucide-pencil' },
  { label: '删除', icon: 'i-lucide-trash', color: 'error' }
]
</script>

UIcon 也支持 Tailwind 尺寸/颜色类（如 size-5、text-amber-400），因为它本质是渲染成 SVG。

常见问题

参考资料

• Nuxt UI 图标文档
• Lucide 图标库