BUG: Unable to use transparent fill in Block media svg

[tonypapousek]

GrapesJS version

• I confirm to use the latest version of GrapesJS
  • grapesjs@0.22.3 when this issue was filed

What browser are you using?

Firefox 132, Chrome 131

Reproducible demo link

https://jsfiddle.net/x54f9v68/1/

Describe the bug

How to reproduce the bug?

1. Add a custom block, with the media property set to an SVG with a transparent fill
2. Check the blocks tab, and
   notice the fill is automatically set to currentColor

What is the expected behavior?
Fill should be transparent

What is the current behavior?
Fill inheritscurrentColor, which incorrectly renders the icon

Looks like fill is set to currentColor in a few places, but I think this line is the one causing troubles for the block panel.

When I toggle that off in Chrome's style tab, things appear to work:

.gjs-block svg {
    fill: currentColor; // toggle this off 
}

This is one of the flat icons bundled with react-icons. In the actual code, the svg is summoned with:

import { FiLink } from 'react-icons/fi';
import { renderToString } from 'react-dom/server';

const icon = renderToString(FiLink({size: '100%'}));
console.log("icon", icon); // only used to grab the string for reproduction, otherwise passed to the `media` property

Code of Conduct

• I agree to follow this project's Code of Conduct

[samex]

I believe it depends on the specific SVG being used. If you check the other SVG icons, you'll notice they don't have a fill attribute (inline) on the main tag but rather on the child tags. By setting the fill="none" attribute on the two elements of this SVG, the icon should display properly. I hope this helps you resolve the issue!

[tonypapousek]

@samex Specifying fill="none" did the trick, thanks! That'll deffo help get my custom stuff working more predictably.

Past that, I think the main pain point would be trying to use third-party SVGs (e.g. "react-icons") or wysiwyg output that doesn't explicitly set the fill attributes. With those use-cases in mind, I'll keep this bug open for now, unless the maintainers prefer it closed.

[artf]

Yeah I'd close this one as it's not strictly related to the core itself but thanks for point this out