添加自定义SVG图标
我想在我的WordPress插件中使用自己的自定义SVG图标,于是研究了一下这个网址:https://developer.wordpress.org/reference/functions/add_menu_page/,在纸上看起来很简单。该指南告诉你如何准备$icon_url
参数:
$icon_url(字符串)(可选)要用于此菜单的图标的URL。
传递使用数据URI编码的基于base64的SVG,它将被着色以匹配颜色方案。 这应该以'data:image/svg+xml;base64,'开头。
但是,我在使用$icon_url
参数时遇到了一些问题,并且想要添加一些注释。从我的经验和论坛查看来看,使用自定义图标并不像只需创建SVG并对其进行编码那样简单。以下是向管理菜单添加自定义SVG图标的逐步过程:
- 首先,以任何想要的方式获取或创建您的SVG图标。
- 接下来,清理SVG文件并正确格式化它。
- 然后对文件进行base64编码。
- 用'data:image/svg+xml;base64,'前缀基于base64的字符串。
... 这将为您提供一个有效的$icon_url字符串。 让我详细介绍这些步骤。
步骤1
您可以以任何方式创建SVG图形,据我所见。 我使用Adobe Illustrator创建了我的图标,但是任何像Inkscape、Corel draw甚至硬编码(如果您对此感到舒适)的工具也可以。
步骤2
最痛苦的部分是清理SVG。 但是我认为这也是最重要的部分之一。 经过大量测试和实验,我发现SVG越干净,它就越有可能正常工作。 许多图形程序添加元数据和其他琐事,以使SVG更广泛兼容。 99%的情况下很好,但是当将其用于WordPress菜单图标时,它经常会出错,导致根本没有显示图标。
以下是从Adobe Illustrator正常导出的SVG示例:
<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0
15.7 16"><defs><style>.d{fill:#070707;}</style></defs><g id="a"/><g id="b"><g id="c"><path
class="d" d="M15.4,6.5H7.9v3h4.4c-.4,2.1-2.3,3.5-4.4,3.4-2.6-.1-4.6-2.1-4.7-4.7-.1-2.7,2-5
,4.7-5.1,1.1,0,2.2,.4,3.1,1.2l2.3-2.2c-1.4-1.4-3.4-2.1-5.3-2.1C3.6,0,0,3.6,0,8s3.6,8,8,8,
7.7-3.2,7.7-7.8c-.1-.6-.1-1.1-.3-1.7Z"/><path class="d" d="M15.4,6.5H7.9v3h4.4c-.4,2.1-2.3,
3.5-4.4,3.4-2.6-.1-4.6-2.1-4.7-4.7-.1-2.7,2-5,4.7-5.1,1.1,0,2.2,.4,3.1,1.2l2.3-2.2c-1.4-1.
4-3.4-2.1-5.3-2.1C3.6,0,0,3.6,0,8s3.6,8,8,8,7.7-3.2,7.7-7.8c-.1-.6-.1-1.1-.3-1.7Z"/></g>
</g></svg>
混乱,非常混乱。即使我们添加了一些换行和缩进,仍然有很多东西需要处理。
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.7 16">
<defs>
<style>
.d{fill:#070707;}
</style>
</defs>
<g id="a"/>
<g id="b">
<g id="c">
<path class="d" d="M15.4,6.5H7.9v3h4.4c-.4,2.1-2.3,3.5-4.4,3.4-2.6-.1-4.6-2.1-4.7-4.7-.1-2.7,2-5,4.7-5.1,1.1,0,2.2,.4,3.1,1.2l2.3-2.2c-1.4-1.4-3.4-2.1-5.3-2.1C3.6,0,0,3.6,0,8s3.6,8,8,8,7.7-3.2,7.7-7.8c-.1-.6-.1-1.1-.3-1.7Z"/>
<path class="d" d="M15.4,6.5H7.9v3h4.4c-.4,2.1-2.3,3.5-4.4,3.4-2.6-.1-4.6-2.1-4.7-4.7-.1-2.7,2-5,4.7-5.1,1.1,0,2.2,.4,3.1,1.2l2.3-2.2c-1.4-1.4-3.4-2.1-5.3-2.1C3.6,0,0,3.6,0,8s3.6,8,8,8,7.7-3.2,7.7-7.8c-.1-.6-.1-1.1-.3-1.7Z"/>
</g>
</g>
</svg>
我们想要做的是大量清理并消除不必要的数据。如果将上面的内容作为图像源添加,可能会加载成功,但在GUI中无法正确着色,而且可能大小不对。因此,我们需要做以下几件事情:
- 删除<?xml标签,这不会有任何帮助
- 然后,您将不得不将每个样式硬编码到路径中,而不是使用标签。对于每个路径,请确定从标记应用哪些类别到该路径,并将来自这些类别的CSS添加到路径中。
- 完成后,可以完全删除defs元素。
- 可以删除
<g>
组元素,只保留SVG根部的主要路径元素。
- 为确保SVG与GUI颜色相符,需要在每个路径中添加fill="black"。
- 然后,为确保SVG的宽度和高度正确,请在开头元素中添加width="20" height="20"。
完成所有这些步骤后,上面提到的SVG文件现在看起来像这样:
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill="black" d="M17.6 8.5h-7.5v3h4.4c-.4 2.1-2.3 3.5-4.4 3.4-2.6-.1-4.6-2.1-4.7-4.7-.1-2.7 2-5 4.7-5.1 1.1 0 2.2.4 3.1 1.2l2.3-2.2C14.1 2.7 12.1 2 10.2 2c-4.4 0-8 3.6-8 8s3.6 8 8 8c4.6 0 7.7-3.2 7.7-7.8-.1-.6-.1-1.1-.3-1.7z" fillrule="evenodd" cliprule="evenodd">
</path>
</svg>
步骤三
现在您希望将SVG进行Base64编码。我使用的方法是将文件传递到PHP的默认编码机制中,并将路径作为绝对路径复制到我的PHP中。您不希望PHP读取SVG文件、将其进行Base64编码并在用户重新加载页面时每次将其传递给菜单,这只是浪费资源和时间。如果您是WordPress开发人员,使用PHP很容易,并且不应该有问题。
// load the SVG data by loading the file or including the XML directly.
$svg = file_get_contents('/path/to/icon.svg');
// or
$svg = '<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill="black" d="M17.6 8.5h-7.5v3h4.4c-.4 2.1-2.3 3.5-4.4 3.4-2.6-.1-4.6-2.1-4.7-4.7-.1-2.7 2-5 4.7-5.1 1.1 0 2.2.4 3.1 1.2l2.3-2.2C14.1 2.7 12.1 2 10.2 2c-4.4 0-8 3.6-8 8s3.6 8 8 8c4.6 0 7.7-3.2 7.7-7.8-.1-.6-.1-1.1-.3-1.7z" fillrule="evenodd" cliprule="evenodd"></path></svg>';
// then encode it and echo it out
echo base64_encode($svg);
// will give you a long string that looks like this:
// PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdib3g9IjAgMCAyMCAyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsPSIjYTdhYWFkIiBkPSJNMTcuNiA4LjVoLTcuNXYzaDQuNGMtLjQgMi4xLTIuMyAzLjUtNC40IDMuNC0yLjYtLjEtNC42LTIuMS00LjctNC43LS4xLTIuNyAyLTUgNC43LTUuMSAxLjEgMCAyLjIuNCAzLjEgMS4ybDIuMy0yLjJDMTQuMSAyLjcgMTIuMSAyIDEwLjIgMmMtNC40IDAtOCAzLjYtOCA4czMuNiA4IDggOGM0LjYgMCA3LjctMy4yIDcuNy03LjgtLjEtLjYtLjEtMS4xLS4zLTEuN3oiIGZpbGxydWxlPSJldmVub2RkIiBjbGlwcnVsZT0iZXZlbm9kZCI+PC9wYXRoPjwvc3ZnPg==
// thats your base64 encoded SVG file!
第四步
在base64 SVG前面添加"data:image/svg+xml;base64,",使其看起来像这样:
"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdib3g9IjAgMCAyMCAyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsPSIjYTdhYWFkIiBkPSJNMTcuNiA4LjVoLTcuNXYzaDQuNGMtLjQgMi4xLTIuMyAzLjUtNC40IDMuNC0yLjYtLjEtNC42LTIuMS00LjctNC43LS4xLTIuNyAyLTUgNC43LTUuMSAxLjEgMCAyLjIuNCAzLjEgMS4ybDIuMy0yLjJDMTQuMSAyLjcgMTIuMSAyIDEwLjIgMmMtNC40IDAtOCAzLjYtOCA4czMuNiA4IDggOGM0LjYgMCA3LjctMy4yIDcuNy03LjgtLjEtLjYtLjEtMS4xLS4zLTEuN3oiIGZpbGxydWxlPSJldmVub2RkIiBjbGlwcnVsZT0iZXZlbm9kZCI+PC9wYXRoPjwvc3ZnPg=="
先生,那里的 $icon_url 字符串是完全有效的。我会将该字符串硬编码到一个变量中,并每次将其添加到您的插件中。
add_menu_page( 'Plugin page name', 'Plugin', 'manage_options', "slug", 'callback','data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdib3g9IjAgMCAyMCAyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsPSIjYTdhYWFkIiBkPSJNMTcuNiA4LjVoLTcuNXYzaDQuNGMtLjQgMi4xLTIuMyAzLjUtNC40IDMuNC0yLjYtLjEtNC42LTIuMS00LjctNC43LS4xLTIuNyAyLTUgNC43LTUuMSAxLjEgMCAyLjIuNCAzLjEgMS4ybDIuMy0yLjJDMTQuMSAyLjcgMTIuMSAyIDEwLjIgMmMtNC40IDAtOCAzLjYtOCA4czMuNiA4IDggOGM0LjYgMCA3LjctMy4yIDcuNy03LjgtLjEtLjYtLjEtMS4xLS4zLTEuN3oiIGZpbGxydWxlPSJldmVub2RkIiBjbGlwcnVsZT0iZXZlbm9kZCI+PC9wYXRoPjwvc3ZnPg==', );
希望这能帮助别人,因为今早这让我省了几个小时的时间!
add_menu_page()
的评论。 - undefined