Safari does not render Remix icon when using SVG sprite

[vitalets]

Hello! I’m writing an article about different methods of using SVGs in React projects.
While experimenting with the SVG sprite approach in the epic-stack app, I noticed an issue: the Remix icon doesn’t appear in Safari.

Steps:

1. Copy all logos to the other/svg-icons/ dir so they get embedded into sprite.svg
2. In app/routes/_marketing/index.tsx, render the icons with the <Icon/> component instead of <img>
3. Open the app in Safari

The result:
The Remix icon is not displayed (while all other icons are visible):

Screenshot

if I render the logos using regular <img> tag (as in a fresh epic-stack install), all logos display correctly in Safari:

Screenshot

Edits to app/routes/_marketing/index.tsx:

- <img src={logo.src} alt="" />
+ <Icon name={getIconName(logo.alt)} className="size-16" />

// ...

+function getIconName(logoAlt: string) {
+	return logoAlt.toLowerCase()
+	  .split('.')[0]
+	  ?.replace(/\W/g, '-')
+	  ?.replace('tailwind-css', 'tailwind'
+	  ?.replace('radix-ui', 'radix') as IconName;
+}

I suspect this issue is related to the use of filters inside the Remix logo SVG.
Did you encounter this behavior? Are there any workarounds?
Thanks you!

[kentcdodds]

I'm afraid I don't know what could be causing this. Sorry.