Wordpress Block.js SVG createElement

Question

I have an svg image I have created with the following code as example:

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 93.79 38.77">
<defs>
<style>.cls-1{font-size:35.66px;font-family:MyriadPro-Regular, Myriad Pro;}.cls-2{letter-spacing:-0.01em;}.cls-3{fill:#d39e09;}</style>
</defs>
<title>Amazon</title>
<text class="cls-1" transform="translate(0 29.85) scale(0.79 1)">ama<tspan class="cls-2" x="64.12" y="0">z</tspan><tspan x="79.14" y="0">on</tspan></text>
<path class="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)"/>
</svg>

I am using the following template to create an svg icon for blocks in the block.js file of my plugin:

var Amazon = function () {
        var svg = createElement( 'svg', { id: 'Layer_1', xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 93.79 38.77' },
            createElement( 'text', { class: 'cls-1', transform: 'translate(0 29.85) scale(0.79 1)' } ), 
            createElement( 'path', { class: '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 } );
 };

I need to know how to add the following into the createElement with svg coding standards as elements from the svg image, Title, defs, style, the text amazon with tspans in between the text. I have the text createElement in the example, but am having trouble coding the text amazon with the tspans as a secondary hierarchy of the text element. Finally, the data-name attribute does not conform with a hyphen in between data and name, how do I add data-name attribute to the svg element?

Answer 1

Basically, when using wp.element.createElement(),

1. For attribute names having special characters like a hypen/-, the name should be put in single/double quotes: e.g. 'data-name' and not simply data-name.

   createElement( 'svg', {
       'data-name': 'Layer 1' // like this
       data-name: 'Layer 1'   // not this
   } );
   

2. The same also goes to attribute names like class which is a reserved JavaScript word/identifier.

   createElement( 'text', {
       'class': 'cls-1'   // use quotes
       className: 'cls-1' // or use className
   } );
   

3. createElement() can accept nested child elements, just as you can see below.. (for an in-depth explanation/guide, please ask/search on sites like Stack Overflow)

   createElement( 'ul', null,
       createElement( 'li', null, 'One' ),
       createElement( 'li', null,
           createElement( 'b', null, 'Two' )
       ),
       createElement( 'li', null, 'Three' )
   );
   /* Output:
   <ul><li>One</li><li><b>Two</b></li><li>Three</li></ul>
   */
   

So with the SVG markup in the question, the following would do it:

var Amazon = function () {
    var svg = createElement("svg", {
        id: "Layer_1",
        // attributes having special characters in the name should be wrapped in quotes
        "data-name": "Layer 1",
        xmlns: "http://www.w3.org/2000/svg",
        viewBox: "0 0 93.79 38.77"
    }, createElement("defs", null, createElement("style", null, ".cls-1{font-size:35.66px;font-family:MyriadPro-Regular, Myriad Pro;} .cls-2{letter-spacing:-0.01em;} .cls-3{fill:#d39e09;}")), createElement("title", null, "Amazon"), createElement("text", {
        // for the `class` attribute, use className; or wrap the name in quotes ('class')
        'class': "cls-1",
        transform: "translate(0 29.85) scale(0.79 1)"
    }, "ama", createElement("tspan", {
        'class': "cls-2",
        x: "64.12",
        y: "0"
    }, "z"), createElement("tspan", {
        x: "79.14",
        y: "0"
    }, "on")), createElement("path", {
        'class': "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 } );
};

I hope that helps, and next time around, try asking on sites like Stack Overflow for questions like this (which is actually specific to JavaScript and not WordPress). And yes, the above code looks scary (or complex).. hence why it's suggested you use JSX in your code, but don't forget to build the script for production usage — building can be hard at first, but trust me, it would eventually become easy.. :)