Hacker News new | ask | show | jobs
by elithrar 642 days ago
There's ~four of us trying to reproduce this right now, using Astro and Remix, and cannot at all.

An important note: React-based frameworks tend to use camelCase attributes vs. hyphen-case (which is the output) in components: including the icon library being used here. Something during the build process is not converting them to hyphen-case.

* I've pasted a decently complex SVG exported from Figma into a Remix component verbatim (hyphen-attributes) and it renders fine: https://9b14a265.test-broken-svgs-remix.pages.dev/ (scroll down)

* I've rewritten those attributes to camelCase: and again, renders fine - https://1af766a8.test-broken-svgs-remix.pages.dev/

* This is all deployed via the Pages Build system; no local builds at all.

* Someone else on the team has an Astro example stood up with the specific unplugin-icons library: https://astro-svg.pages.dev/ - cannot reproduce the invalid SVG attributes.

We're going to continue investigating but don't see this as widespread and don't yet have any other reports. That there is a _difference_ between the direct deploy vs. using Pages Builds is a problem, though. We've also asked the Astro folks to understand if there's something up here as well.

(If not clear: I work at Cloudflare)

2 comments

Might this happen if the author did not have the Mime type set correctly when serving his .svg assets?
Based on the article, it's happening before anything gets served, it's specifically happening during the Astro build phase, but only on the Cloudflare build machines. So by the time it comes to serve the assets, stuff is already broken.

My guess would be that there is some specific bit of information set during the build that triggers this incorrect build in Astro, and this information is set only by the Cloudflare build process. But here the people from Cloudflare are struggling to reproduce that effect, so it looks very specific to this person's setup.

Did you get a reply from the author? I've been nerd-sniped so I'm very keen to know what the problem actually was.