WordPress 用 SVG 替换 Dashicons：wp_get_icon() 让后台图标更清晰、更无障碍

云上的幻象2026-10-014 分钟阅读1,596 字10

100%

WordPress 用 SVG 替换 Dashicons：wp_get_icon() 让后台图标更清晰、更无障碍

WordPress 正在把后台管理栏（admin bar）和左侧菜单的 Dashicons 图标字体，替换成 SVG 图标：底层用的是 WordPress 7.1 引入的 wp_get_icon() 函数。这不是换图标长相，而是换渲染技术，目的是修复图标字体在屏幕阅读器、高对比模式和字体加载失败时的种种无障碍问题。

为什么要换掉图标字体

Dashicons 是图标字体，每个图标其实是映射到 Unicode 私有区的「文字字符」，本身没有语义。这带来三个真实问题：

屏幕阅读器表现不稳：有时静音、有时读出一个乱码字符或半句标点；SVG 带显式 aria-label，朗读可预期。
高对比模式下会消失：Windows High Contrast Mode 等强制配色会把字体图标当成文字处理而让它消失；SVG 用 currentColor 跟随用户配色。
字体加载失败很尴尬：字体被拦或变慢时，图标变成豆腐块或错字，像站点坏了；SVG 要么渲染要么 absent 。

这次改动只动后台管理栏和侧边菜单的图标渲染方式，图标形状大体不变；仍有一些开放问题（如搜索图标方向、 Posts 图标是否换成羽毛笔），反馈收集在 Trac 工单 #65089 。

开发者怎么用 wp_get_icon()

wp_get_icon() 是 7.1 的 Icon Registration API 一部分：主题和插件可以注册自己的 SVG 集合，再从 PHP 取回 SVG 标记用于自定义界面。

// 注册一个图标集合与单个图标
wp_register_icon_collection( 'my-plugin', '我的图标' );
wp_register_icon( 'my-plugin/star', [
    'label'   => '星标',
    'content' => '<svg viewBox="0 0 24 24">...</svg>',
] );

// 在 PHP 里取回 SVG（可带 size / class / aria-label）
echo wp_get_icon( 'my-plugin/star', [ 'size' => 24, 'class' => 'my-star', 'aria-label' => '星标' ] );

当前 SVG 注册的注意事项

WordPress 7.1 对注册 SVG 做了保守清洗：只支持 <svg>、<path>、<g> 等有限元素，stroke 属性会被剥离，所以优先用 fill 型图标。复杂图标库可能需要简化后才能注册。后续版本会放宽支持。