Skip to content

图标 1.0 改名对照与升级说明 ​

本文适用于 @szhn/dh-design-icons@1.0.0,包含从 0.5.0 升级的步骤和改名对照。

本轮从 1752 个展示项整理为 1689 个,合并 63 个尺寸或重复版本。共有 225 个旧名称发生调整;未列入清单的名称保留。

225 按改前、改后名称不同统计。其余 11 条记录用于确定合并时保留的标准图形,名称本身没有改变。兼容名称还包含此前版本的历史名称,因此共有 251 个。

升级步骤 ​

  1. 安装图标库 1.0.0,无须同时升级电脑端或移动端组件库。

    bash
    pnpm add @szhn/dh-design-icons@1.0.0 --registry=https://npmmirror.digitalhainan.com.cn
  2. 先处理下方 9 个“必须替换”的旧名称,再按需把其他旧名改成新名。

  3. 检查三种使用位置:name 属性、具名组件引入、/icons/ 图标子路径。菜单配置和接口下发的名称也要一起检查。

  4. 同款大小版本改用一个名称,通过 size 设置大小。

  5. 运行项目检查和构建,打开涉及的页面确认上传、下载、搜索、关闭、充电等图标与用途一致。

只修改 DH 图标库的引用,不替换其他图标库或组件中的同名内容。按原名称一次完成映射,不要连续全局替换:例如旧 image-download 应变为 image-upload,不能又被下一轮替换成 image-help。

三种写法的迁移示例 ​

以下示例都表示保留旧版 image-download 实际表达的“上传图片”用途:

vue
<!-- 修改前 -->
<DhIcon name="image-download" :size="24" />
<!-- 修改后 -->
<DhIcon name="image-upload" :size="24" />
ts
// 修改前
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 等。原先撤下的四个小号方向不再单独展示。
  • 无冲突的旧名称及对应的具名引入、图标子路径继续可用,统一指向新图标。合并后的旧尺寸名不再保留独立大小。
  • 同名含义冲突时,新含义优先;下表“必须替换”的条目不能依赖旧名兼容。
vue
<dh-icon name="move-left" :size="24" />

必须替换的旧用法 ​

这些旧名称在 1.0 中已有其他含义。模板名称、具名引入和图标子路径都应同步替换。

旧名称为保留原用途应改为
close-squareclose
check-squarecheck-square-filled
image-downloadimage-upload
image-uploadimage-help
file-searchsearch
zoom-inscale
searchdocument-search
repeat-onerepeat-one-loop
battery-chargingbattery-charging-open

完整改名对照 ​

“合并”表示该目标只展示一个标准图形。外观确实不同的项目保留独立名称,例如空电池、充电、不同括号、不同相机和不同的编辑图标。

原名称新名称处理旧名使用
left-extra-largeleft合并兼容
left-largeleft合并兼容
left-mediumleft合并兼容
leftleft合并可用,采用标准图形
right-extra-large-boldright合并兼容
right-largeright合并兼容
right-mediumright合并兼容
rightright合并可用,采用标准图形
up-extra-largeup合并兼容
up-largeup合并兼容
up-mediumup合并兼容
upup合并可用,采用标准图形
down-extra-largedown合并兼容
down-largedown合并兼容
down-mediumdown合并兼容
downdown合并可用,采用标准图形
arrow-left-extra-largemove-left合并兼容
arrow-left-mediummove-left合并兼容
arrow-leftmove-left合并兼容
arrow-left-circle-largemove-left-circle改名兼容
arrow-left-square-containedmove-left-square改名兼容
arrow-right-extra-largemove-right合并兼容
arrow-right-mediummove-right合并兼容
arrow-rightmove-right合并兼容
arrow-right-circle-largemove-right-circle改名兼容
arrow-right-square-containedmove-right-square改名兼容
arrow-up-extra-largemove-up合并兼容
arrow-up-mediummove-up合并兼容
arrow-upmove-up合并兼容
arrow-up-circle-largemove-up-circle改名兼容
arrow-up-square-containedmove-up-square改名兼容
arrow-down-extra-largemove-down合并兼容
arrow-down-mediummove-down合并兼容
arrow-downmove-down合并兼容
arrow-down-circle-largemove-down-circle改名兼容
arrow-down-square-containedmove-down-square改名兼容
arrow-up-left-extra-largemove-up-left合并兼容
arrow-up-left-largemove-up-left合并兼容
arrow-up-left-mediummove-up-left合并兼容
arrow-up-leftmove-up-left合并兼容
arrow-up-left-circle-largemove-up-left-circle改名兼容
arrow-up-left-square-containedmove-up-left-square改名兼容
arrow-up-right-extra-largemove-up-right合并兼容
arrow-up-right-largemove-up-right合并兼容
arrow-up-right-mediummove-up-right合并兼容
arrow-up-rightmove-up-right合并兼容
arrow-up-right-circle-largemove-up-right-circle改名兼容
arrow-up-right-square-containedmove-up-right-square改名兼容
arrow-down-left-extra-largemove-down-left合并兼容
arrow-down-left-largemove-down-left合并兼容
arrow-down-left-mediummove-down-left合并兼容
arrow-down-leftmove-down-left合并兼容
arrow-down-left-circle-largemove-down-left-circle改名兼容
arrow-down-left-square-containedmove-down-left-square改名兼容
arrow-down-right-extra-largemove-down-right合并兼容
arrow-down-right-largemove-down-right合并兼容
arrow-down-right-mediummove-down-right合并兼容
arrow-down-rightmove-down-right合并兼容
arrow-down-right-circle-largemove-down-right-circle改名兼容
arrow-down-right-square-containedmove-down-right-square改名兼容
right-extra-largeleft-double合并兼容
left-double-arrowleft-double合并兼容
right-extra-large-doubleright-double合并兼容
right-double-arrowright-double合并兼容
up-double-arrowup-double改名兼容
down-double-arrowdown-double改名兼容
navigation-expandsidebar-expand改名兼容
navigation-collapsesidebar-collapse改名兼容
refresh-clockwiserefresh合并兼容
refresh-clockwise-smallrefresh合并兼容
refresh-counter-clockwiserefresh-reverse合并兼容
refresh-counter-clockwise-smallrefresh-reverse合并兼容
refresh-double-clockwisesync合并兼容
refresh-double-clockwise-smallsync合并兼容
refresh-double-counter-clockwisesync-reverse合并兼容
refresh-double-counter-clockwise-smallsync-reverse合并兼容
direction-fullscreen-linefullscreen-expand合并兼容
fullscreen-largefullscreen-expand合并兼容
fullscreen-cornersfullscreen合并兼容
fullscreen-outlinefullscreen合并兼容
direction-exit-fullscreenexit-fullscreen合并兼容
fullscreen-cornerfullscreen-diagonal改名兼容
exit-fullscreen-cornersexit-fullscreen-diagonal改名兼容
semicolon-plainbackslash合并兼容
semicolon-circlebackslash合并兼容
semicolon-smallslash合并兼容
semicolon-squareslash合并兼容
exclamation-largeexclamation合并兼容
exclamation-mediumexclamation合并兼容
exclamation-smallexclamation合并兼容
error-circleclose合并兼容
error-squareclose合并兼容
error-smallclose合并兼容
close-squareclose合并必须替换
error-boldclose-circle合并兼容
error-closeclose-square改名兼容
check-largecheck合并兼容
check-smallcheck合并兼容
check-circle-outlinecheck-curved改名兼容
check-square-outlinecheck-circle-open改名兼容
check-double-outlinecheck-circle合并兼容
check-badgecheck-circle合并兼容
check-boldcheck-square-open改名兼容
check-linecheck-square改名兼容
check-squarecheck-square-filled改名必须替换
check-small-filledcheck-badge-filled改名兼容
system-check-small-outlinecheck-badge-outline改名兼容
camera-focusphoto-camera-off改名兼容
camera-squarecamera-aperture改名兼容
image-albumimage-add改名兼容
image-downloadimage-upload改名必须替换
image-editimage-close改名兼容
image-sparkleimage-download改名兼容
image-stackimage-remove改名兼容
image-uploadimage-help改名必须替换
media-image-focusimage-check改名兼容
media-pause-circle-outlinestop-circle改名兼容
media-repeat-outlinerepeat-one改名兼容
file-searchsearch改名必须替换
zoom-inscale改名必须替换
chormefacebook-circle改名兼容
chorme-filledfacebook-circle-filled改名兼容
media-volume-high-outlinevolume-increase改名兼容
media-volume-medium-outlinevolume-decrease改名兼容
media-volume-low-outlinevolume-mute改名兼容
volume-downvolume-low改名兼容
volume-upvolume-high合并兼容
media-volume-mute-linevolume-high合并兼容
device-battery-emptybattery-empty合并兼容
battery-minusbattery-empty合并兼容
device-battery-lowbattery-low合并兼容
media-battery-emptybattery-low合并兼容
device-battery-mediumbattery-half合并兼容
media-battery-lowbattery-half合并兼容
device-battery-highbattery-full合并兼容
media-battery-mediumbattery-full合并兼容
media-battery-highbattery-charging改名兼容
media-battery-chargingbattery-low-solid改名兼容
battery-alertbattery-full-solid合并兼容
battery-plusbattery-full-solid合并兼容
chuhaodivide改名兼容
bellanarchive改名兼容
dengpaolightbulb改名兼容
lunpanlifebuoy改名兼容
jinchengprogress改名兼容
huoyan-filledflame-filled改名兼容
zuanshigem改名兼容
guoluqifilter-funnel改名兼容
fanyitranslate改名兼容
toushiperspective改名兼容
xinghaoasterisk改名兼容
xingjuline-spacing改名兼容
shuipingfenbudistribute-horizontal改名兼容
component-ziyuancomponent-resource改名兼容
dribbledribbble改名兼容
chuzu-cartaxi改名兼容
control-kaiguantoggles改名兼容
erjiheadphones改名兼容
wangluo-camerawebcam改名兼容
folder-peizhifolder-settings改名兼容
file-folder-peizhi-roundedfolder-settings-square改名兼容
file-chaxun-outlinefile-search改名兼容
file-chaxun-roundedfile-text-search改名兼容
pencil-gongju-roundededit-underline改名兼容
pencil-gongju-squareedit-underline-rounded改名兼容
deng-towerlighthouse改名兼容
deng-tower-filledlighthouse-filled改名兼容
chuizigavel改名兼容
chuizi-filledgavel-filled改名兼容
chiziruler-square改名兼容
chizi-filledruler-square-filled改名兼容
thunder-da-broadcastsatellite-dish改名兼容
thunder-da-broadcast-filledsatellite-dish-filled改名兼容
zhifubaoalipay改名兼容
zhifubao-filledalipay-filled改名兼容
whats-appwhatsapp改名兼容
whats-app-filledwhatsapp-filled改名兼容
txut-shirt改名兼容
txu-filledt-shirt-filled改名兼容
zhipaper-scroll改名兼容
zhi-filledpaper-scroll-filled改名兼容
wujiao-starstar合并兼容
you-tubeyoutube合并兼容
you-tube-filledyoutube-filled改名兼容
fang-largezoom-in合并兼容
editor-fang-largezoom-in合并兼容
fang-large-filledzoom-in-filled改名兼容
large-bracket-outlinecurly-brackets改名兼容
large-bracket-checkcurly-brackets-close改名兼容
large-bracket-circlecurly-brackets-add改名兼容
large-bracket-dotcurly-brackets-code改名兼容
large-bracket-roundedcurly-brackets-check改名兼容
large-bracket-squarecurly-brackets-remove改名兼容
large-bracket-wavecurly-brackets-more改名兼容
medium-bracketsquare-brackets改名兼容
small-bracketparentheses改名兼容
lightning-filled-outlinelightning-square改名兼容
user-filled-outlineuser改名兼容
user-filled-lineuser-avatar-filled改名兼容
user-filled-soliduser-circle-filled改名兼容
education-book-filled-linebook-closed-filled改名兼容
education-book-filled-outlinebook-open-filled改名兼容
map-globe-filled-outlineglobe-circle-filled改名兼容
system-settings-filled-outlinesliders-filled改名兼容
system-share-filled-lineexternal-link改名兼容
file-download-filled-outlinedownload-tray-filled改名兼容
file-upload-filled-outlineupload-cloud-filled改名兼容
large-thumbs-upthumbs-up-rounded改名兼容
large-thumbs-downthumbs-down-rounded改名兼容
large-thumbs-up-filledthumbs-up-filled改名兼容
large-thumbs-down-filledthumbs-down-filled改名兼容
building-filled-outlinehouse-filled改名兼容
building-filled-solidhome-filled改名兼容
building-filled-linehome-door-filled改名兼容
tower-filled-linetower-lattice-filled改名兼容
tower-filled-outlinetower-slanted-filled改名兼容
flag-outline-filledflag-pennant-filled改名兼容
communication-chat-box-filled-outlinechat-dots-filled改名兼容
communication-message-box-filled-outlinemessage-square-filled改名兼容
system-share-filled-solidshare-nodes-filled改名兼容
system-shield-filled-outlineshield合并兼容
line-chart-upline-chart-decrease改名兼容
trend-line-uptrend-decrease改名兼容
trend-line-downmove-down-right-line改名兼容
trend-line-curvetrend-increase改名兼容
trend-line-zigzagmove-up-right-line改名兼容
searchdocument-search改名必须替换
repeat-onerepeat-one-loop改名必须替换
battery-chargingbattery-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。此次存在同名含义变更,请按“必须替换”清单核对使用项目。