JSX SVG Icon with WordPress

Question

I am needing some outline code for JSX SVG with WordPress, I am adding custom block.js icons using SVG, I have built some streamline code without JSX and am looking to switch to JSX in my block.js file. This is a WordPress plugin I am working with, I have the following code which allows me to use custom SVG Icons that i inherently built with createElement:

( 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.

    var Amazon = function () {
        var svg = createElement("svg", {
            id: "Amazon_Layer",
            // attributes having special characters in the name should be wrapped in quotes
            "data-name": "Amazon Layer",
            xmlns: "http://www.w3.org/2000/svg",
            viewBox: "0 0 93.79 38.77"
            }, createElement("defs", null, createElement("style", null, ".amazon-cls-1{font-size:35.66px;font-family:MyriadPro-Regular, Myriad Pro;} .amazon-cls-2{letter-spacing:-0.01em;} .amazon-cls-3{fill:#d39e09;}")), createElement("title", null, "Amazon"), createElement("text", {
                // for the `class` attribute, use className; or wrap the name in quotes ('class')
                'class': "amazon-cls-1",
                transform: "translate(0 29.85) scale(0.79 1)"
            }, "ama", createElement("tspan", {
                'class': "amazon-cls-2",
                x: "64.12",
                y: "0"
            }, "z"), createElement("tspan", {
                x: "79.14",
                y: "0"
            }, "on")), createElement("path", {
                'class': "amazon-cls-3",
                d: "M12.37,57c19.45,4.55,44,6.77,70.34,0,3-.77,6-1.64,8.79-2.58",
                transform: "translate(-3.46 -23.53)"
            }));
        return createElement( wp.components.Icon, { icon: svg } );
    };
    var Ebay = function () {
        var svg = createElement("svg", {
            id: "Ebay_Layer",
            // attributes having special characters in the name should be wrapped in quotes
            "data-name": "Ebay Layer",
            xmlns: "http://www.w3.org/2000/svg",
            viewBox: "0 0 98.35 80.24"
            }, createElement("defs", null, createElement("style", null, ".ebay-cls-1{font-size:46.01px;fill:#ed1c24;} .ebay-cls-1,.ebay-cls-2,.ebay-cls-3,.ebay-cls-4{font-family:MyriadPro-Regular, Myriad Pro;} .ebay-cls-2{font-size:53.28px;fill:blue;} .ebay-cls-3,.ebay-cls-4{font-size:72.65px;} .ebay-cls-3{fill:#ff0;} .ebay-cls-4{fill:#39b54a;}")), createElement("title", null, "Ebay"), createElement("text", {
                // for the `class` attribute, use className; or wrap the name in quotes ('class')
                'class': "ebay-cls-1",
                transform: "translate(0 57.65)"
            }, "e", createElement("text", {
                'class': "ebay-cls-2",
                transform: "translate(17.67 63.67)"
            }), "b", createElement("text", {
                x: "-1.31",
                y: "-8.07"
            }), createElement("text", {
                'class': "ebay-cls-3",
                transform: "translate(44.21 60.81) scale(0.85 1)"
            })), "a", createElement("text", {
                'class': "ebay-cls-4",
                transform: "translate(59.05 62.08)"
            }, "Y"));
        return createElement( wp.components.Icon, { icon: svg } );
    };

    /**
     * Register block
     *
     * @param  {string}   name     Block name.
     * @param  {Object}   settings Block settings.
     * @return {?WPBlock}          Block itself, if registered successfully,
     *                             otherwise "undefined".
     */
    registerBlockType(
        'monetizerpro/amazon-shortcode-block', // Block name. Must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
        {
            title: __( 'Amazon', 'monetizerpro-blocks' ), // Block title. __() function allows for internationalization.
            icon: Amazon,
            category: 'monetizerpro-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 -.
                    },
                    '[Amazon keyword="" results=""][/Amazon]' // 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 -.
                    },
                    '[Amazon keyword="" results=""][/Amazon]' // Block content
                );
            },
        });
    registerBlockType(
        'monetizerpro/ebay-shortcode-block', // Block name. Must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
        {
            title: __( 'Ebay', 'monetizerpro-blocks' ), // Block title. __() function allows for internationalization.
            icon: Ebay,
            category: 'monetizerpro-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 -.
                    },
                    '[Ebay keyword="" results=""][/Ebay]' // 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 -.
                    },
                    '[Ebay keyword="" results=""][/Ebay]' // Block content
                );
            },
        }
    );
})();

As you can see the problem, the solution is equally complicated to create SVG Icons in this way and I would like to switch to JSX. I have tried to use the following code on this page https://css-tricks.com/creating-svg-icon-system-react/.

// Icon
const IconUmbrella = React.createClass({
 render() {
   return (
     <svg className="umbrella" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" aria-labelledby="title">
    <title id="title">Umbrella Icon</title>
        <path d="M27 14h5c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2v0zM27 14c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2v0 14c0 1.112-0.895 2-2 2-1.112 0-2-0.896-2-2.001v-1.494c0-0.291 0.224-0.505 0.5-0.505 0.268 0 0.5 0.226 0.5 0.505v1.505c0 0.547 0.444 0.991 1 0.991 0.552 0 1-0.451 1-0.991v-14.009c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-5.415 6.671-9.825 15-9.995v-1.506c0-0.283 0.224-0.499 0.5-0.499 0.268 0 0.5 0.224 0.5 0.499v1.506c8.329 0.17 15 4.58 15 9.995h-5z"/>
      </svg>
   )
 }
});

This gives me an error that as stated

Unclosed regular expression. Unrecoverable syntax error.

I have tried altering code to look like this:

// Icon
var Amazon = function () {
var svg = React.createClass({
 render() {
   return (
     <svg className="umbrella" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" aria-labelledby="title">
    <title id="title">Umbrella Icon</title>
        <path d="M27 14h5c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2v0zM27 14c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2v0 14c0 1.112-0.895 2-2 2-1.112 0-2-0.896-2-2.001v-1.494c0-0.291 0.224-0.505 0.5-0.505 0.268 0 0.5 0.226 0.5 0.505v1.505c0 0.547 0.444 0.991 1 0.991 0.552 0 1-0.451 1-0.991v-14.009c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-5.415 6.671-9.825 15-9.995v-1.506c0-0.283 0.224-0.499 0.5-0.499 0.268 0 0.5 0.224 0.5 0.499v1.506c8.329 0.17 15 4.58 15 9.995h-5z"/>
      </svg>
   )
 }
});

This though causes the same syntax error, I would like to use my svg from Adobe Illustrator and combine this with react to then create an SVG Icon for my custom block, I have never used React or JSX so I have no idea what the format code should look like, if someone could provide an example of how to utilize JSX, React, WordPress and SVG, thank you.

0
Vil Ignoble 3 years 2019-11-01T03:57:46-05:00 0 Answers 81 views 0

Leave an answer

Browse
Browse