2

I have added a static block for adding a shortcode. Instead of using the dashicons as the block icon, I want to use a customized icon which is already existed in the plugin 'images' folder. Anyone please help me to use a .svg image as the block icon. Below is the code I have tried so far to add an customized icon

( function() {
var __ = wp.i18n.__;
var createElement = wp.element.createElement;
var registerBlockTypeMainPage = wp.blocks.registerBlockType;
const iconEl = el('svg', { width: 20, height: 20 },
    el('path', { d: "M8.54,4.68V8h3.23v.58H8.54v3.28H8V8.55H4.74V8H8V4.68Z,M26.48,5.93,24.15,8.26l2.28,2.28L26,11,23.74,8.66,21.42,11,21,10.58l2.33-2.32L21.05,6l.41-.41,2.28,2.28,2.33-2.33Z,M11.26,23.45V24h-6v-.59Z,M27.25,22.36v.58h-7v-.58Zm0,2.19v.57h-7v-.57Z" } )
);

registerBlockTypeMainPage(
    'mdlr/static-block',
    {
        title: __( 'Test block' ),
        icon: iconEl,
        category: 'widgets',

        edit: function( props ) {
            return createElement(
                'p',
                {
                    className: props.className,
                },
                '[test-block]'
            );
        },

        save: function( props ) {
            return createElement(
                'p',
                {
                    className: props.className,
                },
                '[test-block]'
            );
        },
    }
);
})();
1

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.