search

ndiego / icon-block

Effortlessly add SVG icons and graphics to your website.
https://nickdiego.com/projects/icon-block/
GNU General Public License v2.0
104 stars 14 forks source link

Hyphens in SVG attributes are removed #3

Closed tolnem closed 2 years ago

tolnem commented 2 years ago

Adding a custom icon with attributes such as fill-rule, stroke-width and stroke-dasharray, the hyphen in the attribute names are removed in the database and in the frontend. They do, however, show up correctly in the editor.

As an example, adding this custom icon in an icon block:

<svg width="59px" height="31px" viewBox="0 0 59 31" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-dasharray="0,8.82" stroke-linecap="round" stroke-linejoin="round">
        <g transform="translate(-676.000000, -416.000000)" stroke="#006BBD" stroke-width="4">
            <g transform="translate(678.000000, 406.000000)">
                <path d="M0,23.8672205 C0.51521091,27.5290669 3.05554191,38.6619456 14.9182118,39 C22.513291,38.1738336 27.1592762,34.1390591 28.8561673,26.8956765 C31.4015039,16.0306026 48.3861799,2.86801104 55,20.9340055" id="Stroke-7-Copy-3"></path>
            </g>
        </g>
    </g>
</svg>

Ends up with this in the post content:

<!-- wp:outermost/icon-block {"iconName":""} -->
<div class="wp-block-outermost-icon-block items-justified-undefined"><div class="icon-container" style="width:48px"><svg width="59px" height="31px" viewbox="0 0 59 31" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsxlink="http://www.w3.org/1999/xlink"><g stroke="none" strokewidth="1" fill="none" fillrule="evenodd" strokedasharray="0,8.82" strokelinecap="round" strokelinejoin="round"><g transform="translate(-676.000000, -416.000000)" stroke="#006BBD" strokewidth="4"><g transform="translate(678.000000, 406.000000)"><path d="M0,23.8672205 C0.51521091,27.5290669 3.05554191,38.6619456 14.9182118,39 C22.513291,38.1738336 27.1592762,34.1390591 28.8561673,26.8956765 C31.4015039,16.0306026 48.3861799,2.86801104 55,20.9340055" id="Stroke-7-Copy-3"></path></g></g></g></svg></div></div>
<!-- /wp:outermost/icon-block -->

And renders in the frontend:

<div class="wp-block-outermost-icon-block items-justified-undefined"><div class="icon-container" style="width:48px"><svg width="59px" height="31px" viewbox="0 0 59 31" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsxlink="http://www.w3.org/1999/xlink"><g stroke="none" strokewidth="1" fill="none" fillrule="evenodd" strokedasharray="0,8.82" strokelinecap="round" strokelinejoin="round"><g transform="translate(-676.000000, -416.000000)" stroke="#006BBD" strokewidth="4"><g transform="translate(678.000000, 406.000000)"><path d="M0,23.8672205 C0.51521091,27.5290669 3.05554191,38.6619456 14.9182118,39 C22.513291,38.1738336 27.1592762,34.1390591 28.8561673,26.8956765 C31.4015039,16.0306026 48.3861799,2.86801104 55,20.9340055" id="Stroke-7-Copy-3"></path></g></g></g></svg></div></div>

But as mentioned, they are rendered with hyphens and look correct in the editor itself.