web-dev-qa-db-fra.com

Comment créer correctement la couleur Admin Icon SVG?

J'essaie d'utiliser ma propre icône de menu SVG personnalisée pour Wordpress admin.

Vous trouverez ci-dessous le contenu du fichier SVG:

<!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>

Lorsque j'utilise l'icône en tant qu'icône de menu administrateur, elle s'affiche en noir.

 Screenshot of Icon 

Je veux que l’icône se colore automatiquement comme les autres icônes du menu wordpress. J'ai essayé d'ajouter fill = "black" à mes chemins conformément au conseil trouvé dans cet échange de débordement de pile mais cela n'a pas fonctionné. Y at-il quelque chose dans mon SVG qui cause ce problème?

wp-adminicon
3
Thomas Harris

Du Codex:

$ icon_url
[...]
* Passez un fichier SVG codé en base64 en utilisant un URI de données, qui sera coloré pour correspondre au jeu de couleurs. Cela devrait commencer par 'data: image/svg + xml; base64,'.

Wordpress changera la couleur de votre SVG si vous utilisez du contenu SVG au lieu de l'URL du fichier. (Le code JS responsable de la modification de la couleur est dans le fichier svg-Painter.js.)

Vous devez ajouter l'attribut fill à path, sinon la couleur ne sera pas modifiée automatiquement par WP.

Lorsque vous enregistrez une page avec add_menu_page ou add_submenu_page, ajoutez des données SVG directement au paramètre $icon_url.

Exemple :

Données d'icône:

//$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==';

Ajouter une page de menu avec l’icône svg:

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