Style tag not being included with dynamic import?

[vincerubinetti]

I have a component like this:

<template>
  <component
    :is="customIcon"
    v-if="isCustom"
    class="icon"
    :data-icon="icon"
    aria-hidden="true"
  />
</template>

<script setup lang="ts">
import { defineAsyncComponent, ref } from "vue";
import { kebabCase } from "lodash";

type Props = {
  icon: string;
};

const props = defineProps<Props>();

const isCustom = ref(true);

const customIcon = defineAsyncComponent(async () => {
  try {
    return await import(`../assets/icons/${kebabCase(props.icon)}.svg`);
  } catch {
    isCustom.value = false;
    return await import(`../assets/icons/loading.svg`);
  }
});
</script>

And loading.svg looks like this:

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="-50 -50 100 100"
  data-spinner="true"
>
  <style>
    [data-spinner="true"] {
      animation: spin 2s linear infinite forwards;
    }

    @keyframes spin {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }
  </style>
  <path
    fill="none"
    stroke="currentColor"
    stroke-width="10"
    d="M 0 40 A 40 40 0 1 1 40 0"
  />
</svg>

And the loading.svg isn't spinning because the <style> tag has been removed. I thought it might be some default SVGO setting removing the style as superfluous, but then I turned off SVGO completely and the problem is still there.

Then I figured this plugin was removing the style tag because Vue doesn't like a style tag in the template of a component, but I see in these lines you're trying to get around that.

Any idea what the issue could be?

[vincerubinetti]

Nevermind, just saw #110 and #92. I'm still on 4.0.0 , which I had just installed and assumed would be the same version as what the latest code in main is.

Installing jpkleemans/vite-svg-loader#v4.1.0 (yuck) made it work.

Closing as duplicate.