Unexpected behaviour when using an Icon within ClientOnly fallback
slugcat-dev opened this issue · comments
Consider following code for your app:
<style>
.loading {
font-size: 2rem;
}
</style>
<template>
<ClientOnly>
<template #fallback>
<div class="loading">
<Icon name="svg-spinners:ring-resize" />
Loading
</div>
</template>
<div class="content" ref="someRef">
This text should NOT be large!
Remove the <pre>ref="someRef"</pre> from the parent and it works
</div>
</ClientOnly>
</template>
Expected behaviour when loading the page:
A big loading spinner, and, when everything is done loading, some normal text, like this:
When you remove the ref="someRef"
from the content div, it works as expected
Are you sure this is from Nuxt icon directly and not Nuxt itself?
Can't tell, but when you remove the Icon from the template, it works
Could you try with <IconCSS name="svg-spinners:ring-resize" />
?
Already tried that, it doesn't work either
Can you create a reproduction with Stackblitz please?