WAIT: SVG icon in Search element disappears after saving the document

Browser: Chrome
OS: macOS

Download any fontawesome SVG icon, upload to Media Library. Create a search element and use the fontawesome SVG icon as the search button icon.

After saving the document a few times, or even working in other documents, shortly after a few saves, the icon no longer shows up in the builder, nor does it show on the web page.

I’d share the URL but its a localhost install as of now.

Hey @mark-h,

I’ve set the search icon to SVG in my local install, but nothing like this has happened.
Do you think you can reproduce reliably, so that I can reproduce it also?

Maybe are there some styling applied, that hides the icons or something? Can you try with all plugins disabled maybe?

Thanks,
M

The only plugin I have installed is Media Cloud. It connects to Cloudflare R2.

I noticed once the icon no longer shows, it also doesn’t show any of the html code either for it.

For example, wrapping an SVG icon element in a link just shows an empty a tag, no svg inside of it.

When exporting the JSON template, I do see the section for the SVG there.

Here is another example of the error when just using SVG file.

@Matej Is it possible that icons can only be loaded locally and not from external domain in Bricks Builder?

Do you see any error messages? I mean, if it’s from a media library, then it should have a local URL.

I recreated the same steps as you described in the first post, but I have a local URL, is this different for you? :thinking:

Best regards,
M

I do not see any PHP/Apache or WordPress errors, nor browser console errors.

Media Cloud pushes the images and fonts to Cloudflare R2 storage bucket, so the content is from a public URL.

The fonts and non-SVG images stored in R2 load fine in Bricks, it is just the SVGs that load once and then don’t work anymore after several saves.

What is odd is the preview of the SVG still shows as in the last image on the slide out.

Hi,

Thanks for all the info. As you are also communicating via tickets/email, we’ve replied there and will update this thread once we find the cause of this issue, in case somebody else has a similar problem.

Best regards,
M

I updated the email but wanted to update here as well.

It appears to work fine without the Media Cloud plugin. Unfortunately, I’m not sure why SVG’s specifically do not work with Bricks Builder and Media Cloud. There are no issues with fonts, jpeg, webp, and other file formats being loaded using the plugin on Bricks. I’ve also done testing with the Cloudflare R2 CORS setting to make sure all files and origins are allowed (unrestricted setting), and that did not solve the issue.

What I notice is after adding the icon via Media Cloud, the icon appears in Bricks Builder. However, once Media Cloud uploads to Cloudflare R2 and the file no longer exists on the server and only in the S3 bucket, that is the time the icon no longer appears in Bricks Builder.