图标 Icon

基础示例

Loading…

安装组件：

pnpm dlx wui@latest add @wui/icon

安装图标依赖

pnpm add lucide-react

将组件源码复制到 components/ui/icon.tsx

components/ui/icon.tsx

import * as React from "react"
import type { LucideIcon, LucideProps } from "lucide-react"

const iconSizes = {
  xs: 12,
  sm: 16,
  md: 20,
  lg: 24,
  xl: 32,
} as const

export type IconSize = keyof typeof iconSizes

export interface IconProps extends Omit<
  LucideProps,
  "aria-hidden" | "aria-label" | "role" | "size"
> {
  /** Lucide icon component to render. */
  icon: LucideIcon
  /** Named size token or an exact pixel size. @default "md" */
  size?: IconSize | number
  /** Accessible name. Omit it when the icon is purely decorative. */
  label?: string
}

/** A small, accessible adapter for the Lucide icons used throughout wui. */
function Icon({ icon: Glyph, size = "md", label, ...props }: IconProps) {
  const resolvedSize = typeof size === "number" ? size : iconSizes[size]

  return (
    <Glyph
      data-slot="icon"
      size={resolvedSize}
      aria-hidden={label ? undefined : true}
      aria-label={label}
      role={label ? "img" : undefined}
      focusable="false"
      {...props}
    />
  )
}

export { Icon, iconSizes }

图标库

这里收录当前 lucide-react 版本提供的全部图标。输入英文名称筛选，点击任意图标即可复制按需导入语句。图标按页加载，避免一次渲染整个集合。

1544 / 1544 个图标

Lucide 采用 ISC 许可，可用于个人和商业项目。它不收录品牌标志；品牌图标建议单独选择并逐项核对商标与许可，不要混入基础产品图标集合。

收集来源

Lucide：当前主库，线性风格统一，React 支持和按需导入完善。
Simple Icons：只在需要品牌标志时参考；图形许可不等于获得品牌商标授权。
Iconify：适合跨图标集检索和发现候选，但每个集合的许可不同，收录前需要单独核对。
AnimateIcons：动态主库，收录 248 个独立编排的逐路径动画。
ItsHover：去重后本地化 207 个补充图标，与主库合计 455 个。

使用方式

import { SearchIcon } from "lucide-react"

import { Icon } from "@/components/ui/icon"

<Icon icon={SearchIcon} />
<Icon icon={SearchIcon} size="lg" strokeWidth={1.75} />
<Icon icon={SearchIcon} label="搜索" />

label 为空时，图标会被视为装饰并对辅助技术隐藏。如果图标单独传达含义，请提供 label；如果图标位于已有文字或 aria-label 的按钮内，保持装饰状态即可。

尺寸

xs、sm、md、lg、xl 分别对应 12、16、20、24、32px，也可以直接传入像素数值。统一尺寸令图标在按钮、输入框和菜单中的密度保持一致。

动态图标

需要图标内部路径随交互运动时，使用 AnimatedIcon。动态图标采用独立组件，因为铃铛、复制、菜单等图形需要不同的路径编排，无法由一个通用 SVG 包装器生成。

组件属性

Prop	Type	Default	Description
icon *	LucideIcon	—	Lucide icon component to render.
size	number \| "xs" \| "sm" \| "md" \| "lg" \| "xl"	md	Named size token or an exact pixel size.
label	string	—	Accessible name. Omit it when the icon is purely decorative.