我在这页上读到，我很难将自定义svg图标添加到我的Wordpress插件中https://developer.wordpress.org/block-editor/components/icon/ 要在我的插件中为我的块添加自定义svg图标，我需要在我的块中添加以下代码。我的插件中的js文件：

import { Icon } from \'@wordpress/components\';

const MyIcon = () => (
    <Icon icon={ <svg><path d="M5 4v3h5.5v12h3V7H19V4z" /></svg> } />
);

我的区块中有以下文本。js文件：

( function() {
    var __ = wp.i18n.__; // The __() function for internationalization.
    var createElement = wp.element.createElement; // The wp.element.createElement() function to create elements.
    var registerBlockType = wp.blocks.registerBlockType; // The registerBlockType() function to register blocks.

    import { Icon } from \'@wordpress/components\';

    const MyIcon = () => (
        <Icon icon={ () => <svg><path d="M5 4v3h5.5v12h3V7H19V4z" /></svg> } />
    );

    /**
     * Register block
     *
     * @param  {string}   name     Block name.
     * @param  {Object}   settings Block settings.
     * @return {?WPBlock}          Block itself, if registered successfully,
     *                             otherwise "undefined".
     */
    registerBlockType(
        \'plugin/custom-block-shortcode-block\', // Block name. Must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
        {
            title: __( \'custom-block\', \'plugin-blocks\' ), // Block title. __() function allows for internationalization.
            icon: MyIcon,
            category: \'plugin-blocks\', // Block category. Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.

            // Defines the block within the editor.
            edit: function( props ) {
                return createElement(
                    \'p\', // Tag type.
                    {
                        className: props.className,  // Class name is generated using the block\'s name prefixed with wp-block-, replacing the / namespace separator with a single -.
                    },
                    \'[Shortcode][/Shortcode]\' // Block content
                );
            },

            // Defines the saved block.
            save: function( props ) {
                return createElement(
                    \'p\', // Tag type.
                    {
                        className: props.className,  // Class name is generated using the block\'s name prefixed with wp-block-, replacing the / namespace separator with a single -.
                    },
                    \'[Shortcode][/Shortcode]\' // Block content
                );
            },
        }
    );
})();

我在下面的代码部分中看到一个语法错误<Icon icon={ () => <svg><path d="M5 4v3h5.5v12h3V7H19V4z" /></svg> } />

错误显示在第9行：

Expected an identifier and instead saw \'<\'.

添加自定义svg图标并将其用作Wordpress块图标的正确方法是什么？

var MyIcon = function () {
  var svg = createElement( \'svg\', {},
    createElement( \'path\', { d: \'M5 4v3h5.5v12h3V7H19V4z\' } )
  );
  return createElement( wp.components.Icon, { icon: svg } );
};

import { Icon } from \'@wordpress/components\';

const MyIcon = () => (
    <Icon icon={ <svg><path d="M5 4v3h5.5v12h3V7H19V4z" /></svg> } />
);

import { Icon } from \'@wordpress/components\';

const MyIcon = () => (
    <Icon icon={ () => <svg><path d="M5 4v3h5.5v12h3V7H19V4z" /></svg> } />
);

import { Icon } from \'@wordpress/components\';

const MyIcon = () => (
    <Icon icon={ <svg><path d="M5 4v3h5.5v12h3V7H19V4z" /></svg> } />
);

import { Icon } from \'@wordpress/components\';

const MyIcon = () => (
    <Icon icon={ () => <svg><path d="M5 4v3h5.5v12h3V7H19V4z" /></svg> } />
);