zzzUI
English

图标

专为 zzzUI 绘制的 30 个实心图标，基于 24 单位网格，包括界面符号和几件道具。笔画末端的斜角与斜切块相同，转角一律斜切，仅本身为圆形的物体使用曲线。

安装

一次安装全部图标，附带一个统一导出的 index 文件；也可以逐个安装，如 @zzzui/icon-search、@zzzui/icon-check……

terminal
# once per project: where @zzzui items come frompnpm dlx shadcn@latest registry add @zzzui=https://zzzui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zzzui/icons

全部图标

  • AlertIconicon-alert
  • ArrowDownIconicon-arrow-down
  • ArrowLeftIconicon-arrow-left
  • ArrowRightIconicon-arrow-right
  • CellIconicon-cell
  • CheckIconicon-check
  • ChevronDownIconicon-chevron-down
  • ChevronLeftIconicon-chevron-left
  • ChevronRightIconicon-chevron-right
  • ChevronUpIconicon-chevron-up
  • ChipIconicon-chip
  • ClearIconicon-clear
  • CloseIconicon-close
  • CopyIconicon-copy
  • CrateIconicon-crate
  • DoneIconicon-done
  • ExternalIconicon-external
  • EyeIconicon-eye
  • EyeOffIconicon-eye-off
  • FlareIconicon-flare
  • InfoIconicon-info
  • KeyIconicon-key
  • KitIconicon-kit
  • LockIconicon-lock
  • MinusIconicon-minus
  • MoreIconicon-more
  • PlusIconicon-plus
  • SearchIconicon-search
  • SidebarIconicon-sidebar
  • SpinnerIconicon-spinner

用法

图标为 1.25em 见方，颜色取自当前文字颜色，因此用在按钮、标签页或输入框中时，尺寸和颜色会自动适配。图标默认视为装饰；单独出现且承载含义时，应为其设置 title。

tsx
import { Button } from "@/components/zero/button";import { ArrowRightIcon, AlertIcon } from "@/components/zero/icons";<Button variant="secondary">  Next job  <ArrowRightIcon /></Button><AlertIcon title="Overdue" className="text-zero-danger" />

属性

所有图标

属性类型默认值说明
titlestring—让图标独立表意：图标获得 role="img"，并以 title 作为可访问名称。
outlinebooleanfalse沿整个形状添加墨黑描边，适用于置于强调色或图片之上的图标。
classNamestring—size-* 类覆盖默认的 1.25em；text-* 类设置颜色。

createIcon(name, shape)

属性类型默认值说明
shape.dstring—路径数据，基于 24 单位网格。
shape.fillRule"nonzero" | "evenodd""nonzero"设为 evenodd 时，路径重叠处镂空。
shape.cutstring—从 d 中挖去的区域，用于填充规则无法实现的开口。
shape.overstring—在挖去 cut 之后绘制，叠在最上层。