如何实现WordPress后台自定义菜单图标并支持状态变色？

问题原因 #

你的图标始终保持黑色，核心原因是SVG的path标签硬编码了固定的fill="black"属性。WordPress后台菜单的图标颜色是通过父元素的color CSS属性控制的（默认灰色、悬停蓝色、选中白色），但内联的fill="black"优先级高于CSS，导致样式无法覆盖。

关于官方文档提到的“需将样式硬编码到path中，而非使用标签”，意思是不要用<style>标签定义SVG的填充样式，而是直接在<path>上设置fill属性——但这里的关键是要让fill能继承外部CSS的颜色，而不是设置固定值。

解决方案 #

1. 修改SVG文件 #

将SVG中path的fill="black"替换为fill="currentColor"，这样SVG会自动继承父元素的color值，从而跟着WordPress菜单的状态变色。修改后的SVG内容如下：

<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<path fill="currentColor" d="M7.701 10.271l3.667-3.178c.405.617 1.366 1.274 1.417 1.866l-3.552 3.078-1.531-1.767zm.497 1.818l5.218-1.019c.092.622.711 1.556.485 1.991l-5.074.991-.629-1.963zm3.781-6.913l.875-3.294 1.578.424-.875 3.294-1.578-.424zm-6.55 6.267l1.167-5.11c.596.316 1.676.364 1.956.855l-1.13 4.951-1.992-.695zM3.353 7.026l.814-3.693c.518.283 1.896.013 1.741.73L5.17 7.41l-1.817-.384zm8.679 7.76l3.868 1.298c-.276.505-.298 1.52-.73 1.713l-3.728-1.251.591-1.76zM4.978 13.9l5.089 1.121c-.268.726-.218 1.949-.675 2.38l-4.945-1.089.531-2.411zm-3.208-.732l2.021-4.176c.589.389 1.732.58 1.989 1.087l-1.956 4.043-2.053-.954zm-.279 1.178l4.929-1.911c.189.782.933 1.81.767 2.435l-4.775 1.852-.921-2.376zm13.086-6.181h4.294v2.07h-4.294v-2.07z"/>
</svg>

2. 保留原有代码逻辑（可选优化） #

你的PHP代码逻辑没问题，只要使用修改后的SVG文件即可。如果想避免base64编码的麻烦，也可以直接将转义后的SVG代码作为图标参数传入（注意转义双引号）：

function admin_menu() {
    $svg_icon = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path fill="currentColor" d="M7.701 10.271l3.667-3.178c.405.617 1.366 1.274 1.417 1.866l-3.552 3.078-1.531-1.767zm.497 1.818l5.218-1.019c.092.622.711 1.556.485 1.991l-5.074.991-.629-1.963zm3.781-6.913l.875-3.294 1.578.424-.875 3.294-1.578-.424zm-6.55 6.267l1.167-5.11c.596.316 1.676.364 1.956.855l-1.13 4.951-1.992-.695zM3.353 7.026l.814-3.693c.518.283 1.896.013 1.741.73L5.17 7.41l-1.817-.384zm8.679 7.76l3.868 1.298c-.276.505-.298 1.52-.73 1.713l-3.728-1.251.591-1.76zM4.978 13.9l5.089 1.121c-.268.726-.218 1.949-.675 2.38l-4.945-1.089.531-2.411zm-3.208-.732l2.021-4.176c.589.389 1.732.58 1.989 1.087l-1.956 4.043-2.053-.954zm-.279 1.178l4.929-1.911c.189.782.933 1.81.767 2.435l-4.775 1.852-.921-2.376zm13.086-6.181h4.294v2.07h-4.294v-2.07z"/></svg>';
    add_menu_page('MyPlugin Plugin admin', 'MyPlugin', 'manage_options', 'MyPlugin-plugin', null, 'data:image/svg+xml;utf8,' . urlencode($svg_icon));
    add_submenu_page('MyPlugin-plugin', 'MyPlugin Plugin Settings', 'Settings', 'manage_options', 'MyPlugin-plugin', [$this, 'page_settings']);
    add_submenu_page('MyPlugin-plugin', 'MyPlugin Plugin Guide', 'Guide', 'manage_options', 'MyPlugin-plugin-guide', [$this, 'page_guide']);
}

效果验证 #

修改后刷新后台，你的图标会和原生菜单图标保持一致的状态：默认灰色，鼠标悬停变为蓝色，进入插件页面时变为白色。

内容的提问来源于stack exchange，提问作者Chris