1.2.0-beta

Icon 图标 1.2.2 ​

查看 1.0.0 变更与迁移说明

DHdesign 图标由 @szhn/dh-design-icons 统一提供，PC 和移动端使用同一套名称、同一套 SVG。

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

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

const app = createApp()
app.use(DhIcon)

基础用法 ​

使用 DhIcon 通过 name 加载共享 SVG 图标。

图标集合 ​

点击某个图标后，会显示引入方式和可直接复制的使用代码，并弹出复制提示。

AI 使用说明 ​

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

尺寸 ​

通过 size 属性快速控制图标大小，单位为像素。

颜色 ​

color 属性可以接收 CSS 变量或具体色值，覆盖继承颜色。

加载动画 ​

为图标添加 is-loading 类即可获得旋转动画，常用于加载状态。

直接使用 ​

DhIcon 本身渲染为 SVG，可通过样式或属性控制大小与颜色。

命名规则 ​

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

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

API ​

Attributes ​

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