图标 1.0 改名对照与升级说明
本文适用于 @szhn/dh-design-icons@1.0.0,包含从 0.5.0 升级的步骤和改名对照。
本轮从 1752 个展示项整理为 1689 个,合并 63 个尺寸或重复版本。共有 225 个旧名称发生调整;未列入清单的名称保留。
225 按改前、改后名称不同统计。其余 11 条记录用于确定合并时保留的标准图形,名称本身没有改变。兼容名称还包含此前版本的历史名称,因此共有 251 个。
升级步骤
安装图标库 1.0.0,无须同时升级电脑端或移动端组件库。
bashpnpm add @szhn/dh-design-icons@1.0.0 --registry=https://npmmirror.digitalhainan.com.cn先处理下方 9 个“必须替换”的旧名称,再按需把其他旧名改成新名。
检查三种使用位置:
name属性、具名组件引入、/icons/图标子路径。菜单配置和接口下发的名称也要一起检查。同款大小版本改用一个名称,通过
size设置大小。运行项目检查和构建,打开涉及的页面确认上传、下载、搜索、关闭、充电等图标与用途一致。
只修改 DH 图标库的引用,不替换其他图标库或组件中的同名内容。按原名称一次完成映射,不要连续全局替换:例如旧 image-download 应变为 image-upload,不能又被下一轮替换成 image-help。
三种写法的迁移示例
以下示例都表示保留旧版 image-download 实际表达的“上传图片”用途:
<!-- 修改前 -->
<DhIcon name="image-download" :size="24" />
<!-- 修改后 -->
<DhIcon name="image-upload" :size="24" />// 修改前
import { ImageDownload } from '@szhn/dh-design-icons'
import imageDownload from '@szhn/dh-design-icons/icons/image-download'
// 修改后;页面中使用 ImageDownload 的位置也一起改为 ImageUpload
import { ImageUpload } from '@szhn/dh-design-icons'
import imageUpload from '@szhn/dh-design-icons/icons/image-upload'如果业务真正需要“下载图片”,1.0 中应使用 image-download,以实际业务用途为准。
使用规则
- 名称表达动作、对象或状态,不带图标尺寸。用
size调整大小。 - 圆框、方框、实心等确实不同的图形继续保留。Medium 是品牌,不是尺寸。
- 首排方向图标统一为
left、right、up、down,带杆方向使用move-left等。原先撤下的四个小号方向不再单独展示。 - 无冲突的旧名称及对应的具名引入、图标子路径继续可用,统一指向新图标。合并后的旧尺寸名不再保留独立大小。
- 同名含义冲突时,新含义优先;下表“必须替换”的条目不能依赖旧名兼容。
<dh-icon name="move-left" :size="24" />必须替换的旧用法
这些旧名称在 1.0 中已有其他含义。模板名称、具名引入和图标子路径都应同步替换。
| 旧名称 | 为保留原用途应改为 |
|---|---|
close-square | close |
check-square | check-square-filled |
image-download | image-upload |
image-upload | image-help |
file-search | search |
zoom-in | scale |
search | document-search |
repeat-one | repeat-one-loop |
battery-charging | battery-charging-open |
完整改名对照
“合并”表示该目标只展示一个标准图形。外观确实不同的项目保留独立名称,例如空电池、充电、不同括号、不同相机和不同的编辑图标。
| 原名称 | 新名称 | 处理 | 旧名使用 |
|---|---|---|---|
left-extra-large | left | 合并 | 兼容 |
left-large | left | 合并 | 兼容 |
left-medium | left | 合并 | 兼容 |
left | left | 合并 | 可用,采用标准图形 |
right-extra-large-bold | right | 合并 | 兼容 |
right-large | right | 合并 | 兼容 |
right-medium | right | 合并 | 兼容 |
right | right | 合并 | 可用,采用标准图形 |
up-extra-large | up | 合并 | 兼容 |
up-large | up | 合并 | 兼容 |
up-medium | up | 合并 | 兼容 |
up | up | 合并 | 可用,采用标准图形 |
down-extra-large | down | 合并 | 兼容 |
down-large | down | 合并 | 兼容 |
down-medium | down | 合并 | 兼容 |
down | down | 合并 | 可用,采用标准图形 |
arrow-left-extra-large | move-left | 合并 | 兼容 |
arrow-left-medium | move-left | 合并 | 兼容 |
arrow-left | move-left | 合并 | 兼容 |
arrow-left-circle-large | move-left-circle | 改名 | 兼容 |
arrow-left-square-contained | move-left-square | 改名 | 兼容 |
arrow-right-extra-large | move-right | 合并 | 兼容 |
arrow-right-medium | move-right | 合并 | 兼容 |
arrow-right | move-right | 合并 | 兼容 |
arrow-right-circle-large | move-right-circle | 改名 | 兼容 |
arrow-right-square-contained | move-right-square | 改名 | 兼容 |
arrow-up-extra-large | move-up | 合并 | 兼容 |
arrow-up-medium | move-up | 合并 | 兼容 |
arrow-up | move-up | 合并 | 兼容 |
arrow-up-circle-large | move-up-circle | 改名 | 兼容 |
arrow-up-square-contained | move-up-square | 改名 | 兼容 |
arrow-down-extra-large | move-down | 合并 | 兼容 |
arrow-down-medium | move-down | 合并 | 兼容 |
arrow-down | move-down | 合并 | 兼容 |
arrow-down-circle-large | move-down-circle | 改名 | 兼容 |
arrow-down-square-contained | move-down-square | 改名 | 兼容 |
arrow-up-left-extra-large | move-up-left | 合并 | 兼容 |
arrow-up-left-large | move-up-left | 合并 | 兼容 |
arrow-up-left-medium | move-up-left | 合并 | 兼容 |
arrow-up-left | move-up-left | 合并 | 兼容 |
arrow-up-left-circle-large | move-up-left-circle | 改名 | 兼容 |
arrow-up-left-square-contained | move-up-left-square | 改名 | 兼容 |
arrow-up-right-extra-large | move-up-right | 合并 | 兼容 |
arrow-up-right-large | move-up-right | 合并 | 兼容 |
arrow-up-right-medium | move-up-right | 合并 | 兼容 |
arrow-up-right | move-up-right | 合并 | 兼容 |
arrow-up-right-circle-large | move-up-right-circle | 改名 | 兼容 |
arrow-up-right-square-contained | move-up-right-square | 改名 | 兼容 |
arrow-down-left-extra-large | move-down-left | 合并 | 兼容 |
arrow-down-left-large | move-down-left | 合并 | 兼容 |
arrow-down-left-medium | move-down-left | 合并 | 兼容 |
arrow-down-left | move-down-left | 合并 | 兼容 |
arrow-down-left-circle-large | move-down-left-circle | 改名 | 兼容 |
arrow-down-left-square-contained | move-down-left-square | 改名 | 兼容 |
arrow-down-right-extra-large | move-down-right | 合并 | 兼容 |
arrow-down-right-large | move-down-right | 合并 | 兼容 |
arrow-down-right-medium | move-down-right | 合并 | 兼容 |
arrow-down-right | move-down-right | 合并 | 兼容 |
arrow-down-right-circle-large | move-down-right-circle | 改名 | 兼容 |
arrow-down-right-square-contained | move-down-right-square | 改名 | 兼容 |
right-extra-large | left-double | 合并 | 兼容 |
left-double-arrow | left-double | 合并 | 兼容 |
right-extra-large-double | right-double | 合并 | 兼容 |
right-double-arrow | right-double | 合并 | 兼容 |
up-double-arrow | up-double | 改名 | 兼容 |
down-double-arrow | down-double | 改名 | 兼容 |
navigation-expand | sidebar-expand | 改名 | 兼容 |
navigation-collapse | sidebar-collapse | 改名 | 兼容 |
refresh-clockwise | refresh | 合并 | 兼容 |
refresh-clockwise-small | refresh | 合并 | 兼容 |
refresh-counter-clockwise | refresh-reverse | 合并 | 兼容 |
refresh-counter-clockwise-small | refresh-reverse | 合并 | 兼容 |
refresh-double-clockwise | sync | 合并 | 兼容 |
refresh-double-clockwise-small | sync | 合并 | 兼容 |
refresh-double-counter-clockwise | sync-reverse | 合并 | 兼容 |
refresh-double-counter-clockwise-small | sync-reverse | 合并 | 兼容 |
direction-fullscreen-line | fullscreen-expand | 合并 | 兼容 |
fullscreen-large | fullscreen-expand | 合并 | 兼容 |
fullscreen-corners | fullscreen | 合并 | 兼容 |
fullscreen-outline | fullscreen | 合并 | 兼容 |
direction-exit-fullscreen | exit-fullscreen | 合并 | 兼容 |
fullscreen-corner | fullscreen-diagonal | 改名 | 兼容 |
exit-fullscreen-corners | exit-fullscreen-diagonal | 改名 | 兼容 |
semicolon-plain | backslash | 合并 | 兼容 |
semicolon-circle | backslash | 合并 | 兼容 |
semicolon-small | slash | 合并 | 兼容 |
semicolon-square | slash | 合并 | 兼容 |
exclamation-large | exclamation | 合并 | 兼容 |
exclamation-medium | exclamation | 合并 | 兼容 |
exclamation-small | exclamation | 合并 | 兼容 |
error-circle | close | 合并 | 兼容 |
error-square | close | 合并 | 兼容 |
error-small | close | 合并 | 兼容 |
close-square | close | 合并 | 必须替换 |
error-bold | close-circle | 合并 | 兼容 |
error-close | close-square | 改名 | 兼容 |
check-large | check | 合并 | 兼容 |
check-small | check | 合并 | 兼容 |
check-circle-outline | check-curved | 改名 | 兼容 |
check-square-outline | check-circle-open | 改名 | 兼容 |
check-double-outline | check-circle | 合并 | 兼容 |
check-badge | check-circle | 合并 | 兼容 |
check-bold | check-square-open | 改名 | 兼容 |
check-line | check-square | 改名 | 兼容 |
check-square | check-square-filled | 改名 | 必须替换 |
check-small-filled | check-badge-filled | 改名 | 兼容 |
system-check-small-outline | check-badge-outline | 改名 | 兼容 |
camera-focus | photo-camera-off | 改名 | 兼容 |
camera-square | camera-aperture | 改名 | 兼容 |
image-album | image-add | 改名 | 兼容 |
image-download | image-upload | 改名 | 必须替换 |
image-edit | image-close | 改名 | 兼容 |
image-sparkle | image-download | 改名 | 兼容 |
image-stack | image-remove | 改名 | 兼容 |
image-upload | image-help | 改名 | 必须替换 |
media-image-focus | image-check | 改名 | 兼容 |
media-pause-circle-outline | stop-circle | 改名 | 兼容 |
media-repeat-outline | repeat-one | 改名 | 兼容 |
file-search | search | 改名 | 必须替换 |
zoom-in | scale | 改名 | 必须替换 |
chorme | facebook-circle | 改名 | 兼容 |
chorme-filled | facebook-circle-filled | 改名 | 兼容 |
media-volume-high-outline | volume-increase | 改名 | 兼容 |
media-volume-medium-outline | volume-decrease | 改名 | 兼容 |
media-volume-low-outline | volume-mute | 改名 | 兼容 |
volume-down | volume-low | 改名 | 兼容 |
volume-up | volume-high | 合并 | 兼容 |
media-volume-mute-line | volume-high | 合并 | 兼容 |
device-battery-empty | battery-empty | 合并 | 兼容 |
battery-minus | battery-empty | 合并 | 兼容 |
device-battery-low | battery-low | 合并 | 兼容 |
media-battery-empty | battery-low | 合并 | 兼容 |
device-battery-medium | battery-half | 合并 | 兼容 |
media-battery-low | battery-half | 合并 | 兼容 |
device-battery-high | battery-full | 合并 | 兼容 |
media-battery-medium | battery-full | 合并 | 兼容 |
media-battery-high | battery-charging | 改名 | 兼容 |
media-battery-charging | battery-low-solid | 改名 | 兼容 |
battery-alert | battery-full-solid | 合并 | 兼容 |
battery-plus | battery-full-solid | 合并 | 兼容 |
chuhao | divide | 改名 | 兼容 |
bellan | archive | 改名 | 兼容 |
dengpao | lightbulb | 改名 | 兼容 |
lunpan | lifebuoy | 改名 | 兼容 |
jincheng | progress | 改名 | 兼容 |
huoyan-filled | flame-filled | 改名 | 兼容 |
zuanshi | gem | 改名 | 兼容 |
guoluqi | filter-funnel | 改名 | 兼容 |
fanyi | translate | 改名 | 兼容 |
toushi | perspective | 改名 | 兼容 |
xinghao | asterisk | 改名 | 兼容 |
xingju | line-spacing | 改名 | 兼容 |
shuipingfenbu | distribute-horizontal | 改名 | 兼容 |
component-ziyuan | component-resource | 改名 | 兼容 |
dribble | dribbble | 改名 | 兼容 |
chuzu-car | taxi | 改名 | 兼容 |
control-kaiguan | toggles | 改名 | 兼容 |
erji | headphones | 改名 | 兼容 |
wangluo-camera | webcam | 改名 | 兼容 |
folder-peizhi | folder-settings | 改名 | 兼容 |
file-folder-peizhi-rounded | folder-settings-square | 改名 | 兼容 |
file-chaxun-outline | file-search | 改名 | 兼容 |
file-chaxun-rounded | file-text-search | 改名 | 兼容 |
pencil-gongju-rounded | edit-underline | 改名 | 兼容 |
pencil-gongju-square | edit-underline-rounded | 改名 | 兼容 |
deng-tower | lighthouse | 改名 | 兼容 |
deng-tower-filled | lighthouse-filled | 改名 | 兼容 |
chuizi | gavel | 改名 | 兼容 |
chuizi-filled | gavel-filled | 改名 | 兼容 |
chizi | ruler-square | 改名 | 兼容 |
chizi-filled | ruler-square-filled | 改名 | 兼容 |
thunder-da-broadcast | satellite-dish | 改名 | 兼容 |
thunder-da-broadcast-filled | satellite-dish-filled | 改名 | 兼容 |
zhifubao | alipay | 改名 | 兼容 |
zhifubao-filled | alipay-filled | 改名 | 兼容 |
whats-app | whatsapp | 改名 | 兼容 |
whats-app-filled | whatsapp-filled | 改名 | 兼容 |
txu | t-shirt | 改名 | 兼容 |
txu-filled | t-shirt-filled | 改名 | 兼容 |
zhi | paper-scroll | 改名 | 兼容 |
zhi-filled | paper-scroll-filled | 改名 | 兼容 |
wujiao-star | star | 合并 | 兼容 |
you-tube | youtube | 合并 | 兼容 |
you-tube-filled | youtube-filled | 改名 | 兼容 |
fang-large | zoom-in | 合并 | 兼容 |
editor-fang-large | zoom-in | 合并 | 兼容 |
fang-large-filled | zoom-in-filled | 改名 | 兼容 |
large-bracket-outline | curly-brackets | 改名 | 兼容 |
large-bracket-check | curly-brackets-close | 改名 | 兼容 |
large-bracket-circle | curly-brackets-add | 改名 | 兼容 |
large-bracket-dot | curly-brackets-code | 改名 | 兼容 |
large-bracket-rounded | curly-brackets-check | 改名 | 兼容 |
large-bracket-square | curly-brackets-remove | 改名 | 兼容 |
large-bracket-wave | curly-brackets-more | 改名 | 兼容 |
medium-bracket | square-brackets | 改名 | 兼容 |
small-bracket | parentheses | 改名 | 兼容 |
lightning-filled-outline | lightning-square | 改名 | 兼容 |
user-filled-outline | user | 改名 | 兼容 |
user-filled-line | user-avatar-filled | 改名 | 兼容 |
user-filled-solid | user-circle-filled | 改名 | 兼容 |
education-book-filled-line | book-closed-filled | 改名 | 兼容 |
education-book-filled-outline | book-open-filled | 改名 | 兼容 |
map-globe-filled-outline | globe-circle-filled | 改名 | 兼容 |
system-settings-filled-outline | sliders-filled | 改名 | 兼容 |
system-share-filled-line | external-link | 改名 | 兼容 |
file-download-filled-outline | download-tray-filled | 改名 | 兼容 |
file-upload-filled-outline | upload-cloud-filled | 改名 | 兼容 |
large-thumbs-up | thumbs-up-rounded | 改名 | 兼容 |
large-thumbs-down | thumbs-down-rounded | 改名 | 兼容 |
large-thumbs-up-filled | thumbs-up-filled | 改名 | 兼容 |
large-thumbs-down-filled | thumbs-down-filled | 改名 | 兼容 |
building-filled-outline | house-filled | 改名 | 兼容 |
building-filled-solid | home-filled | 改名 | 兼容 |
building-filled-line | home-door-filled | 改名 | 兼容 |
tower-filled-line | tower-lattice-filled | 改名 | 兼容 |
tower-filled-outline | tower-slanted-filled | 改名 | 兼容 |
flag-outline-filled | flag-pennant-filled | 改名 | 兼容 |
communication-chat-box-filled-outline | chat-dots-filled | 改名 | 兼容 |
communication-message-box-filled-outline | message-square-filled | 改名 | 兼容 |
system-share-filled-solid | share-nodes-filled | 改名 | 兼容 |
system-shield-filled-outline | shield | 合并 | 兼容 |
line-chart-up | line-chart-decrease | 改名 | 兼容 |
trend-line-up | trend-decrease | 改名 | 兼容 |
trend-line-down | move-down-right-line | 改名 | 兼容 |
trend-line-curve | trend-increase | 改名 | 兼容 |
trend-line-zigzag | move-up-right-line | 改名 | 兼容 |
search | document-search | 改名 | 必须替换 |
repeat-one | repeat-one-loop | 改名 | 必须替换 |
battery-charging | battery-charging-open | 改名 | 必须替换 |
历史名称
之前文档出现过的 chevron-left/right/up/down 及其大小名称仍可使用,对应当前的 left/right/up/down。它们不会出现在选用列表中。
与初步审计的区别
camera-focus改为photo-camera-off,保留原有摄像头关闭图标camera-off。- 电池有条格与实心电量两种图形,后者保留
battery-low-solid、battery-full-solid。battery-alert实际为满电图形,归入battery-full-solid。 - 原
battery-charging是开口电池,改为battery-charging-open;闭合电池加闪电使用battery-charging。 - 原
search是文档加放大镜,改为document-search;普通放大镜使用search。 - 两种单曲循环分别保留为
repeat-one和repeat-one-loop。 - 弯曲对勾、不同拇指轮廓、不同文件夹配置图形、不同用户头像继续保留独立名称,不仅按用途强行合并。
版本说明
图标库单独升级到 1.0.0,不要求电脑端、移动端组件库一起改为 1.0。此次存在同名含义变更,请按“必须替换”清单核对使用项目。
