How can I make my Admin Icon SVG color correctly? [closed]

by

I am trying to use my own Custom SVG Icon for WordPress admin menu icon.

Below is the contents of the SVG File:

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
    <svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5000 5000" preserveAspectRatio="xMidYMid meet">
    <path stroke="none" d="M1025 4033 c-131 -18 -314 -89 -435 -168 -93 -60 -252 -218 -309 -305 -127 -195 -181 -379 -181 -615 0 -313 101 -557 319 -776 152 -152 318 -246 517 -292 l91 -22 23 -60 c108 -286 359 -559 642 -698 192 -95 374 -137 598 -137 208 0 358 31 543 110 l90 39 66 -40 c36 -22 102 -52 146 -66 73 -25 93 -27 235 -27 142 0 162 2 235 27 44 14 109 43 143 64 69 41 169 127 203 174 l21 29 -179 -2 -178 -3 -41 55 c-52 70 -90 104 -187 173 -114 82 -290 162 -432 198 -44 11 -96 24 -115 29 l-35 9 3 312 3 311 37 -6 c80 -14 254 -70 408 -132 89 -35 164 -64 168 -64 3 0 6 304 6 675 l0 675 -350 0 -350 0 0 270 0 270 -837 -1 c-461 -1 -851 -4 -868 -6z"/>
    <path stroke="none" d="M4220 2705 c0 -584 3 -795 11 -795 7 0 52 21 101 47 265 140 461 387 545 689 26 92 28 112 28 289 0 177 -2 197 -27 288 -16 54 -47 139 -69 188 l-42 89 -273 0 -274 0 0 -795z"/>
</svg>

When I use the icon as an admin menu icon, it shows up in black.

Screenshot of Icon

I want the icon to color automatically like the other wordpress menu icons. I tried adding fill=”black” to my paths as per the advice found in this stack overflow exchange but it did not work. Is there something about my SVG that is causing this problem?

1 Answer
1

From Codex:

$icon_url
[…]
* Pass a base64-encoded SVG using a data URI, which will be colored to match the color scheme. This should begin with ‘data:image/svg+xml;base64,’.

WordPress will change color of your SVG if you use SVG content instead of the file URL. (JS code responsible for changing the color is in svg-painter.js file.)

You must add the fill attribute to path, otherwise the color will not be changed automatically by WP.

When you register a page with add_menu_page or add_submenu_page, add SVG data directly to $icon_url parameter.

Example:

Icon data:

//$myicon = base64encode(
//    '<svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5000 5000" preserveAspectRatio="xMidYMid meet" >'  
//        . '<path fill="black" stroke="none" d="M1025 4033 c-131 -18 -314 -89 -435 -168 -93 -60 -252 -218 -309 -305 -127 -195 -181 -379 -181 -615 0 -313 101 -557 319 -776 152 -152 318 -246 517 -292 l91 -22 23 -60 c108 -286 359 -559 642 -698 192 -95 374 -137 598 -137 208 0 358 31 543 110 l90 39 66 -40 c36 -22 102 -52 146 -66 73 -25 93 -27 235 -27 142 0 162 2 235 27 44 14 109 43 143 64 69 41 169 127 203 174 l21 29 -179 -2 -178 -3 -41 55 c-52 70 -90 104 -187 173 -114 82 -290 162 -432 198 -44 11 -96 24 -115 29 l-35 9 3 312 3 311 37 -6 c80 -14 254 -70 408 -132 89 -35 164 -64 168 -64 3 0 6 304 6 675 l0 675 -350 0 -350 0 0 270 0 270 -837 -1 c-461 -1 -851 -4 -868 -6z"/>'
//        . '<path fill="black" stroke="none" d="M4220 2705 c0 -584 3 -795 11 -795 7 0 52 21 101 47 265 140 461 387 545 689 26 92 28 112 28 289 0 177 -2 197 -27 288 -16 54 -47 139 -69 188 l-42 89 -273 0 -274 0 0 -795z"/>'
//    . '</svg> '
//);

// after encoding
$myicon = 'PHN2ZyB2ZXJzaW9uPSIxLjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDUwMDAgNTAwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgbWVldCI+CiAgICA8cGF0aCBmaWxsPSJibGFjayIgc3Ryb2tlPSJub25lIiBkPSJNMTAyNSA0MDMzIGMtMTMxIC0xOCAtMzE0IC04OSAtNDM1IC0xNjggLTkzIC02MCAtMjUyIC0yMTggLTMwOSAtMzA1IC0xMjcgLTE5NSAtMTgxIC0zNzkgLTE4MSAtNjE1IDAgLTMxMyAxMDEgLTU1NyAzMTkgLTc3NiAxNTIgLTE1MiAzMTggLTI0NiA1MTcgLTI5MiBsOTEgLTIyIDIzIC02MCBjMTA4IC0yODYgMzU5IC01NTkgNjQyIC02OTggMTkyIC05NSAzNzQgLTEzNyA1OTggLTEzNyAyMDggMCAzNTggMzEgNTQzIDExMCBsOTAgMzkgNjYgLTQwIGMzNiAtMjIgMTAyIC01MiAxNDYgLTY2IDczIC0yNSA5MyAtMjcgMjM1IC0yNyAxNDIgMCAxNjIgMiAyMzUgMjcgNDQgMTQgMTA5IDQzIDE0MyA2NCA2OSA0MSAxNjkgMTI3IDIwMyAxNzQgbDIxIDI5IC0xNzkgLTIgLTE3OCAtMyAtNDEgNTUgYy01MiA3MCAtOTAgMTA0IC0xODcgMTczIC0xMTQgODIgLTI5MCAxNjIgLTQzMiAxOTggLTQ0IDExIC05NiAyNCAtMTE1IDI5IGwtMzUgOSAzIDMxMiAzIDMxMSAzNyAtNiBjODAgLTE0IDI1NCAtNzAgNDA4IC0xMzIgODkgLTM1IDE2NCAtNjQgMTY4IC02NCAzIDAgNiAzMDQgNiA2NzUgbDAgNjc1IC0zNTAgMCAtMzUwIDAgMCAyNzAgMCAyNzAgLTgzNyAtMSBjLTQ2MSAtMSAtODUxIC00IC04NjggLTZ6Ii8+CiAgICA8cGF0aCBmaWxsPSJibGFjayIgc3Ryb2tlPSJub25lIiBkPSJNNDIyMCAyNzA1IGMwIC01ODQgMyAtNzk1IDExIC03OTUgNyAwIDUyIDIxIDEwMSA0NyAyNjUgMTQwIDQ2MSAzODcgNTQ1IDY4OSAyNiA5MiAyOCAxMTIgMjggMjg5IDAgMTc3IC0yIDE5NyAtMjcgMjg4IC0xNiA1NCAtNDcgMTM5IC02OSAxODggbC00MiA4OSAtMjczIDAgLTI3NCAwIDAgLTc5NXoiLz4KPC9zdmc+IA==';

Adding menu page with svg icon:

add_menu_page( $page_title, $menu_title, 
       $capability, $menu_slug, $callback,
       // your icon
       'data:image/svg+xml;base64,' . $myicon
);

Leave a Comment