Skip to content

Instantly share code, notes, and snippets.

@zgordon
Last active January 2, 2022 19:56
Show Gist options
  • Save zgordon/e837e29f77c343d29ebb7290a1a75eea to your computer and use it in GitHub Desktop.
Save zgordon/e837e29f77c343d29ebb7290a1a75eea to your computer and use it in GitHub Desktop.
Example for how to create use a custom SVG icon for a block in Gutenberg
// Import __ from i18n internationalization library
const { __ } = wp.i18n;
// Import registerBlockType() from block building libary
const { registerBlockType } = wp.blocks;
// Import the element creator function (React abstraction layer)
const el = wp.element.createElement;
/**
* Example of a custom SVG path taken from fontastic
*/
const iconEl = el('svg', { width: 20, height: 20 },
el('path', { d: "M12.5,12H12v-0.5c0-0.3-0.2-0.5-0.5-0.5H11V6h1l1-2c-1,0.1-2,0.1-3,0C9.2,3.4,8.6,2.8,8,2V1.5C8,1.2,7.8,1,7.5,1 S7,1.2,7,1.5V2C6.4,2.8,5.8,3.4,5,4C4,4.1,3,4.1,2,4l1,2h1v5c0,0-0.5,0-0.5,0C3.2,11,3,11.2,3,11.5V12H2.5C2.2,12,2,12.2,2,12.5V13 h11v-0.5C13,12.2,12.8,12,12.5,12z M7,11H5V6h2V11z M10,11H8V6h2V11z" } )
);
/**
* Register Block using a custom icon.
*
* @param {String} name Block name, namespaced
* @param {Object} settings Block settings
* @return {?WPBlock} Return the block or 'undefined'
*/
registerBlockType('js4wpgb/static-content', {
title: __('Custom Block', 'JS4WPGB'),
icon: iconEl,
category: 'common',
edit( props ) {
return el('p', {}, 'Hello world!');
},
save( props ) {
return el('p', {}, 'Hello world!');
}
});
@alexmustin
Copy link

alexmustin commented Aug 15, 2019

Here's another method that works using the built-in 'Icon' component:

// Import 'Icon' from default components
const { Icon } = wp.components;

// SVG icon
const iconEl = () => (
    <Icon icon={ <svg><path d="M10 2C4.478 2 0 5.425 0 9.646c0 1.404.503 2.717 1.366 3.846L.032 18 5.6 16.508c1.329.499 2.818.787 4.4.787 5.523 0 10-3.424 10-7.648C20 5.425 15.523 2 10 2zm-3.978 8.51c-.671 0-1.216-.547-1.216-1.223s.545-1.223 1.216-1.223c.673 0 1.217.547 1.217 1.223s-.544 1.223-1.217 1.223zm3.731 0c-.672 0-1.217-.547-1.217-1.223s.545-1.223 1.217-1.223 1.216.547 1.216 1.223-.544 1.223-1.216 1.223zm3.809 0c-.67 0-1.215-.547-1.215-1.223s.545-1.223 1.215-1.223c.674 0 1.217.547 1.217 1.223s-.543 1.223-1.217 1.223z" /></svg> } />
);

@nerdess
Copy link

nerdess commented Oct 15, 2020

if u want to use sth like a png or jpg simple base64-encode it, e.g. so:

const iconEl = el('img', {src: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgd2lkdGg9IjM4OXB4IiBoZWlnaHQ9IjM4OXB4IiB2aWV3Qm94PSIwIDAgMzg5IDM4OSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMzg5IDM4OTsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPGc+DQoJCTxnPg0KCQkJPHBhdGggZD0iTTM3OSwzMjYuMDM1aC0xOC44NTJjLTUuNTIyLDAtMTAsNC40NzctMTAsMTB2MTQuMTExaC0xNC4xMTNjLTUuNTIyLDAtMTAsNC40NzctMTAsMTBWMzc5YzAsNS41MjMsNC40NzgsMTAsMTAsMTBIMzc5DQoJCQkJYzUuNTIyLDAsMTAtNC40NzcsMTAtMTB2LTQyLjk2NUMzODksMzMwLjUxMiwzODQuNTIyLDMyNi4wMzUsMzc5LDMyNi4wMzV6Ii8+DQoJCQk8cGF0aCBkPSJNMTY2LjkyNywzNTAuMTQ2aC01OC44MTNjLTUuNTIyLDAtMTAsNC40NzctMTAsMTBWMzc5YzAsNS41MjMsNC40NzgsMTAsMTAsMTBoNTguODEzYzUuNTIyLDAsMTAtNC40NzcsMTAtMTB2LTE4Ljg1NA0KCQkJCUMxNzYuOTI3LDM1NC42MjMsMTcyLjQ0OSwzNTAuMTQ2LDE2Ni45MjcsMzUwLjE0NnoiLz4NCgkJCTxwYXRoIGQ9Ik0yODAuODg3LDM1MC4xNDZoLTU4LjgxMmMtNS41MjMsMC0xMCw0LjQ3Ny0xMCwxMFYzNzljMCw1LjUyMyw0LjQ3NywxMCwxMCwxMGg1OC44MTJjNS41MjIsMCwxMC00LjQ3NywxMC0xMHYtMTguODU0DQoJCQkJQzI5MC44ODcsMzU0LjYyMywyODYuNDA5LDM1MC4xNDYsMjgwLjg4NywzNTAuMTQ2eiIvPg0KCQkJPHBhdGggZD0iTTUyLjk2NSwzNTAuMTQ2SDM4Ljg1MnYtMTQuMTExYzAtNS41MjMtNC40NzgtMTAtMTAtMTBIMTBjLTUuNTIyLDAtMTAsNC40NzctMTAsMTBWMzc5YzAsNS41MjMsNC40NzgsMTAsMTAsMTBoNDIuOTY1DQoJCQkJYzUuNTIxLDAsMTAtNC40NzcsMTAtMTB2LTE4Ljg1NEM2Mi45NjUsMzU0LjYyMyw1OC40ODYsMzUwLjE0Niw1Mi45NjUsMzUwLjE0NnoiLz4NCgkJCTxwYXRoIGQ9Ik0xMCwyOTAuODg2aDE4Ljg1MmM1LjUyMiwwLDEwLTQuNDc3LDEwLTEwdi01OC44MTJjMC01LjUyMy00LjQ3OC0xMC0xMC0xMEgxMGMtNS41MjIsMC0xMCw0LjQ3Ny0xMCwxMHY1OC44MTINCgkJCQlDMCwyODYuNDA5LDQuNDc4LDI5MC44ODYsMTAsMjkwLjg4NnoiLz4NCgkJCTxwYXRoIGQ9Ik0xMCwxNzYuOTI2aDE4Ljg1MmM1LjUyMiwwLDEwLTQuNDc3LDEwLTEwdi01OC44MTJjMC01LjUyMy00LjQ3OC0xMC0xMC0xMEgxMGMtNS41MjIsMC0xMCw0LjQ3Ny0xMCwxMHY1OC44MTINCgkJCQlDMCwxNzIuNDQ5LDQuNDc4LDE3Ni45MjYsMTAsMTc2LjkyNnoiLz4NCgkJCTxwYXRoIGQ9Ik01Mi45NjUsMEgxMEM0LjQ3OCwwLDAsNC40NzcsMCwxMHY0Mi45NjdjMCw1LjUyMyw0LjQ3OCwxMCwxMCwxMGgxOC44NTJjNS41MjIsMCwxMC00LjQ3NywxMC0xMFYzOC44NTRoMTQuMTEzDQoJCQkJYzUuNTIxLDAsMTAtNC40NzcsMTAtMTBWMTBDNjIuOTY1LDQuNDc4LDU4LjQ4NiwwLDUyLjk2NSwweiIvPg0KCQkJPHBhdGggZD0iTTI4MC44ODcsMGgtNTguODEyYy01LjUyMiwwLTEwLDQuNDc3LTEwLDEwdjE4Ljg1NGMwLDUuNTIzLDQuNDc4LDEwLDEwLDEwaDU4LjgxMmM1LjUyMiwwLDEwLTQuNDc3LDEwLTEwVjEwDQoJCQkJQzI5MC44ODcsNC40NzgsMjg2LjQwOSwwLDI4MC44ODcsMHoiLz4NCgkJCTxwYXRoIGQ9Ik0xMDguMTEzLDM4Ljg1NGg1OC44MTNjNS41MjIsMCwxMC00LjQ3NywxMC0xMFYxMGMwLTUuNTIzLTQuNDc4LTEwLTEwLTEwaC01OC44MTNjLTUuNTIyLDAtMTAsNC40NzctMTAsMTB2MTguODU0DQoJCQkJQzk4LjExMywzNC4zNzcsMTAyLjU5MSwzOC44NTQsMTA4LjExMywzOC44NTR6Ii8+DQoJCQk8cGF0aCBkPSJNMzc5LDBoLTQyLjk2NWMtNS41MjIsMC0xMCw0LjQ3Ny0xMCwxMHYxOC44NTRjMCw1LjUyMyw0LjQ3OCwxMCwxMCwxMGgxNC4xMTN2MTQuMTEzYzAsNS41MjMsNC40NzgsMTAsMTAsMTBIMzc5DQoJCQkJYzUuNTIyLDAsMTAtNC40NzcsMTAtMTBWMTBDMzg5LDQuNDc4LDM4NC41MjIsMCwzNzksMHoiLz4NCgkJCTxwYXRoIGQ9Ik0zNzksMjEyLjA3NGgtMTguODUyYy01LjUyMiwwLTEwLDQuNDc3LTEwLDEwdjU4LjgxMmMwLDUuNTIyLDQuNDc4LDEwLDEwLDEwSDM3OWM1LjUyMiwwLDEwLTQuNDc4LDEwLTEwdi01OC44MTINCgkJCQlDMzg5LDIxNi41NTEsMzg0LjUyMiwyMTIuMDc0LDM3OSwyMTIuMDc0eiIvPg0KCQkJPHBhdGggZD0iTTM3OSw5OC4xMTRoLTE4Ljg1MmMtNS41MjIsMC0xMCw0LjQ3Ny0xMCwxMHY1OC44MTJjMCw1LjUyMyw0LjQ3OCwxMCwxMCwxMEgzNzljNS41MjIsMCwxMC00LjQ3NywxMC0xMHYtNTguODEyDQoJCQkJQzM4OSwxMDIuNTkxLDM4NC41MjIsOTguMTE0LDM3OSw5OC4xMTR6Ii8+DQoJCTwvZz4NCgk8L2c+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8L3N2Zz4NCg=='});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment