Some local SVGs cannot be loaded

[AABBCC-cloud]

Nuxt Icon could not parse the SVG content for icon star

like this Svg
<svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200"> <path d="M31.652 93.206h33.401c1.44 2.418 3.077 4.663 4.93 6.692h-38.33v-6.692zm0-10.586h28.914a44.8 44.8 0 0 1-1.264-6.688h-27.65v6.688zm0-17.27H59.39c.288-2.286.714-4.532 1.34-6.687H31.65v6.687h.003zm53.913 44.84v5.85c0 2.798-2.095 5.075-4.667 5.075h-70.07c-2.576 0-4.663-2.277-4.663-5.075V31.26l23.22-20.96v22.25H17.16v6.688h18.39V6.688h45.348c2.576 0 4.667 2.277 4.667 5.066v20.009c1.987-.675 4.053-1.128 6.17-1.445v-18.56C91.738 5.28 86.874 0 80.902 0H31.15L0 28.118v87.917c0 6.48 4.859 11.759 10.832 11.759h70.07c5.974 0 10.837-5.27 10.837-11.759v-4.41c-2.117-.312-4.183-.765-6.17-1.435h-.004zM23.279 58.667h-7.96v6.688h7.96v-6.688zm-7.956 41.23h7.96v-6.691h-7.96v6.692zm7.956-23.96h-7.96v6.687h7.96v-6.688zm89.718-15.042l-4.896-4.07-12.447 17.613-11.19-9.305-3.762 5.311 16.091 13.38 16.204-22.929zM128 70.978c0-18.632-13.97-33.782-31.147-33.782-17.168 0-31.135 15.155-31.135 33.782 0 18.628 13.97 33.783 31.135 33.783 17.172 0 31.143-15.15 31.143-33.783H128zm-6.17 0c0 14.933-11.203 27.1-24.981 27.1-13.77 0-24.987-12.158-24.987-27.1 0-14.941 11.195-27.099 24.987-27.099 13.778 0 24.982 12.158 24.982 27.1z"/> </svg>

[bernhardberger]

I was kinda scratching my head when I saw this ticket - but I can actually confirm.. there are SVGs that result in a "404" response from the server endpoint.

In my case it's this icon that breaks nuxt/icon:

<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 16">
  <path fill="#fff" d="M19.2205 2.17066c-.722-.85819-2.0549-1.208258-4.6004-1.208258H5.37974c-2.6038 0-3.95929.372648-4.678514 1.286328C0 3.13956 0 4.45214 0 6.26879v3.46252c0 3.51939.832 5.30629 5.37974 5.30629h9.24036c2.2075 0 3.4307-.3089 4.2221-1.0662C19.6537 13.1947 20 11.9267 20 9.73131V6.26879c0-1.91581-.0543-3.23613-.7795-4.09813Zm-6.3804 6.30742L8.64406 10.671c-.0938.0491-.19638.0734-.29883.0734-.116 0-.23175-.0312-.33426-.0933-.19304-.117-.31091-.3262-.31091-.5519V5.72737c0-.22529.11755-.43432.3102-.55136.19271-.11703.43239-.12503.63232-.02116l4.19602 2.17884c.2135.11084.3475.33123.3479.57168.0002.24065-.1333.46135-.3464.57271Z"/>
</svg>

=>

I then pulled some other icons from an older project - they all work. But this particular one in this comment failes with "404".

It gets picked up during startup though:

✔ Nuxt Icon loaded local collection my-icons with 3 icons                                                                    1:46:50 PM

---

This is an example of a working icon:

<svg data-v-7d5c3858="" xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16">
    <path d="M6.623 0a6.618 6.618 0 0 1 4.659 1.942A6.567 6.567 0 0 1 13.2 6.6v.039c-.047 2.363-1.367 4.54-3.013 6.24-.932.96-1.964 1.81-3.09 2.528a.808.808 0 0 1-1.048 0 17.116 17.116 0 0 1-4.34-4.064A8.455 8.455 0 0 1 0 6.545C.016 2.918 2.982-.008 6.623 0m0 4.626A2.079 2.079 0 0 0 6.6 8.784h.023A2.088 2.088 0 0 0 8.72 6.709c0-1.155-.94-2.083-2.097-2.083z" fill="#f00000" />
</svg>

[AABBCC-cloud]

If it's broken, how can it be opened on Chrome

[bernhardberger]

The icon isn't broken. But it breaks nuxt/icon in svg mode.

What's working, though, seems to be putting the module in icon: { mode: css }. All of a sudden, that icon loads..

But that's neither a solution nor a workaround.