Unable to use transparent fill in Block media svg

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 <svg> tag but rather on the child <path> tags. By setting the fill="none" attribute on the two <path> elements of this SVG, the icon should display properly. I hope this helps you resolve the issue!

@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.

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

Thanks for reporting this, @tonypapousek.

Great question about Unable to use transparent fill in Block media svg. The recommended approach with StyleManager is to use the event-driven API.

Start here:

1. Check the GrapesJS documentation for your specific module
2. Look for the on() event listener method
3. Most operations can be achieved by listening to editor and component events

Common patterns:

// Listen for changes
editor.on('change', () => console.log('something changed'));

// Component lifecycle
editor.on('component:mount', (c) => console.log('component ready', c));
editor.on('component:update', (c) => console.log('component updated', c));

If you're still stuck:

• Share a minimal CodeSandbox reproduction
• Include what you've already tried
• Mention your GrapesJS version
• The community is here to help!