Related
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.
Step by Step example using FontAwesome:
Including color and custom post types š
1 Pick an icon
Goto: http://fontawesome.io/icons/
Pick an icon, I have chosen "fa-flask" for this example.
2 Get the SVG
Goto: 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" in Github
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.
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
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.
Adding custom SVG icons.
I wanted my own custom SVG icon in my wordpress plugin, so had a look at this: https://developer.wordpress.org/reference/functions/add_menu_page/ and it all seems easy enough on paper. The guide tells you how to prepare the $icon_url parameter:
$icon_url (string) (Optional) The URL to the icon to be used for this
menu.
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,'.
However, I wrestled with this a bit and wanted to add in some notes when using the $icon_url parameter. From my experience and from looking on forums, using your custom icon isnāt as easy as just creating your SVG and encoding it. Hereās the step by step process to add custom SVG icon to the admin menu:
First, get or create your SVG icon in any way you want.
Next, clean up the SVG file and format it correctly
Then base64 encode the file
Prefix the base64 string with 'data:image/svg+xml;base64,'
...and that will give you a valid $icon_url string. Let me expand on those steps.
Step 1
You can create your SVG graphic in any way you want as far as I can see. I created mine in Adobe Illustrator, but anything like Inkscape, Corel draw, even hardcoding if you're comfortable with that.
Step 2
The most painful part is cleaning up your SVG. However I think this is also one of the most important parts. After a lot of testing and experimenting I found that the cleaner the SVG is, the more likely it is to work. A lot of graphics programs add in metadata and other fluff to make the SVG more widely compatible. Thatās great 99% of the time, but when using it for a wordpress menu icon, it often breaks, resulting in no icon being shown at all.
This is an example of an SVG exported normally from Adobe Illustrator:
<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0
15.7 16"><defs><style>.d{fill:#070707;}</style></defs><g id="a"/><g id="b"><g id="c"><path
class="d" d="M15.4,6.5H7.9v3h4.4c-.4,2.1-2.3,3.5-4.4,3.4-2.6-.1-4.6-2.1-4.7-4.7-.1-2.7,2-5
,4.7-5.1,1.1,0,2.2,.4,3.1,1.2l2.3-2.2c-1.4-1.4-3.4-2.1-5.3-2.1C3.6,0,0,3.6,0,8s3.6,8,8,8,
7.7-3.2,7.7-7.8c-.1-.6-.1-1.1-.3-1.7Z"/><path class="d" d="M15.4,6.5H7.9v3h4.4c-.4,2.1-2.3,
3.5-4.4,3.4-2.6-.1-4.6-2.1-4.7-4.7-.1-2.7,2-5,4.7-5.1,1.1,0,2.2,.4,3.1,1.2l2.3-2.2c-1.4-1.
4-3.4-2.1-5.3-2.1C3.6,0,0,3.6,0,8s3.6,8,8,8,7.7-3.2,7.7-7.8c-.1-.6-.1-1.1-.3-1.7Z"/></g>
</g></svg>
Messy, very messy. Even when we add some line breaks and indent it, thereās a lot going on.
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.7 16">
<defs>
<style>
.d{fill:#070707;}
</style>
</defs>
<g id="a"/>
<g id="b">
<g id="c">
<path class="d" d="M15.4,6.5H7.9v3h4.4c-.4,2.1-2.3,3.5-4.4,3.4-2.6-.1-4.6-2.1-4.7-4.7-.1-2.7,2-5,4.7-5.1,1.1,0,2.2,.4,3.1,1.2l2.3-2.2c-1.4-1.4-3.4-2.1-5.3-2.1C3.6,0,0,3.6,0,8s3.6,8,8,8,7.7-3.2,7.7-7.8c-.1-.6-.1-1.1-.3-1.7Z"/>
<path class="d" d="M15.4,6.5H7.9v3h4.4c-.4,2.1-2.3,3.5-4.4,3.4-2.6-.1-4.6-2.1-4.7-4.7-.1-2.7,2-5,4.7-5.1,1.1,0,2.2,.4,3.1,1.2l2.3-2.2c-1.4-1.4-3.4-2.1-5.3-2.1C3.6,0,0,3.6,0,8s3.6,8,8,8,7.7-3.2,7.7-7.8c-.1-.6-.1-1.1-.3-1.7Z"/>
</g>
</g>
</svg>
So what we want to do is clean this up a lot and get rid of unnecessary data. You may find that the above will load if you add it as an image source but it wonāt color properly with the GUI and it will probably be the wrong size. So thereās a few things we need to do:
Remove the <?xml tag, this wonāt help
Then you will have to hardcode each style into the path, rather then
using the tag. For each path, work out which classes apply to the
path from the tag, and add the CSS from those classes into the path.
Once thatās done, you can remove the defs element completely.
You can also remove the elements and leave the elements at the root
of the SVG.
To ensure your SVG is colored in line with the GUI, you will need to
add fill="black" to each path.
And then, to ensure your SVG is the right width and height, add
width="20" height="20" into the opening element
Once thatās done, my SVG file from above now looks like this:
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill="black" d="M17.6 8.5h-7.5v3h4.4c-.4 2.1-2.3 3.5-4.4 3.4-2.6-.1-4.6-2.1-4.7-4.7-.1-2.7 2-5 4.7-5.1 1.1 0 2.2.4 3.1 1.2l2.3-2.2C14.1 2.7 12.1 2 10.2 2c-4.4 0-8 3.6-8 8s3.6 8 8 8c4.6 0 7.7-3.2 7.7-7.8-.1-.6-.1-1.1-.3-1.7z" fillrule="evenodd" cliprule="evenodd">
</path>
</svg>
Step 3
Now you want to base64 encode your SVG. The way I did it was to pass the file into PHPās default encoding mechanism, and copy the path into my PHP as an absolute path. You donāt want PHP to read the SVG file, base64 encode it, and pass it to the menu everytime the user reloads the page, thatās just a waste of resources and time. Easy enough with PHP and shouldn't be a problem if you're a wordpress dev.
// load the SVG data by loading the file or including the XML directly.
$svg = file_get_contents('/path/to/icon.svg');
// or
$svg = '<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill="black" d="M17.6 8.5h-7.5v3h4.4c-.4 2.1-2.3 3.5-4.4 3.4-2.6-.1-4.6-2.1-4.7-4.7-.1-2.7 2-5 4.7-5.1 1.1 0 2.2.4 3.1 1.2l2.3-2.2C14.1 2.7 12.1 2 10.2 2c-4.4 0-8 3.6-8 8s3.6 8 8 8c4.6 0 7.7-3.2 7.7-7.8-.1-.6-.1-1.1-.3-1.7z" fillrule="evenodd" cliprule="evenodd"></path></svg>';
// then encode it and echo it out
echo base64_encode($svg);
// will give you a long string that looks like this:
// PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdib3g9IjAgMCAyMCAyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsPSIjYTdhYWFkIiBkPSJNMTcuNiA4LjVoLTcuNXYzaDQuNGMtLjQgMi4xLTIuMyAzLjUtNC40IDMuNC0yLjYtLjEtNC42LTIuMS00LjctNC43LS4xLTIuNyAyLTUgNC43LTUuMSAxLjEgMCAyLjIuNCAzLjEgMS4ybDIuMy0yLjJDMTQuMSAyLjcgMTIuMSAyIDEwLjIgMmMtNC40IDAtOCAzLjYtOCA4czMuNiA4IDggOGM0LjYgMCA3LjctMy4yIDcuNy03LjgtLjEtLjYtLjEtMS4xLS4zLTEuN3oiIGZpbGxydWxlPSJldmVub2RkIiBjbGlwcnVsZT0iZXZlbm9kZCI+PC9wYXRoPjwvc3ZnPg==
// thats your base64 encoded SVG file!
Step 4
Add ādata:image/svg+xml;ā in front of the base64 SVG so it looks like this:
"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdib3g9IjAgMCAyMCAyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsPSIjYTdhYWFkIiBkPSJNMTcuNiA4LjVoLTcuNXYzaDQuNGMtLjQgMi4xLTIuMyAzLjUtNC40IDMuNC0yLjYtLjEtNC42LTIuMS00LjctNC43LS4xLTIuNyAyLTUgNC43LTUuMSAxLjEgMCAyLjIuNCAzLjEgMS4ybDIuMy0yLjJDMTQuMSAyLjcgMTIuMSAyIDEwLjIgMmMtNC40IDAtOCAzLjYtOCA4czMuNiA4IDggOGM0LjYgMCA3LjctMy4yIDcuNy03LjgtLjEtLjYtLjEtMS4xLS4zLTEuN3oiIGZpbGxydWxlPSJldmVub2RkIiBjbGlwcnVsZT0iZXZlbm9kZCI+PC9wYXRoPjwvc3ZnPg=="
and that there, sir, is a perfectly valid $icon_url string. I would hard code that string to a variable and simply add it into your plugin every time.
add_menu_page( 'Plugin page name', 'Plugin', 'manage_options', "slug", 'callback','data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdib3g9IjAgMCAyMCAyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsPSIjYTdhYWFkIiBkPSJNMTcuNiA4LjVoLTcuNXYzaDQuNGMtLjQgMi4xLTIuMyAzLjUtNC40IDMuNC0yLjYtLjEtNC42LTIuMS00LjctNC43LS4xLTIuNyAyLTUgNC43LTUuMSAxLjEgMCAyLjIuNCAzLjEgMS4ybDIuMy0yLjJDMTQuMSAyLjcgMTIuMSAyIDEwLjIgMmMtNC40IDAtOCAzLjYtOCA4czMuNiA4IDggOGM0LjYgMCA3LjctMy4yIDcuNy03LjgtLjEtLjYtLjEtMS4xLS4zLTEuN3oiIGZpbGxydWxlPSJldmVub2RkIiBjbGlwcnVsZT0iZXZlbm9kZCI+PC9wYXRoPjwvc3ZnPg==', );
I hope that helps someone else, because that would have saved me several hours this morning!
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.
A third alternative to CSS or SVG import, is to convert the SVG image to Base64 and use the $icon_data_uri = 'data:image/svg+xml;base64,' . $icon_base64;
Disclaimer: I didn't make this solution, however I do want to share it.
Full credit should go to the editorial staff # https://daext.com/.
They made a lovely guide for generating a svg and applying it to Wordpress Admin Menu. Source
To convert SVG to Base64 visit: base64 and copy-paste the converted values into $icon_base64.
To ensure consistency, if links are broken, the main points are listed below:
Step 1) Create a new folder named "my_custom_plugin", and place it in: "/wp-content/plugins/{my_custom_plugin}"
Step 2) Create a ".php" file, within "my_custom_plugin" folder and name it e.g. "my-plugin.php"
Step 3) Copy paste following code below in to the file:
<?php
/*
* Plugin Name: Custom-Plugin
* Plugin URI:
* Description: Test Page.
* Version: 0.0.1
* Author:
* Author URI:
*/
add_action('admin_menu', 'function_create_menu');
// Create WordPress admin menu
function function_create_menu(){
//The icon in Base64 format
$icon_base64 = 'PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAyMTM0IDIxMzQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM6c2VyaWY9Imh0dHA6Ly93d3cuc2VyaWYuY29tLyIgc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxLjU7Ij48Zz48cmVjdCB4PSIyODIuNTc2IiB5PSI4OTAuODg2IiB3aWR0aD0iNzc1Ljc1OCIgaGVpZ2h0PSI3NzguNzgxIiBzdHlsZT0iZmlsbDojZmZmO2ZpbGwtb3BhY2l0eTowO3N0cm9rZTojMDAxZGZmO3N0cm9rZS13aWR0aDo2Ni42N3B4OyIvPjxyZWN0IHg9IjEwNzMuODkiIHk9Ijg5MC44ODYiIHdpZHRoPSI3NzUuNzU4IiBoZWlnaHQ9Ijc3OC43ODEiIHN0eWxlPSJmaWxsOiNmZmY7ZmlsbC1vcGFjaXR5OjA7c3Ryb2tlOiMwMDFkZmY7c3Ryb2tlLXdpZHRoOjY2LjY3cHg7Ii8+PHJlY3QgeD0iNjc4LjIzMiIgeT0iMTA2LjUzNyIgd2lkdGg9Ijc3NS43NTgiIGhlaWdodD0iNzc4Ljc4MSIgc3R5bGU9ImZpbGw6I2ZmZjtmaWxsLW9wYWNpdHk6MDtzdHJva2U6IzAwMWRmZjtzdHJva2Utd2lkdGg6NjYuNjdweDsiLz48cGF0aCBkPSJNMTE3My43MywzMy4zNjZsLTIxNS4yOTEsLTBsLTAsMzY3LjI0MWwxMDcuMTMxLC0xMTkuMTA2bDEwOC4xNiwxMTkuMTA2bC0wLC0zNjcuMjQxWiIgc3R5bGU9ImZpbGw6I2ZmZjtmaWxsLW9wYWNpdHk6MDtzdHJva2U6IzAwMWRmZjtzdHJva2Utd2lkdGg6NjYuNjdweDsiLz48cGF0aCBkPSJNNzgxLjg0OCw4OTQuMDc1bC0yMTUuMjkxLDBsLTAsMzUzLjc3MWwxMDcuMTMxLC0xMTQuNzM3bDEwOC4xNiwxMTQuNzM3bC0wLC0zNTMuNzcxWiIgc3R5bGU9ImZpbGw6I2ZmZjtmaWxsLW9wYWNpdHk6MDtzdHJva2U6IzAwMWRmZjtzdHJva2Utd2lkdGg6NjYuNjdweDsiLz48cGF0aCBkPSJNMTU2NC45OCw4OTUuNDc0bC0yMTUuMjkxLC0wbC0wLDM1My43NzFsMTA3LjEzLC0xMTQuNzM3bDEwOC4xNjEsMTE0LjczN2wtMCwtMzUzLjc3MVoiIHN0eWxlPSJmaWxsOiNmZmY7ZmlsbC1vcGFjaXR5OjA7c3Ryb2tlOiMwMDFkZmY7c3Ryb2tlLXdpZHRoOjY2LjY3cHg7Ii8+PHJlY3QgeD0iOTk2LjMwMiIgeT0iNTAxLjQ5NyIgd2lkdGg9IjEzOS41NjEiIGhlaWdodD0iNjQuMjMxIiBzdHlsZT0iZmlsbDojMDAxZGZmO3N0cm9rZTojMDAxZGZmO3N0cm9rZS13aWR0aDoxMS42M3B4OyIvPjxyZWN0IHg9IjYwNC40MjIiIHk9IjEzNTUuODkiIHdpZHRoPSIxMzkuNTYxIiBoZWlnaHQ9IjY0LjIzMSIgc3R5bGU9ImZpbGw6IzAwMWRmZjtzdHJva2U6IzAwMWRmZjtzdHJva2Utd2lkdGg6MTEuNjNweDsiLz48cmVjdCB4PSIxMzg3LjU1IiB5PSIxMzU1Ljg5IiB3aWR0aD0iMTM5LjU2MSIgaGVpZ2h0PSI2NC4yMzEiIHN0eWxlPSJmaWxsOiMwMDFkZmY7c3Ryb2tlOiMwMDFkZmY7c3Ryb2tlLXdpZHRoOjExLjYzcHg7Ii8+PHJlY3QgeD0iMTQxLjAzOCIgeT0iMTY3MS4yOCIgd2lkdGg9IjE4NDcuMDMiIGhlaWdodD0iMTQyLjg0IiBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTojMDAxZGZmO3N0cm9rZS13aWR0aDo2Ni42N3B4OyIvPjxyZWN0IHg9IjE0MC4wMDMiIHk9IjE5NTUuNDMiIHdpZHRoPSIxODQ5LjEiIGhlaWdodD0iMTQyLjg0IiBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTojMDAxZGZmO3N0cm9rZS13aWR0aDo2Ni42N3B4OyIvPjxyZWN0IHg9IjIxMy4yMzYiIHk9IjE4MTMuNyIgd2lkdGg9IjE0Mi40MTIiIGhlaWdodD0iMTQxLjQ3OSIgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6IzAwMWRmZjtzdHJva2Utd2lkdGg6NjYuNjdweDsiLz48cmVjdCB4PSI5OTUuOTIxIiB5PSIxODEzLjciIHdpZHRoPSIxNDIuNDEyIiBoZWlnaHQ9IjE0MS40NzkiIHN0eWxlPSJmaWxsOm5vbmU7c3Ryb2tlOiMwMDFkZmY7c3Ryb2tlLXdpZHRoOjY2LjY3cHg7Ii8+PHJlY3QgeD0iMTc3OC42MSIgeT0iMTgxMy43IiB3aWR0aD0iMTQyLjQxMiIgaGVpZ2h0PSIxNDEuNDc5IiBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTojMDAxZGZmO3N0cm9rZS13aWR0aDo2Ni42N3B4OyIvPjwvZz48L3N2Zz4=';
//The icon in the data URI scheme
$icon_data_uri = 'data:image/svg+xml;base64,' . $icon_base64;
$page_title = 'Hello World';
$menu_title = 'My Admin Menu';
$icon_data_uri;
$position = '20';
$capability = 'manage_options';
$menu_slug = 'newPage';
$function = 'test_page';
add_menu_page(
$page_title,
$menu_title,
$capability,
$menu_slug,
$function,
$icon_data_uri,
$position
);
}
// Create WordPress plugin page
function test_page()
{
?>
<h1>WordPress test site</h1>
<?php
}
?>
Step 4) go to the dashbord of Wordpress, and "activate" the plugin: "plugin"->"installed plugin". Look for the Plugin Name: "Custom-Plugin". Which where assigned at the top of the plugin file in "my-plugin.php"
This should give an idea on how to get started using plugins. However, please remember, that some features should only be initiated once to ensure a good user experience. Plugin Handbook
You have to paste a Base64 encoded image (data URI), into the src...
More on Wikipedia.
I am trying to add an image inside a table in XSL:FO, but the image is not reflecting in the PDF.
<fo:table-cell border-style="solid" border-color="black" border-width="0.4pt" number-columns-spanned="1" text-align="center" display-align="center">
<fo:block font-family="isocpeur" line-height="12pt" font-size="12pt" font-weight="bold" space-before.optimum="1.5pt" space-after.optimum="1.5pt" keep-together="always">
<fo:external-graphic
content-width="scale-down-to-fit"
content-height="scale-down-to-fit"
scaling="uniform"
src="src\com\createpdf\image\LOGO.png"/>
</fo:block>
</fo:table-cell>
You've specified a relative path. The FO processor evaluates this path based on the directory where the XSLFO file resides.
To remove ambiguity, use an absolute path instead (i.e. starting with the drive letter, C:\folder\ etc.)
You haven't specified a size for the image. I suspect content-width="scale-down-to-fit" needs a size to scale to.
<fo:external-graphic width="1cm"...
And what are the symptoms/what do you see in the PDF? In Antennahouse Formatter, if it can't find an image, it will place a placeholder. That helps narrow down the problem.
I'm trying to use a symbol from my defs.svg as a background image in CSS, as opposed to a direct path to an individual SVG file.
So instead of:
background: url(spoon.svg);
I want to do something like this:
background: url(defs.svg#spoon);
With #spoon being a symbol in defs.svg with id="spoon". Unfortunately, this isn't working for me. Has anyone come across a solution that doesn't involve custom JS/etc?
You'd need to define view and use tags inside your defs.svg so CSS would know where to look and what to show.
So, for example, say you have inside your SVG a symbol defined as this:
<symbol id="poop" viewBox="0 0 100 100">
<!-- Your shapes here -->
</symbol>
And before closing the svg tag, you must add the view and use defining tags:
<view id="poop-view" viewBox="0 0 100 100" /><!-- This ID used here is what you'll use in your CSS! -->
<use xlink:href="poop" width="100" height="100" x="0" y="0"></use>
Note that at this point, you can open your raw SVG file in a browser and it will show your drawing - before it showed blank!
And now you can set your SVG symbol in your CSS:
div{background-image:url("defs.svg#poop-view")} /* Remember, it's the ID used on your <view> def! */
Also, be sure your SVG includes a xmlns:xlink namespace on the opening tag, or it won't be supposed to work.
Disclaimer: I'm trying to use this setup at work hosting the SVG file on a server on my university, but for some reason this doesn't work (even SVG files won't show if <?xml>and <!DOCTYPE> tags are missing on the SVG), so be sure to check the sanity of your SVG file.
Find more about this on Jennifer Hiller's codepen blog.
I got the Salesforce Design System pilot from this morning's Webinar. I uploaded the package (as 'sds.zip') as a static resource. I'm calling the CSS (immediately after '' in the .cmp file) with:
<link href='/resource/sds/index.scss' rel="stylesheet"/>
However when I attempt to save I get the error:
Failed to save undefined: No COMPONENT named markup://use found : [markup://c:contactList]: Source
āI think the 'use' error is a refrence to this code block, which is later in the .cmp file:
<svg aria-hidden="true" class="icon icon--large icon-standard-user">
<use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#user" />
</svg>
I assume I'm importing the CSS incorrectly, what's the right way to do it?
You are importing the CSS correctly. That's the way to do it from inside a Lightning Component. From inside a Visualforce page you do <apex:stylesheet value="{!URLFOR($Resource.sds, '/resource/sds/index.css')}" />.
The problem is not the CSS import but VF not understanding the use and svg tags inside the component. For Visualforce to properly parse the tags you need to declare the namespace by adding the line <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">, with its matching closing tag at the end. This works fine if you just put it in VF, and you are using the svg tag in VF.
However, if you are putting the svg tag inside a Lightning Component, you need to create a separate svg component for it, as described in this tutorial.
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.
Step by Step example using FontAwesome:
Including color and custom post types š
1 Pick an icon
Goto: http://fontawesome.io/icons/
Pick an icon, I have chosen "fa-flask" for this example.
2 Get the SVG
Goto: 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" in Github
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.
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
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.
Adding custom SVG icons.
I wanted my own custom SVG icon in my wordpress plugin, so had a look at this: https://developer.wordpress.org/reference/functions/add_menu_page/ and it all seems easy enough on paper. The guide tells you how to prepare the $icon_url parameter:
$icon_url (string) (Optional) The URL to the icon to be used for this
menu.
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,'.
However, I wrestled with this a bit and wanted to add in some notes when using the $icon_url parameter. From my experience and from looking on forums, using your custom icon isnāt as easy as just creating your SVG and encoding it. Hereās the step by step process to add custom SVG icon to the admin menu:
First, get or create your SVG icon in any way you want.
Next, clean up the SVG file and format it correctly
Then base64 encode the file
Prefix the base64 string with 'data:image/svg+xml;base64,'
...and that will give you a valid $icon_url string. Let me expand on those steps.
Step 1
You can create your SVG graphic in any way you want as far as I can see. I created mine in Adobe Illustrator, but anything like Inkscape, Corel draw, even hardcoding if you're comfortable with that.
Step 2
The most painful part is cleaning up your SVG. However I think this is also one of the most important parts. After a lot of testing and experimenting I found that the cleaner the SVG is, the more likely it is to work. A lot of graphics programs add in metadata and other fluff to make the SVG more widely compatible. Thatās great 99% of the time, but when using it for a wordpress menu icon, it often breaks, resulting in no icon being shown at all.
This is an example of an SVG exported normally from Adobe Illustrator:
<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0
15.7 16"><defs><style>.d{fill:#070707;}</style></defs><g id="a"/><g id="b"><g id="c"><path
class="d" d="M15.4,6.5H7.9v3h4.4c-.4,2.1-2.3,3.5-4.4,3.4-2.6-.1-4.6-2.1-4.7-4.7-.1-2.7,2-5
,4.7-5.1,1.1,0,2.2,.4,3.1,1.2l2.3-2.2c-1.4-1.4-3.4-2.1-5.3-2.1C3.6,0,0,3.6,0,8s3.6,8,8,8,
7.7-3.2,7.7-7.8c-.1-.6-.1-1.1-.3-1.7Z"/><path class="d" d="M15.4,6.5H7.9v3h4.4c-.4,2.1-2.3,
3.5-4.4,3.4-2.6-.1-4.6-2.1-4.7-4.7-.1-2.7,2-5,4.7-5.1,1.1,0,2.2,.4,3.1,1.2l2.3-2.2c-1.4-1.
4-3.4-2.1-5.3-2.1C3.6,0,0,3.6,0,8s3.6,8,8,8,7.7-3.2,7.7-7.8c-.1-.6-.1-1.1-.3-1.7Z"/></g>
</g></svg>
Messy, very messy. Even when we add some line breaks and indent it, thereās a lot going on.
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.7 16">
<defs>
<style>
.d{fill:#070707;}
</style>
</defs>
<g id="a"/>
<g id="b">
<g id="c">
<path class="d" d="M15.4,6.5H7.9v3h4.4c-.4,2.1-2.3,3.5-4.4,3.4-2.6-.1-4.6-2.1-4.7-4.7-.1-2.7,2-5,4.7-5.1,1.1,0,2.2,.4,3.1,1.2l2.3-2.2c-1.4-1.4-3.4-2.1-5.3-2.1C3.6,0,0,3.6,0,8s3.6,8,8,8,7.7-3.2,7.7-7.8c-.1-.6-.1-1.1-.3-1.7Z"/>
<path class="d" d="M15.4,6.5H7.9v3h4.4c-.4,2.1-2.3,3.5-4.4,3.4-2.6-.1-4.6-2.1-4.7-4.7-.1-2.7,2-5,4.7-5.1,1.1,0,2.2,.4,3.1,1.2l2.3-2.2c-1.4-1.4-3.4-2.1-5.3-2.1C3.6,0,0,3.6,0,8s3.6,8,8,8,7.7-3.2,7.7-7.8c-.1-.6-.1-1.1-.3-1.7Z"/>
</g>
</g>
</svg>
So what we want to do is clean this up a lot and get rid of unnecessary data. You may find that the above will load if you add it as an image source but it wonāt color properly with the GUI and it will probably be the wrong size. So thereās a few things we need to do:
Remove the <?xml tag, this wonāt help
Then you will have to hardcode each style into the path, rather then
using the tag. For each path, work out which classes apply to the
path from the tag, and add the CSS from those classes into the path.
Once thatās done, you can remove the defs element completely.
You can also remove the elements and leave the elements at the root
of the SVG.
To ensure your SVG is colored in line with the GUI, you will need to
add fill="black" to each path.
And then, to ensure your SVG is the right width and height, add
width="20" height="20" into the opening element
Once thatās done, my SVG file from above now looks like this:
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill="black" d="M17.6 8.5h-7.5v3h4.4c-.4 2.1-2.3 3.5-4.4 3.4-2.6-.1-4.6-2.1-4.7-4.7-.1-2.7 2-5 4.7-5.1 1.1 0 2.2.4 3.1 1.2l2.3-2.2C14.1 2.7 12.1 2 10.2 2c-4.4 0-8 3.6-8 8s3.6 8 8 8c4.6 0 7.7-3.2 7.7-7.8-.1-.6-.1-1.1-.3-1.7z" fillrule="evenodd" cliprule="evenodd">
</path>
</svg>
Step 3
Now you want to base64 encode your SVG. The way I did it was to pass the file into PHPās default encoding mechanism, and copy the path into my PHP as an absolute path. You donāt want PHP to read the SVG file, base64 encode it, and pass it to the menu everytime the user reloads the page, thatās just a waste of resources and time. Easy enough with PHP and shouldn't be a problem if you're a wordpress dev.
// load the SVG data by loading the file or including the XML directly.
$svg = file_get_contents('/path/to/icon.svg');
// or
$svg = '<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill="black" d="M17.6 8.5h-7.5v3h4.4c-.4 2.1-2.3 3.5-4.4 3.4-2.6-.1-4.6-2.1-4.7-4.7-.1-2.7 2-5 4.7-5.1 1.1 0 2.2.4 3.1 1.2l2.3-2.2C14.1 2.7 12.1 2 10.2 2c-4.4 0-8 3.6-8 8s3.6 8 8 8c4.6 0 7.7-3.2 7.7-7.8-.1-.6-.1-1.1-.3-1.7z" fillrule="evenodd" cliprule="evenodd"></path></svg>';
// then encode it and echo it out
echo base64_encode($svg);
// will give you a long string that looks like this:
// PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdib3g9IjAgMCAyMCAyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsPSIjYTdhYWFkIiBkPSJNMTcuNiA4LjVoLTcuNXYzaDQuNGMtLjQgMi4xLTIuMyAzLjUtNC40IDMuNC0yLjYtLjEtNC42LTIuMS00LjctNC43LS4xLTIuNyAyLTUgNC43LTUuMSAxLjEgMCAyLjIuNCAzLjEgMS4ybDIuMy0yLjJDMTQuMSAyLjcgMTIuMSAyIDEwLjIgMmMtNC40IDAtOCAzLjYtOCA4czMuNiA4IDggOGM0LjYgMCA3LjctMy4yIDcuNy03LjgtLjEtLjYtLjEtMS4xLS4zLTEuN3oiIGZpbGxydWxlPSJldmVub2RkIiBjbGlwcnVsZT0iZXZlbm9kZCI+PC9wYXRoPjwvc3ZnPg==
// thats your base64 encoded SVG file!
Step 4
Add ādata:image/svg+xml;ā in front of the base64 SVG so it looks like this:
"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdib3g9IjAgMCAyMCAyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsPSIjYTdhYWFkIiBkPSJNMTcuNiA4LjVoLTcuNXYzaDQuNGMtLjQgMi4xLTIuMyAzLjUtNC40IDMuNC0yLjYtLjEtNC42LTIuMS00LjctNC43LS4xLTIuNyAyLTUgNC43LTUuMSAxLjEgMCAyLjIuNCAzLjEgMS4ybDIuMy0yLjJDMTQuMSAyLjcgMTIuMSAyIDEwLjIgMmMtNC40IDAtOCAzLjYtOCA4czMuNiA4IDggOGM0LjYgMCA3LjctMy4yIDcuNy03LjgtLjEtLjYtLjEtMS4xLS4zLTEuN3oiIGZpbGxydWxlPSJldmVub2RkIiBjbGlwcnVsZT0iZXZlbm9kZCI+PC9wYXRoPjwvc3ZnPg=="
and that there, sir, is a perfectly valid $icon_url string. I would hard code that string to a variable and simply add it into your plugin every time.
add_menu_page( 'Plugin page name', 'Plugin', 'manage_options', "slug", 'callback','data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdib3g9IjAgMCAyMCAyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsPSIjYTdhYWFkIiBkPSJNMTcuNiA4LjVoLTcuNXYzaDQuNGMtLjQgMi4xLTIuMyAzLjUtNC40IDMuNC0yLjYtLjEtNC42LTIuMS00LjctNC43LS4xLTIuNyAyLTUgNC43LTUuMSAxLjEgMCAyLjIuNCAzLjEgMS4ybDIuMy0yLjJDMTQuMSAyLjcgMTIuMSAyIDEwLjIgMmMtNC40IDAtOCAzLjYtOCA4czMuNiA4IDggOGM0LjYgMCA3LjctMy4yIDcuNy03LjgtLjEtLjYtLjEtMS4xLS4zLTEuN3oiIGZpbGxydWxlPSJldmVub2RkIiBjbGlwcnVsZT0iZXZlbm9kZCI+PC9wYXRoPjwvc3ZnPg==', );
I hope that helps someone else, because that would have saved me several hours this morning!
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.
A third alternative to CSS or SVG import, is to convert the SVG image to Base64 and use the $icon_data_uri = 'data:image/svg+xml;base64,' . $icon_base64;
Disclaimer: I didn't make this solution, however I do want to share it.
Full credit should go to the editorial staff # https://daext.com/.
They made a lovely guide for generating a svg and applying it to Wordpress Admin Menu. Source
To convert SVG to Base64 visit: base64 and copy-paste the converted values into $icon_base64.
To ensure consistency, if links are broken, the main points are listed below:
Step 1) Create a new folder named "my_custom_plugin", and place it in: "/wp-content/plugins/{my_custom_plugin}"
Step 2) Create a ".php" file, within "my_custom_plugin" folder and name it e.g. "my-plugin.php"
Step 3) Copy paste following code below in to the file:
<?php
/*
* Plugin Name: Custom-Plugin
* Plugin URI:
* Description: Test Page.
* Version: 0.0.1
* Author:
* Author URI:
*/
add_action('admin_menu', 'function_create_menu');
// Create WordPress admin menu
function function_create_menu(){
//The icon in Base64 format
$icon_base64 = 'PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAyMTM0IDIxMzQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM6c2VyaWY9Imh0dHA6Ly93d3cuc2VyaWYuY29tLyIgc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxLjU7Ij48Zz48cmVjdCB4PSIyODIuNTc2IiB5PSI4OTAuODg2IiB3aWR0aD0iNzc1Ljc1OCIgaGVpZ2h0PSI3NzguNzgxIiBzdHlsZT0iZmlsbDojZmZmO2ZpbGwtb3BhY2l0eTowO3N0cm9rZTojMDAxZGZmO3N0cm9rZS13aWR0aDo2Ni42N3B4OyIvPjxyZWN0IHg9IjEwNzMuODkiIHk9Ijg5MC44ODYiIHdpZHRoPSI3NzUuNzU4IiBoZWlnaHQ9Ijc3OC43ODEiIHN0eWxlPSJmaWxsOiNmZmY7ZmlsbC1vcGFjaXR5OjA7c3Ryb2tlOiMwMDFkZmY7c3Ryb2tlLXdpZHRoOjY2LjY3cHg7Ii8+PHJlY3QgeD0iNjc4LjIzMiIgeT0iMTA2LjUzNyIgd2lkdGg9Ijc3NS43NTgiIGhlaWdodD0iNzc4Ljc4MSIgc3R5bGU9ImZpbGw6I2ZmZjtmaWxsLW9wYWNpdHk6MDtzdHJva2U6IzAwMWRmZjtzdHJva2Utd2lkdGg6NjYuNjdweDsiLz48cGF0aCBkPSJNMTE3My43MywzMy4zNjZsLTIxNS4yOTEsLTBsLTAsMzY3LjI0MWwxMDcuMTMxLC0xMTkuMTA2bDEwOC4xNiwxMTkuMTA2bC0wLC0zNjcuMjQxWiIgc3R5bGU9ImZpbGw6I2ZmZjtmaWxsLW9wYWNpdHk6MDtzdHJva2U6IzAwMWRmZjtzdHJva2Utd2lkdGg6NjYuNjdweDsiLz48cGF0aCBkPSJNNzgxLjg0OCw4OTQuMDc1bC0yMTUuMjkxLDBsLTAsMzUzLjc3MWwxMDcuMTMxLC0xMTQuNzM3bDEwOC4xNiwxMTQuNzM3bC0wLC0zNTMuNzcxWiIgc3R5bGU9ImZpbGw6I2ZmZjtmaWxsLW9wYWNpdHk6MDtzdHJva2U6IzAwMWRmZjtzdHJva2Utd2lkdGg6NjYuNjdweDsiLz48cGF0aCBkPSJNMTU2NC45OCw4OTUuNDc0bC0yMTUuMjkxLC0wbC0wLDM1My43NzFsMTA3LjEzLC0xMTQuNzM3bDEwOC4xNjEsMTE0LjczN2wtMCwtMzUzLjc3MVoiIHN0eWxlPSJmaWxsOiNmZmY7ZmlsbC1vcGFjaXR5OjA7c3Ryb2tlOiMwMDFkZmY7c3Ryb2tlLXdpZHRoOjY2LjY3cHg7Ii8+PHJlY3QgeD0iOTk2LjMwMiIgeT0iNTAxLjQ5NyIgd2lkdGg9IjEzOS41NjEiIGhlaWdodD0iNjQuMjMxIiBzdHlsZT0iZmlsbDojMDAxZGZmO3N0cm9rZTojMDAxZGZmO3N0cm9rZS13aWR0aDoxMS42M3B4OyIvPjxyZWN0IHg9IjYwNC40MjIiIHk9IjEzNTUuODkiIHdpZHRoPSIxMzkuNTYxIiBoZWlnaHQ9IjY0LjIzMSIgc3R5bGU9ImZpbGw6IzAwMWRmZjtzdHJva2U6IzAwMWRmZjtzdHJva2Utd2lkdGg6MTEuNjNweDsiLz48cmVjdCB4PSIxMzg3LjU1IiB5PSIxMzU1Ljg5IiB3aWR0aD0iMTM5LjU2MSIgaGVpZ2h0PSI2NC4yMzEiIHN0eWxlPSJmaWxsOiMwMDFkZmY7c3Ryb2tlOiMwMDFkZmY7c3Ryb2tlLXdpZHRoOjExLjYzcHg7Ii8+PHJlY3QgeD0iMTQxLjAzOCIgeT0iMTY3MS4yOCIgd2lkdGg9IjE4NDcuMDMiIGhlaWdodD0iMTQyLjg0IiBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTojMDAxZGZmO3N0cm9rZS13aWR0aDo2Ni42N3B4OyIvPjxyZWN0IHg9IjE0MC4wMDMiIHk9IjE5NTUuNDMiIHdpZHRoPSIxODQ5LjEiIGhlaWdodD0iMTQyLjg0IiBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTojMDAxZGZmO3N0cm9rZS13aWR0aDo2Ni42N3B4OyIvPjxyZWN0IHg9IjIxMy4yMzYiIHk9IjE4MTMuNyIgd2lkdGg9IjE0Mi40MTIiIGhlaWdodD0iMTQxLjQ3OSIgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6IzAwMWRmZjtzdHJva2Utd2lkdGg6NjYuNjdweDsiLz48cmVjdCB4PSI5OTUuOTIxIiB5PSIxODEzLjciIHdpZHRoPSIxNDIuNDEyIiBoZWlnaHQ9IjE0MS40NzkiIHN0eWxlPSJmaWxsOm5vbmU7c3Ryb2tlOiMwMDFkZmY7c3Ryb2tlLXdpZHRoOjY2LjY3cHg7Ii8+PHJlY3QgeD0iMTc3OC42MSIgeT0iMTgxMy43IiB3aWR0aD0iMTQyLjQxMiIgaGVpZ2h0PSIxNDEuNDc5IiBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTojMDAxZGZmO3N0cm9rZS13aWR0aDo2Ni42N3B4OyIvPjwvZz48L3N2Zz4=';
//The icon in the data URI scheme
$icon_data_uri = 'data:image/svg+xml;base64,' . $icon_base64;
$page_title = 'Hello World';
$menu_title = 'My Admin Menu';
$icon_data_uri;
$position = '20';
$capability = 'manage_options';
$menu_slug = 'newPage';
$function = 'test_page';
add_menu_page(
$page_title,
$menu_title,
$capability,
$menu_slug,
$function,
$icon_data_uri,
$position
);
}
// Create WordPress plugin page
function test_page()
{
?>
<h1>WordPress test site</h1>
<?php
}
?>
Step 4) go to the dashbord of Wordpress, and "activate" the plugin: "plugin"->"installed plugin". Look for the Plugin Name: "Custom-Plugin". Which where assigned at the top of the plugin file in "my-plugin.php"
This should give an idea on how to get started using plugins. However, please remember, that some features should only be initiated once to ensure a good user experience. Plugin Handbook
You have to paste a Base64 encoded image (data URI), into the src...
More on Wikipedia.