BUG: Unable to use transparent fill in Block media svg

GrapesJS version

• I confirm to use the latest version of GrapesJS
  • [email protected] 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