Custom svg admin menu icon in WordPress

I'm really counting on your help in this one. I searched a lot and found no solution. I want to have a custom icon for my plugin in admin menu, and I want it to integrate well with the color scheme.

I looked here https://codex.wordpress.org/Function_Reference/add_menu_page Under $icon_url

(WP 3.8+) If 'data:image/svg+xml;base64...', the specified SVG data image is used as a CSS background

However, if I put a URL to an SVG icon there, all I get is an img with SVG in its src attribute, so it doesn't integrate at all with the color scheme. It's supposed to be a CSS background.

Also, I don't understand this data:image/svg+xml;base64... What does it mean exactly?

I tried embedding inline SVG in the $icon_url but obviously, it won't work, but I just had to try it.

Dashicons are not an option, there's no icon there suitable for my project.

Answers


Step by Step example using FontAwesome:

Including color and custom post types 👍
1 Pick an icon
2 Get the SVG
Bring the SVG into Wordpress
  • Inside your functions.php, where you register your custom post type, add the following snippet:

    add_action('init', 'my_init');
    function my_init() {
        register_post_type('labs', [
            'label' => 'Labs',
            // .. ect
            'menu_icon' => 'data:image/svg+xml;base64,' . base64_encode('<svg width="20" height="20" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path fill="black" d="M1591 1448q56 89 21.5 152.5t-140.5 63.5h-1152q-106 0-140.5-63.5t21.5-152.5l503-793v-399h-64q-26 0-45-19t-19-45 19-45 45-19h512q26 0 45 19t19 45-19 45-45 19h-64v399zm-779-725l-272 429h712l-272-429-20-31v-436h-128v436z"/></svg>')
         ]);
    }
    

Important notes:

  • The contents of base64_encode is the copied raw string from Font Awesomes github page.
  • You need to change two small things within the svg string:
    • 1: Add a fill="black" attribute to the path/s elements - this allows the color to be change by Wordpress.
    • 2: (optional) Change the width and height to 20, as this is the admin width/height size and seems to result it a crisper result.


I got the solution by analyzing Woocommerce. If no url is supplied to the add_menu_page function, WordPress uses the default dashicon. So it's just a matter of overriding the default style. Like add this to admin styles:

#adminmenu #toplevel_page_yourpageid .menu-icon-generic div.wp-menu-image:before {
    font-family: your_font !important;
    content: '\eiconid';
    font-size: 1.3em!important;
}

I converted svg to font on Icomoon.


Just thought I should add the following:

To get the SVG to automatically re-colour to match the theme, it needs to have a fill attribute set. This is because it's dynamically altered through script, and it otherwise won't know what part to re-colour.


After you have converted the icondata in base 64, correct way to put it is like this;

The "," is important

'data:image/svg+xml;base64,'.$icon_data_in_base64

The svg file must have the fill attribute set in it to work. Open the svg file in an editor like Atom, and make sure it looks like this:

<path fill="black" d="....

You can put any kind of color you want in there, WordPress uses JS to automatically update the fill value based on the admin theme.


You have to paste a Base64 encoded image (data URI), into the src...

More on Wikipedia.


Need Your Help

Difference in c_str function specification between C++03 and C++11

c++ string c++11 c++03 c-str

In the C++ reference of c_str() in std::string the following appears:

"Link with editor" in android studio

android eclipse editor android-studio

What is the equivalent option in Android studio to Eclipse "Link with editor"?