Errors about invalid DOM properties

[DeoThemes]

Hi, When uploading the Feather icon I'm getting the following errors in the console:

Warning: Invalid DOM property stroke-width. Did you mean strokeWidth? Warning: Invalid DOM property stroke-linecap. Did you mean strokeLinecap?

You can test it with the icon I'm sending you.

[DeoThemes]

I found that adding attributesToProps to your parse-icon.js attributes solves the problem. Please check and correct if my code is wrong. But I tested it with multiple icons and it works so far.

import parse, { attributesToProps, domToReact } from 'html-react-parser';

export default function parseIcon( icon ) {
    const newIcon = icon.trim();

    const parseOptions = {
        trim: true,
        replace: ( { attribs, children, name, parent, type } ) => {
            if ( type !== 'tag' || ( ! parent && name !== 'svg' ) || ! name ) {
                return <></>;
            }

            // Hyphens or colons in attribute names are lost in the default
            // process of html-react-parser. Spreading the attribs object as
            // props avoids the loss. Style does need to be handled separately.
            const Tag = `${ name }`;
            return (
                <Tag
                    { ...attributesToProps( attribs ) }
                    style={ parseStyles( attribs?.style ) }
                >
                    { domToReact( children, parseOptions ) }
                </Tag>
            );
        },
    };

[ndiego]

Hi @DeoThemes, I just tested with the SVG provided, and I am not seeing any errors in WordPress 6.1. I have tested in Chrome and Safari. Can you share your setup, and I will attempt to replicate. Thanks!

[DeoThemes]

I'm using Local with PHP 8.0.22 WordPress 6.1.1 and Ona Full Site Editing theme, multi-site network if it matters. I just tested it on the live site and didn't see the same issue. So it seems to be happening only on a local installation. However when I replicated your code in my plugin and added attributesToProps the issue is gone.

[ndiego]

Ok cool. Thanks for the additional info. I will do some testing with the addition of attributesToProps. If it doesn't introduce any regressions or other unexpected issues, I will add it in the next release. 💪

[DeoThemes]

Also, when I test this icon it doesn't appear in the editor, but with attributesToProps it appears:

This is the icon exported from Figma

[ndiego]

@DeoThemes I apologize for the delay on this. I am working on the next release of the Icon Block and will be including the addition of attributesToProps. Would you be able to share that icon noted in the previous comment again? The link to the file is not working. Thanks!

[DeoThemes]

Sure, here it is.

Just right click and Save as

[ndiego]

Perfect, thanks. "Save as" did it. Looks like everything is working properly. This change does cause a book validation error for certain SVGs, but I have put a deprecation in place, which should resolve this. Going to allow time for more testing this week to ensure the change does not cause any unforeseen issues with existing users.

Thanks again for reporting and identifying the solution 🙌