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?

0
, Vil Ignoble 2 years 2019-10-28T01:36:24-05:00 0 Answers 78 views 0

Leave an answer

Browse
Browse