0.5.1

Icon 图标 1.2.2 ​

查看 1.0.0 变更与迁移说明

介绍 ​

DHdesign 图标由 @szhn/dh-design-icons 统一提供，PC 和移动端使用同一套名称、同一套图标结果。业务侧统一使用 DhIcon，不再依赖 Vant 内置图标。

引入 ​

使用 DHdesign 图标时，需要单独安装图标库，并从 @szhn/dh-design-icons 引入：

bash
pnpm add @szhn/dh-design-icons
ts
import { DhIcon, dhIconNames } from '@szhn/dh-design-icons'
import { dhIconDefinitions } from '@szhn/dh-design-icons/catalog'

代码演示 ​

基础用法 ​

批量制作图标 ​

  1. 将 MasterGo 导出的 SVG 放在主仓库外部的图标源目录，可以按分类建立子目录。临时处理时，也可以放到本地忽略目录 packages/dh-design-icons/.icon-source。
  2. 在项目根目录运行 pnpm sync:icons -- --src /path/to/icon-source，生成共享图标包。
  3. 打开本页确认图标名称和显示效果。

也可以通过环境变量指定源目录：

bash
DH_ICON_SOURCE_DIR=/path/to/icon-source pnpm sync:icons

主仓库不长期维护全量 SVG 源文件，只提交生成后的图标结果。已有图标只改图形时，保持图标名称不变，使用新的 SVG 重新生成即可。

图标按动作或对象命名，例如 left、move-left、file-search。名称不带尺寸，使用 size 调整大小；圆框、方框和实心等必要区别分别用 circle、square、filled 表示。

1.0.0 统一了图标名称并合并尺寸版本。旧名与新名含义冲突时必须替换，其余旧名仍可使用，详见改名对照与升级说明。

AI 使用说明 ​

AI 或编辑器可以通过 dhIconDefinitions、dhIconNames 和 DhIconName 类型知道当前有哪些图标。本页的图标集合也直接展示了每个图标名称，复制后即可用于 <dh-icon name="..." />。

API ​

Props ​

参数说明类型默认值
name图标名称string-
size图标大小，不带单位时默认使用 pxnumber | string1em
color图标颜色stringcurrentColor
title图标标题string-
aria-label无障碍名称string-
decorative是否作为装饰图标booleantrue

类型定义 ​

ts
import type { DhIconName, DhIconDefinition } from '@szhn/dh-design-icons'
Icon