natemoo-re/astro-icon

v1: Failed to import "logo": Unexpected element: <switch>

mseele opened this issue · 5 comments

mseele commented

What version of astro-icon are you using?

v1.0.2

Astro Info

Astro                    v4.1.0
Node                     v21.5.0
System                   macOS (arm64)
Package Manager          pnpm
Output                   static
Adapter                  none
Integrations             @astrojs/tailwind
                         astro-icon
                         @astrojs/sitemap
                         astro-robots-txt

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

Since Version 1, loading of our "logo.svg" failed with error

Failed to import "logo": Unexpected element: <switch>

What's the expected result?

Loading the logo.svg should work like in pre 1.0 versions.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-j9gyhg?file=src%2Fpages%2Findex.astro

gilmargr commented

I got a similar error. Unexpected element: <text>
It seems an error interpreting svg files

  • 👍1
natemoo-re commented

This error is caused by our dependency on @iconify/utils. When it loads an icon, it attempts to optimize it, but svgo doesn't support everything.

In this case, I don't think the switch element is doing anything and it could easily be changed to a g? As for <text>, I need to figure out why Iconify throws because it definitely should just ignore it.

gilmargr commented

I ran svgo on the command line using the original SVG file as input and received no output errors. However, the output file produces the same error as the original one.

gnosticdev commented

I had similar issue with and it turns out iconify doesnt allow text bc of how they render differently based on the OS.

https://iconify.design/docs/articles/cleaning-up-icons/validate.html#text-and-fonts

gilmargr commented

It actually makes sense. I transformed the text to path and now it works. Thanks for the tip!

  • 👍1