This article explains how to create a custom SVG icon for an administrative menu of WordPress.
Create the icon in Illustrator
Create a new document with Illustrator, and under the Project Details section, set the dimension of the image. Any size is fine as long as the width and height are equal.
It’s now the time to create the actual SVG icon. Use your favorite process to create the icon, then set a fill color for all the shapes used to represent a positive space in the image.
WordPress replaces all the SVG menu icons fill colors with the color scheme base color (the base color of the color scheme associated with the user) when the administrative area loads. The wp-admin/js/svg-painter.js file performs this process.
When creating an SVG admin icon with Illustrator, please consider what follows:
- WordPress does not recolor the strokes, so don’t use them in the icon (use the Object -> Expand Illustrator function if needed)
- An SVG with a 20 x 20 width/height is ideal
- Hidden layers increase the SVG and Base64 size, so remove them before saving the icon.
Convert the SVG icon in the base64 format
The Base64 representation of the SVG data is required to create a custom admin icon with this method. In this case, to convert the SVG icon created with Illustrator in the Base64 format, you can use an online tool like SVG to Base64.
Add the SVG icon in WordPress
As states in the add_menu_page() function documentation, the parameter used to define the menu icon accepts a Base64-encoded SVG using the data URI scheme.
//The icon in Base64 format $icon_base64 = 'PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyMCAyMCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjAgMjA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxyZWN0IHg9IjUiIHk9IjUiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIvPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPC9zdmc+DQo='; //The icon in the data URI scheme $icon_data_uri = 'data:image/svg+xml;base64,' . $icon_base64;
This complete example generate a custom menu named “Example” with a square icon provided to WordPress in the data URI scheme format.
function register_menu_with_custom_svg_icon() {
//The icon in Base64 format
$icon_base64 = 'PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyMCAyMCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjAgMjA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxyZWN0IHg9IjUiIHk9IjUiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIvPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPC9zdmc+DQo=';
//The icon in the data URI scheme
$icon_data_uri = 'data:image/svg+xml;base64,' . $icon_base64;
add_menu_page(
'Example',
'Example',
'manage_options',
'example',
'',
$icon_data_uri,
);
}
add_action( 'admin_menu', 'register_menu_with_custom_svg_icon' );
