Custom svg admin menu icon in WordPress

Question

I really count on your help in this. I searched a lot and did not find a solution. I want to have a custom icon for my plugin in the 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 data SVG image is used as CSS background

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

Also, I do not understand this data:image/svg+xml;base64... What does this mean?

I tried $icon_url built-in SVG in $icon_url , but obviously this will not work, but I just had to try it.

Dashikon is not an option, there is no icon suitable for my project.

Answer 1

I got a solution by analyzing Woocommerce. If the URL is for the add_menu_page function, WordPress uses the default dashicon. So it's just a matter of overriding the default style. How to 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.

Answer 2

Step by step using FontAwesome:

Including color and custom message types 👍

1 Select

• Go to: http://fontawesome.io/icons/
• Select the icon, I selected "fa-flask" for this example.

2 Get SVG

• Go to: https://github.com/encharm/Font-Awesome-SVG-PNG/tree/master/black/svg
• Find the icon, it will be the name without the fa prefix - in my case, that is, "flask.svg".
• Click the icon, then click "Raw" on Github

Bring SVG to Wordpress

• Inside functions.php , where you register your own message 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 content of base64_encode is the copied source string from the Awesomes github font page.
• You need to change two little things in the svg line:
  • 1: add the attribute fill="black" to the path / s elements - this allows you to change the color of Wordpress.
  • 2: (optional) Change the width and height to 20, as this is the size of the width / height of the administrator and seems to produce a sharp result.

Answer 3

Just thought I should add the following:

In order to get an SVG for automatic repeat color according to the theme, it must have the fill attribute set. This is due to the fact that it is dynamically changed through the script, and otherwise it will not know which part to repaint.

Answer 4

After you have converted icondata to base 64, the correct way to do this is as follows:

"Important"

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

Answer 5

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

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

You can put any color you need, WordPress uses JS to automatically update the fill value based on the admin theme.

Answer 6

You must insert a Base64 encoded image (data URI) into src ...

More details on Wikipedia .