Radcliffe 2 - SVG Icons Not Appearing on Simple Sites

[masperber]

Quick summary

The Radclfife 2 theme uses some SVG icons in the following areas, and perhaps others:

The above-header contact info: A phone SVG icon appears if the user has entered a phone number, and an envelope SVG icon appears if the user has entered an email address.

The header menu: A hamburger (3 horizontal bars) icon appears on the mobile view if there is a header menu.

On Simple sites, these SVG icons are sometimes not appearing. Atomic sites seem to be unaffected by the issue.

On a customer-reported site, the envelope SVG appeared, but the others did not. On my test site, none of the SVGs appeared.

Steps to reproduce

1. Start a Simple site with the Radcliffe 2 theme.
2. In Appearance > Customize > Contact Info, enter a phone number and email address.
3. In Appearance > Menus add a Header menu.
4. Verify that the SVGs do not appear in the contact info area.
5. Verify that the hamburger SVG does not appear on the mobile menu button.

What you expected to happen

All SVGs should appear.

What actually happened

The SVGs do not appear.

Browser

Google Chrome/Chromium, Mozilla Firefox, Microsoft Edge, Apple Safari, iOS Safari, Android Chrome

Context

Customer report, confirmed by testing

Platform (Simple, Atomic, or both?)

Simple

Other notes

No response

Reproducibility

Consistent

Severity

All

Available workarounds?

No but the platform is still usable

Workaround details

Taking the site Atomic could be a workaround if the customer has an appropriate hosting plan.

[masperber]

7993483-zen customer requests followup when the issue is resolved.

[github-actions[bot]]

Support References

This comment is automatically generated. Please do not edit it.

• [ ] 7993483-zen
• [ ] 8025883-zen
• [ ] 7999491-zen
• [ ] 8052490-zen
• [ ] 8068561-zen
• [ ] 8088184-zen
• [ ] 8097264-zen
• [ ] 8105953-zen

[mrfoxtalbot]

I can reproduce this issue looking at the theme's demo: https://radcliffe2demo.wordpress.com

I can reproduce it in Chrome, Safari and Firefox, so it is browser-independent.

[mrfoxtalbot]

I do not think this https://github.com/Automattic/themes/issues/1048 is related but I am cross-referencing just in case

[edequalsawesome]

Also brought up in 8025883-zen

[rosepajaroja]

7999491-zen

I also want to add that the contact info (address, contact number, and email) is also not visible on mobile and tablet views.

[rosepajaroja]

Additional note:

SVG icons for the submenus also don't show.

[liviopv]

Moving interactions from duplicate issue:

• [ ] 8052490-zd-a8c
• [ ] 8068561-zd-a8c
• [ ] 8088184-zd-a8c
• [ ] 8097264-zd-a8c
• [ ] 8105953-zd-a8c

[liviopv]

Pinged developers who touched the theme on the day before this report here p1714148189202629-slack-C029FM1EH

[miksansegundo]

The icons.svg file is empty after this https://github.com/Automattic/themes/pull/7671 tried to compress it.

Photos theme was also affected by this.

I've restored the SVG files in https://github.com/Automattic/themes/pull/7773 to fix the issue in Radcliffe 2 and Photos. Will deploy it soon and let you know!

[miksansegundo]

Deployed https://github.com/Automattic/themes/pull/7773 🚀

✅ Icons are working on Dotcom Simple sites